HTML5中的数据集dataset和自定义属性data-*

　　在html5中可为所有元素添加一种自定义的属性，这种属性的前缀以data-开头，比如：data-name,目的是为元素提供与页面渲染无关，但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。

dataset与getAttribute/setAttribute的对比

　　在此之前的访问属性的方式我们用getAttribute/setAttribute

html 结构：

<div id='div' name='divName'>我是div</div>

javascript结构：

var div = document.getElementById('div');

console.log(div.getAttribute('name')); // divName

div.setAttribute('gender','male');

console.log(div.getAttribute('gender')); // male

　　现在我们来使用html5中的自定义属性 data-*

html 结构：

<p data-name='pName' data-nick-name='dear pName' data-gender='female' myname='数据集访问不到'>我是p</p>

javascript结构：

var p = document.querySelector('p');

console.log(p.dataset.name); // pName

console.log(p.dataset.nickName); // dear Name

console.log(p.dataset.gender); // female

console.log(p.dataset); // DOMStringMap {name: "pName", nickName: "dear pName", gender: "female"}

console.log(p.myname); // undefined

总结

　　从上面的代码我们可以知道，dataset属性值是DOMStringMap的一个实例，也就是一个键值对的映射，其实自定义属性很早就已经开始使用了，像京东，淘宝这些电商网站，审查他们的页面，可以看到很多。如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或者混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪个部分。

问答题：`data-`属性的作用是什么？

　　`data-`为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 `dataset` 属性获取，不支持该属性的浏览器可以通过`getAttribute` 方法获取

　　需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

参考： HTML5中的数据集dataset和自定义属性data-*

巴特西

HTML5中的数据集dataset和自定义属性data-*

dataset与getAttribute/setAttribute的对比

总结

最新文章

热门文章