HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。“属性”本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMlElement对象）来操作属性。本章介绍如何操作这些属性。
一、Element.attributes 属性
元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但返回的都是null，因此可以把这个属性视为元素对象独有的。
单个属性可以通过序号引用，也可以通过属性名引用。
例如： <body bgcolor="yellow" onload="">
document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']
注意，上面代码的三种方法，返回的都是属性节点对象，而不是属性值。
获取属性值的方法：
获取名称：属性节点对象有name属性，对应该属性的属性名，等同于nodeName属性。
获取属性值：属性节点对象value属性，对应该属性的属性值，等同于nodeValue属性。
例如：
// <div id="mydiv">
var n = document.getElementById('mydiv');
n.attributes[0].name // "id"
n.attributes[0].nodeName // "id"
n.attributes[0].value // "mydiv"
n.attributes[0].nodeValue // "mydiv"
接下来我们写个小dome来遍历一个节点的属性：
var para = document.getElementsByTagName('p')[0];
var result = document.getElementById('result');
if (para.hasAttributes()) {
var attrs = para.attributes;
var output = '';
for(var i = attrs.length - 1; i >= 0; i--) {
output += attrs[i].name + '->' + attrs[i].value;
}
result.textContent = output;
} else {
result.textContent = 'No attributes to show';
}
二、标准属性
HTML 元素的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。可以直接获取：
例如：document.id;document.src等等
三、属性的方法
1、getAttribute()-----获取
2、setAttribute()----新增、设置
3、hasAttribute()----判断是否有属性
4、removeAttribute()----移出某个属性
四、dataset 属性
有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性。
例如：<div id="mydiv" foo="bar">
div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性
这种方法虽然可以达到目的，但是会使得 HTML 元素的属性不符合标准，导致网页代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性
使用元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的data-*属性
var n = document.getElementById('mydiv'); n.dataset.foo // bar n.dataset.foo = 'baz'
除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
注意：data-后面的属性名有限制。
1、只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。
2、属性名不应该使用A到Z的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。
转成dataset的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。
反过来，dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。
例如：dataset.helloWorld会转成data-hello-world。
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
