HTMLElement.dataset
我们可以给HTML元素添加以data开头的自定义属性 如 data-id
需要注意的有:
1)名称不能以xml打头
2)名称里不能全大写字母
3)但是想用大写字母需要驼峰命名
例子:
<body>
<div id="box">I love you ! and you?</div>
<script>
//dataset 属性本身可以被读取,但不能直接写入。相反,所有的写入必须是它的“属性”。
var box = document.getElementById('box')
box.id = '2' //id = '2'
//设置值
box.dataset.id = '1'//最后生成的数据是data-id = '1'
box.dataset.user = 'she'
box.dataset.age = '18'
box.dataset.comeFrom = 'earth'
//读取
console.log(box.dataset.id)
console.log(box.dataset)
//box.dataset ---一个DOMStringMap对象
//DOMStringMap {id: "1", user: "qing", age: "23"}
console.log('age' in box.dataset) // true
</script>
</body>
有setAttribute跟JQuery的$.data() 但是为什么还要使用data-*呢?
- 因为我们可以把所有自定义的属性在dataset对象中统一管理
- 遍历都是很方便的
- setAttribute设置的值却是需要一个个进行获取
- 还有HTML5里的这个原生的dataset是来替代jQuery相应的$.data()方法。因为如果仅仅只需要简单的操作data-*自定义属性,就不需要引入这些体积越来越多的jQuery工具库了