点击切换帐号登陆
帐号密码登陆

如何用属性对象来访问HTML中的属性?

# 作为Attr节点的属性

## 1. 以对象的方式访问属性

* 每个元素的多个属性,可以看成一个数组中的各个成员
* `NodeList`定义了`attributes`属性用来描述它
* `attributes`是只读的,而且实时的反映对象属性的变化

---------------------------------------------

## 2. 属性访问方式

* `attributes[i]`: 以类数组索引方式访问
* `attributes.name`: 标准对象属性名
* `attributes['name']`: 保留字属性名(也适用于其它属性)

---------------------------------------------

## 3. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以对象的方式访问属性</title>
</head>
<body>
<p id="section" class="red" onclick="alert(this.innerHTML)">html.cn</p>

<script>
//1. 数组索引
var p = document.getElementById('section');
// 获取第一个属性
console.log(p.attributes[0]);

// 返回值类型是对象,所以也可以用对象属性方式访问
console.log(typeof p.attributes[0]);

// 2. 对象属性
console.log(p.attributes.id);

// 3. 保留字属性
// 不推荐
console.log(p.attributes.class);
// 推荐
console.log(p.attributes['class']);

// 以下访问也是基于同样的原因
console.log(p.attributes.onclick);
console.log(p.attributes['onclick']);
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号