HTML5 标签自定义属性规范 dataset

当我们在HTML 中获取元素的属性值, 或者给某个元素设置属性值时通常有2种情景:

情景1:
获取和设置的都是HTML标签系统自带的属性, eg: class id 属性.

情景2:
获取和设置的是 程序员自定义的HTML 属性.eg: age sex属性

我们通常的做法:

1. HTML 自带的属性, 可以使用点语法或者 getAttribute() setAttribute() 来读取或者设置.
2. 程序员自定义的属性, 只能使用 getAttribute() 和 setAttribute() 方法来操作

H5 自定义属性规范要求

在H5之前,通常我们在对HTML元素的属性进行操作时, 都有一个选择困难症, 我们根本没有判断 某个属性究竟是系统自带属性还是程序员自己定义的属性, H5 之后我们在开发HTML网页时都有一个大家的约定, 如果是程序员自定义的属性, 属性名全部以 data- 打头.即, 比如: 我想自己定义一个名为age的属性, 那么这个属性的名字应该为: data-age , 这样, 大家以后看到属性是 data-打头的就知道这个属性是自定义属性, 需要使用 getAttribute() 和 setAttribute() 来操作.

H5 新增获取设置自定义HTML属性的方法

 


在js 中我们就可以这样做了
var  div = document.querySelector('div');


var age = div.dataset.age; // 获取 data-age 属性对应的属性值
等价于 div.getAttribure('data-age');


div.dataset.age = 30; // 给 data-age 属性值修改为 30
等价于 div.setAttribute('data-age', 30);


其实, 当我们把自定义属性以 'data-' 开头命名后, 系统会把所有的以 `data-` 打头的 自定义属性装进一个 key-value 的一个json 对象中
比如: 
{age:"18", sex:"男''}
 

自定义属性名的注意事项:

当自定义的名称中 出现中划线后,如下:
 

此后, 我们不能使用 div.list-name 来获取属性 `data-list-name` 的值, 而要使用驼峰命名来获取,如下: 
var name = div.listName ;

其实, 想要使用H5 新增的操作自定义属性的方法很简单, 当我们把 自定义属性以 data- 打头规范命名后, 只需要 `console.log(div.dataset) 即可明白.

console.log(div.dataset) ; 结果如下: 
{age: "18", sex: "男", myAge: "34", my_kid: "小样"}

注意:
dataset.属性名 这种H5新增的方式, 只有在IE11 上才能用, 有兼容性问题