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

dataset属性

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

 id="mydiv" foo="bar">

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

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

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

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

 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-后面的属性名有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且,属性名不应该使用AZ的大写字母,比如不能有data-helloWorld这样的属性名,而要写成data-hello-world

转成dataset的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset的键名转成属性名时,所有大写字母都会被转成连词线+该字母的小写形式,其他字符不变。比如,dataset.helloWorld会转成data-hello-world

你可能感兴趣的