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