关于dataset

Posted 2020-09-16 winteronlyme

举个栗子：

 <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去获取名-值对就是个不错的选择。

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