HTML5中的data-*自定义属性
HTML5中的data-*自定义属性是一种特殊的自定义属性，它们可以用来存储和操作数据。在HTML5规范中，引入了data-*自定义属性，以提供与渲染无关的信息。这类属性的命名需要添加前缀data-，以区别于标准的HTML属性。
关于HTML元素的特性
--------------------
HTML元素都存在一些标准的特性，例如：
* id：元素在文档中的唯一标识符
* title：有关元素的附加说明信息，一般通过工具提示条显示出来
* lang：元素内容的语言代码，很少使用
* dir：语言的方向，很少使用
* className：与元素的class特性对应，考虑到与ECMAScript的保留字class的冲突，因此命名为className
操作特性的方法
----------------
可以使用以下方法来操作HTML元素的特性：
* getAttribute()：获取相关特性，也可以获取到自定义的特性，区别于使用DOM元素的属性获取
* setAttribute()：设置相关特性
* removeAttribute()：删除相关特性
获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别
--------------------------------------------------------------------------------
例如：
```javascript
var header = document.getElementById('header');
console.log(header.id); // header
console.log(header.getAttribute('id')); // header
console.log(header.title); // test
console.log(header.getAttribute('title')); // test
console.log(header.myTitle); // undefined
console.log(header.getAttribute('myTitle')); // monster1935
```
可以发现，getAttribute()既可以访问标准特性也可以访问自定义特性，而使用DOM元素本身属性访问html元素特性的时候只能访问标准特性。
Html5中的自定义属性
--------------------
Html5规范中规定自定义属性需要添加前缀data-，目的是提供与渲染无关的信息。
使用getAttribute()方法以及setAttribute()方法操作自定义属性
-------------------------------------------------------------
例如：
```javascript
var user = document.getElementById('user');
// 获取相关属性值
var name = user.getAttribute('data-name');
console.log(name); // monster1935
var age = user.getAttribute('data-age');
console.log(age); // 123
// 设置相关属性值
user.setAttribute('data-sex', 'male');
console.log(user.getAttribute('data-sex')); // male
```
使用dataset操作自定义属性
-----------------------------
例如：
```javascript
var el = document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); // 返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home = "shandong";
console.log(el.dataset);
// 删除相关属性
delete el.dataset.name;
console.log(el.dataset);
```
HTML5中的data-*自定义属性是一种非常有用的特性，可以用来存储和操作数据。在使用时需要注意区别于标准的HTML属性，并且需要添加前缀data-。同时，需要注意使用getAttribute()方法和dataset操作自定义属性的差异。
