黑马程序员技术交流社区

标题: 【上海校区】进一步了解JS中的dataset方法 [打印本页]

作者: frainbowv 时间: 2018-6-14 19:46
标题: 【上海校区】进一步了解JS中的dataset方法
1、自定义属性以及基础
在html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。如进行保存当前标签的下标：

[HTML] 纯文本查看 复制代码

<a href="javascript:;" data-index="2">测试</a>

这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用css属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。下面是元素应用data属性的一个例子：

[HTML] 纯文本查看 复制代码

<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>

要想获取某个属性的值,可以像下面这样使用dataset对象：

[JavaScript] 纯文本查看 复制代码

 var expenseday=document.getElementById('day-meal-expense');

 var typeOfDrink=expenseday.dataset.drink;

 console.log(typeOfDrink);//tea

 console.log(expenseday.dataset.food);//noodle

 console.log(expenseday.dataset.meal);//lunch

如果浏览器支持dataset，则会弹出注释内容，如果浏览器不支持dataset则会报错，无法获取属性drink/food/meal的值：对象为null或未定义(如IE9版本)。
data属性基本上所有的浏览器都是支持的，但是dataset对象支持的就比较特殊了，目前仅在Opera 11.1+，Chrome 9+下可以通过javascript，使用dataset访问你自定义的data属性。至于其他浏览器，FireFox 6+(未出)以及Safari 6+(未出)会支持dataset对象，至于IE浏览器，目前看来还是遥遥无期的趋势。
需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如，上面的例子中现有如下data属性，data-meal-time，则我们要获取相应的值可以使用：expenseday.dataset.mealTime。
2、为何要使用dataset
如果使用传统的方法获取属性值应该会类似下面：

[JavaScript] 纯文本查看 复制代码

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');

现在，如果我们要获得多个自定义的属性值，就要用下面N行代码来实现了：

[JavaScript] 纯文本查看 复制代码

var attrs=expenseday.attributes, expense={},i,j;

for (i=0,j=attrs.length;i<j;i++){

  if(attrs.name.substring(0,5)=='data-'){

    expense[attrs.name.substring(5)]=attrs.value;

  }

}

而使用dataset属性，我们根本不需要任何循环去获取你想要的那个值，直接一行秒杀：

[JavaScript] 纯文本查看 复制代码
expense=document.getElementById('day-meal-expense').dataset;

dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量。
3、与getAttribute相比的速度
同样是获取属性值，使用dataset操作data要比使用getAttribute稍微慢些.。
但是，如果我们只是处理少量的data数据，这种速度上的差异造成的影响是基本上没有的。反而，我们应该看到，使用dataset操作自适应属性要比其他类似getAttribute的形式要少很多让人头疼的麻烦，并且更具有可读性。因此，权衡来看，操作自定义属性dataset操作是上选。

作者: 不二晨 时间: 2018-7-12 17:52
奈斯
作者: wuqiong 时间: 2018-7-13 11:40

作者: 不二晨 时间: 2018-7-16 11:56
奈斯
作者: 吴琼老师 时间: 2018-7-18 15:19

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2