首页 > 代码库 > 关于dataset

关于dataset

举个栗子:

 <div id="cost" data-drink="coffee"  data-food="sushi" data-meal="lunch">¥20.12</div>

现在我们想要获取这个div,那么:

 var cost = document.getElementById(‘cost‘);

接下来我们想要获取属性data-drink的值,我们通常会这样去做:

var typeOfDrink = cost.getAttribute("data-drink");

那么通过dataset,我们可以这样获取data-drink的值:

var typeOfDrink = cost.dataset.drink;

所以既然我们可以通过getAttribute获得属性,那么dataset存在的意义是什么呢?

假如我们想获取div所有的data属性,那么我们通过attribute方法需要通过循环遍历。

所有dataset的意义来了,它一句话就可以获取所有属性:

var expense = document.getElementById(‘cost‘).dataset;

每次你使用自定义data属性的时候,使用dataset去获取名-值对就是个不错的选择。

当然这个要考虑兼容性,具体问题具体分析,欢迎指正。

关于dataset