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"
```
下面代码可以遍历一个元素节点的所有属性。
```javascript
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 元素的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
```javascript
var a = document.getElementById('test');
a.id // "test"
a.href // "http://www.example.com/"
```
上面代码中，`a`元素标签的属性`id`和`href`，自动成为节点对象的属性。
这些属性都是可写的。
```javascript
var img = document.getElementById('myImage');
img.src = 'http://www.example.com/image.jpg';
```
上面的写法，会立刻替换掉`img`对象的`src`属性，即会显示另外一张图片。
这种修改属性的方法，常常用于添加表单的属性。
```javascript
var f = document.forms[0];
f.action = 'submit.php';
f.method = 'POST';
```
上面代码为表单添加提交网址和提交方法。
注意，这种用法虽然可以读写属性，但是无法删除属性，`delete`运算符在这里不会生效。
HTML 元素的属性名是大小写不敏感的，但是 JavaScript 对象的属性名是大小写敏感的。转换规则是，转为 JavaScript 属性名时，一律采用小写。如果属性名包括多个单词，则采用骆驼拼写法，即从第二个单词开始，每个单词的首字母采用大写，比如`onClick`。
有些 HTML 属性名是 JavaScript 的保留字，转为 JavaScript 属性时，必须改名。主要是以下两个。
- `for`属性改为`htmlFor`
- `class`属性改为`className`
另外，HTML 属性值一般都是字符串，但是 JavaScript 属性会自动转换类型。比如，将字符串`true`转为布尔值，将`onClick`的值转为一个函数，将`style`属性的值转为一个`CSSStyleDeclaration`对象。因此，可以对这些属性赋予各种类型的值。
## 属性操作的标准方法
### 概述
元素节点提供六个方法，用来操作属性。
- `getAttribute()`
- `getAttributeNames()`
- `setAttribute()`
- `hasAttribute()`
- `hasAttributes()`
- `removeAttribute()`
这有几点注意。
（1）适用性
这六个方法对所有属性（包括用户自定义的属性）都适用。
（2）返回值
`getAttribute()`只返回字符串，不会返回其他类型的值。
（3）属性名
这些方法只接受属性的标准名称，不用改写保留字，比如`for`和`class`都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。
```javascript
var image = document.images[0];
image.setAttribute('class', 'myImage');
```
上面代码中，`setAttribute`方法直接使用`class`作为属性名，不用写成`className`。
### Element.getAttribute()
`Element.getAttribute`方法返回当前元素节点的指定属性。如果指定属性不存在，则返回`null`。
```javascript
// HTML 代码为
//
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
```
### Element.getAttributeNames()
`Element.getAttributeNames()`返回一个数组，成员是当前元素的所有属性的名字。如果当前元素没有任何属性，则返回一个空数组。使用`Element.attributes`属性，也可以拿到同样的结果，唯一的区别是它返回的是类似数组的对象。
```javascript
var mydiv = document.getElementById('mydiv');
mydiv.getAttributeNames().forEach(function (key) {
var value = mydiv.getAttribute(key);
console.log(key, value);
})
```
上面代码用于遍历某个节点的所有属性。
### Element.setAttribute()
`Element.setAttribute`方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。
```javascript
// HTML 代码为
//
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);
```
上面代码中，`button`元素的`name`属性被设成`myButton`，`disabled`属性被设成`true`。
这里有两个地方需要注意，首先，属性值总是字符串，其他类型的值会自动转成字符串，比如布尔值`true`就会变成字符串`true`；其次，上例的`disable`属性是一个布尔属性，对于`