# 属性的操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。
```html
<a id="test" href="http://www.example.com">
链接
</a>
```
上面代码中，`a`元素包括两个属性：`id`属性和`href`属性。
属性本身是一个对象（`Attr`对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（`HTMlElement`对象）来操作属性。本章介绍如何操作这些属性。
## Element.attributes 属性
元素对象有一个`attributes`属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有`attributes`属性，但返回的都是`null`，因此可以把这个属性视为元素对象独有的。
单个属性可以通过序号引用，也可以通过属性名引用。
```javascript
// HTML 代码如下
// <body bgcolor="yellow" onload="">
document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']
```
注意，上面代码的三种方法，返回的都是属性节点对象，而不是属性值。
属性节点对象有`name`和`value`属性，对应该属性的属性名和属性值，等同于`nodeName`属性和`nodeValue`属性。
```javascript
// 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"
```
下面代码可以遍历一个元素节点的所有属性。
```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 代码为
// <div id="div1" align="left">
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 代码为
// <button>Hello World</button>
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);
```
上面代码中，`button`元素的`name`属性被设成`myButton`，`disabled`属性被设成`true`。
这里有两个地方需要注意，首先，属性值总是字符串，其他类型的值会自动转成字符串，比如布尔值`true`就会变成字符串`true`；其次，上例的`disable`属性是一个布尔属性，对于`<button>`元素来说，这个属性不需要属性值，只要设置了就总是会生效，因此`setAttribute`方法里面可以将`disabled`属性设成任意值。
### Element.hasAttribute()
`Element.hasAttribute`方法返回一个布尔值，表示当前元素节点是否包含指定属性。
```javascript
var d = document.getElementById('div1');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}
```
上面代码检查`div`节点是否含有`align`属性。如果有，则设置为居中对齐。
### Element.hasAttributes()
`Element.hasAttributes`方法返回一个布尔值，表示当前元素是否有属性，如果没有任何属性，就返回`false`，否则返回`true`。
```javascript
var foo = document.getElementById('foo');
foo.hasAttributes() // true
```
### Element.removeAttribute()
`Element.removeAttribute`方法移除指定属性。该方法没有返回值。
```javascript
// HTML 代码为
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 现在的HTML代码为
// <div id="div1" width="200px">
```
## dataset 属性
有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性。
```html
<div id="mydiv" foo="bar">
```
上面代码为`div`元素自定义了`foo`属性，然后可以用`getAttribute()`和`setAttribute()`读写这个属性。
```javascript
var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')
```
这种方法虽然可以达到目的，但是会使得 HTML 元素的属性不符合标准，导致网页代码通不过校验。
更好的解决方法是，使用标准提供的`data-*`属性。
```html
<div id="mydiv" data-foo="bar">
```
然后，使用元素节点对象的`dataset`属性，它指向一个对象，可以用来操作 HTML 元素标签的`data-*`属性。
```javascript
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
```
上面代码中，通过`dataset.foo`读写`data-foo`属性。
删除一个`data-*`属性，可以直接使用`delete`命令。
```javascript
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`的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，`dataset.helloWorld`会转成`data-hello-world`。
- 前言
- 入门篇
- 导论
- 历史
- 基本语法
- 数据类型
- 概述
- null，undefined 和布尔值
- 数值
- 字符串
- 对象
- 函数
- 数组
- 运算符
- 算术运算符
- 比较运算符
- 布尔运算符
- 二进制位运算符
- 其他运算符，运算顺序
- 语法专题
- 数据类型的转换
- 错误处理机制
- 编程风格
- console 对象与控制台
- 标准库
- Object 对象
- 属性描述对象
- Array 对象
- 包装对象
- Boolean 对象
- Number 对象
- String 对象
- Math 对象
- Date 对象
- RegExp 对象
- JSON 对象
- 面向对象编程
- 实例对象与 new 命令
- this 关键字
- 对象的继承
- Object 对象的相关方法
- 严格模式
- 异步操作
- 概述
- 定时器
- Promise 对象
- DOM
- 概述
- Node 接口
- NodeList 接口，HTMLCollection 接口
- ParentNode 接口，ChildNode 接口
- Document 节点
- Element 节点
- 属性的操作
- Text 节点和 DocumentFragment 节点
- CSS 操作
- Mutation Observer API
- 事件
- EventTarget 接口
- 事件模型
- Event 对象
- 鼠标事件
- 键盘事件
- 进度事件
- 表单事件
- 触摸事件
- 拖拉事件
- 其他常见事件
- GlobalEventHandlers 接口
- 浏览器模型
- 浏览器模型概述
- window 对象
- Navigator 对象，Screen 对象
- Cookie
- XMLHttpRequest 对象
- 同源限制
- CORS 通信
- Storage 接口
- History 对象
- Location 对象，URL 对象，URLSearchParams 对象
- ArrayBuffer 对象，Blob 对象
- File 对象，FileList 对象，FileReader 对象
- 表单，FormData 对象
- IndexedDB API
- Web Worker
- 附录：网页元素接口
- a
- img
- form
- input
- button
- option
- video，audio