属性操作

HTML元素包含签名和若干个键值对，这个键值对就称为属性(attribute)。

<a href="http://www.example.com" id="test"></a>

上面代码中，a元素包含两个属性：id属性和href属性。

在DOM中属性本身是一个对象(attr对象)，但是实际上，这个对象很少使用。一般都是通过元素节点对象(HTMLElement对象)来操作属性。

Element.attribute属性

HTML元素对象都有一个attribute属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反应在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但是返回的都是null，因此可以把这个属性视为元素独有的。

document.body.attributes[0]
document.body.attribute.bgcolor
document.body.attribute['ONLOAD']

注意，上面代码中，第一行attributes[0]返回的是属性节点对象，后两行都返回属性值。

属性节点有name和value属性，对应的属性名和属性值，等同于nodeName属性和nodeValue属性。

<div id="myDiv">
var n = docoument.getElementById('myDiv');
n.attributes[0].name; // "id"
n.attributes[0].nodeName; // "id"

n.attributes[0].value // "myDiv"
n.attributes[0].nodeValue // "myDiv"

下面代码可以遍历一个元素节点的所有属性。

var para = docuemnt.getElementByTagName('p')[0];
var result = document.getElementsById('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 attribute to show';
}

元素节点对象属性

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属性,常常用于添加表单属性。

var f = document.form[0];
f.action = 'submit.php';
f.method = 'POST';

注意这种写法虽然可以读写HTML属性，但是无法删除属性，delete运算符在这里不会生效。

HTML元素的属性名是大小写不区分的，但是JavaScript对象的属性名是大小写区敏感的。转换的规则是，转为JavaScript属性名时，一律采用小写。如果属性名包含多个单词，则采用驼峰法。

有些HTML属性名是JavaScript的保留字，转为JavaScript属性时，必须改名。主要有以下两个。

for属性改为htmlFor
class属性改为className

另外，HTML属性值一般都是字符串，但是JavaScript属性会自动转换类型。比如字符串true转为布尔值，将onClick的值转换为一个函数，将style属性的值转换为一个CSSStyleDeclaration对象。

属性操作的标准方法

概述

getAttribute()
setAttribute()
hasAttribute()
removeAttribute()

其中，前两个读写属性的方法，与前一部分HTML标签对象的属性读写，有三点差异。

适用性

getAttribute()和setAttribute对所有属性都适用（包括用户自定义属性）；HTML标签对象的属性，只适用于标准属性。

返回值

getAttribute()只返回字符串，不会返回其他类型的值。HTML标签对象的属性会返回各种类型的值，包括字符串、数值、布尔值或者对象。

属性名

这些方法只接受属性的标准名称，不用改保留字，比如for和class都可以直接使用，另外这些方法对于属性名是大小写不敏感的。

var image = document.images[0];
image.setAttribute('class','myImage');

上面代码中，setAttribute方法直接使用class作为属性名称，不用写成className。

Element.getAttribute()

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。

<div id="div1" align="left"></div>
var div = document.getElementById('div1');
div.getAttribute('align');

Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果属性名称已经存在，相当于编辑已存在的属性。

var d1 = document.getElementById('d1');
d.setAttribute('align','center');

下面对img元素的src属性赋值的例子。

var myImage = document.querySelector('img');
myImage.setAttribute('src','path/to/example.png');

Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。

var d = document.getElementById('div1');
if(d.hasAttribute('align')){
    d.setAttribute('align','center');
}

上面代码检查div节点是否含有align属性，如果有，则设置为“居中对齐”。

Element.removeAttribute()

Element.removeAttribute方法用于从当前元素节点移除属性。

<div id="div1" align="left" width="200px"></div>
document.getElementById('div1').removeAttribute('align');
<div id="div1" width="200px">

dataset属性

有时，需要在HTML元素上附件数据，供JavaScript脚本使用。一种方法是自定义属性。

<div id="mydiv" foo="bar">

上面代码为div元素定义了foo属性，然后用getAttribute()和setAttribute()读写这个属性。

var n = document.getElementById('myDiv');
n.getAttribute('foo');
n.setAttribute('foo','baz');

这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码不通过校验。更好的解决办法是，使用标准提供的data-*属性。

var n = document,getElementById('myDiv');
n.dataset.foo; // bar
n.dataset.foo = 'baz';

上面代码中，通过dataset.foo读写data-foo属性。

删除一个data-*属性，可以直接使用delete命令。

delete document.getElementById('myDiv').dataset.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的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，data.helloworld会转成data-hello-world。