javascript教程系列43: DOM对象的dataset属性方式

Posted 2020-11-03 前端工程师·邢晋宇

1 DOM设置属性的特殊方式:

DOM对象的dataset属性方式获取data-xxx方式定义的属性

由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性

2 使用DOM对象的dataset属性,操作自定义属性时要注意的三点问题:

1 在标签上定义属性时,要以data-为前缀

2 在js中获取/设置通过data-定义的属性的值时,要通过dataset来获取/设置

//html
<div id="box" data-index="0" i="0"></div>

//js
var box = document.getElementById(‘box‘);
console.log(box.dataset) //返回一个对象,里面包含了所有当前标签上用data-定义的属性
console.log(box.dataset.index) //返回data-index 的值