HTML元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。
<a id="test" href="http://www.example.com">链接</a>
上面代码中，a元素包括两个属性：id属性和href属性。
在DOM中，属性本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMLElement对象）来操作属性。本节介绍如何操作这些属性。
一、Element.attributes属性
HTML元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但是返回的都是null，因此可以把这个属性视为元素对象独有的。
属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。
// HTML代码为
// <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"
二、元素节点对象的属性
HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
var a = document.getElementById('test');
a.id // "test"
a.href // "http://www.example.com/"
上面代码中，a元素标签的属性id和href，自动成为节点对象的属性。
这些属性都是可写的。
var img = document.getElementById('myImage');
img.src = 'http://www.example.com/image.jpg';
上面的写法，会立刻替换掉img对象的src属性，即会显示另外一张图片。
HTML元素的属性名是大小写不敏感的，但是JavaScript对象的属性名是大小写敏感的。转换规则是，转为JavaScript属性名时，一律采用小写。如果属性名包括多个单词，则采用骆驼拼写法，即从第二个单词开始，每个单词的首字母采用大写，比如onClick。
有些HTML属性名是JavaScript的保留字，转为JavaScript属性时，必须改名。主要是以下两个。
for属性改为htmlFor
class属性改为className
另外，HTML属性值一般都是字符串，但是JavaScript属性会自动转换类型。比如，将字符串true转为布尔值，将onClick的值转为一个函数，将style属性的值转为一个CSSStyleDeclaration对象。
三、属性操作的标准方法
3.1、概述
元素节点提供四个方法，用来操作属性。
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
其中，前两个读写属性的方法，与前一部分HTML标签对象的属性读写，有三点差异。
（1）、适用性
getAttribute()和setAttribute()对所有属性（包括用户自定义的属性）都适用；HTML标签对象的属性，只适用于标准属性。
（2）、返回值
getAttribute()只返回字符串，不会返回其他类型的值。HTML标签对象的属性会返回各种类型的值，包括字符串、数值、布尔值或对象。
（3）、属性名
这些方法只接受属性的标准名称，不用改写保留字，比如for和class都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。
var image = document.images[0];
image.setAttribute('class', 'myImage');
上面代码中，setAttribute方法直接使用class作为属性名，不用写成className。
3.2、Element.getAttribute()
Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
// HTML代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
3.3、Element.setAttribute()
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。
var d = document.getElementById('d1');
d.setAttribute('align', 'center');
下面是对img元素的src属性赋值的例子。
var myImage = document.querySelector('img');
myImage.setAttribute('src', 'path/to/example.png');
3.4、Element.hasAttribute()
Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。
var d = document.getElementById('div1');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}
上面代码检查div节点是否含有align属性。如果有，则设置为“居中对齐”。
3.5、Element.removeAttribute()
Element.removeAttribute方法用于从当前元素节点移除属性。
// HTML代码为
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 现在的HTML代码为
// <div id="div1" width="200px">
四、dataset属性
有时，需要在HTML元素上附加数据，供JS脚本使用。一种解决方法是自定义属性。
<div id="mydiv" foo="bar">
上面代码为div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性。
var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')
这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性。
<div id="mydiv" data-foo="bar">
然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作HTML元素标签的data-*属性。
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
上面代码中，通过dataset.foo读写data-foo属性。
除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
注意，data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用A到Z的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。
转成dataset的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。反过来，dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，dataset.helloWorld会转成data-hello-world。
网友评论