Dom模型之dataset属性/Html元素标签的data-*属性

dataset属性

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

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

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

var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')

这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。

更好的解决方法是，使用标准提供的data-*属性。

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

然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作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的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，dataset.helloWorld会转成data-hello-world。