JavaScript HTML5 dataset 属性详解：用法、兼容性与性能对比

dataset属性基础与HTML5自定义数据

DataSet是ADO.NET的核心概念，可视为内存中的独立数据库。它不依赖数据库连接，即使断开链路或关闭数据库，DataSet依然可用。其内部通过XML描述数据，利用XML平台无关、语言无关及处理复杂关系（如父子结构）的能力，DataSet能够容纳复杂数据且无需依赖数据库链路。

一、关于dataset

1. HTML5自定义属性及基础

在HTML5中，我们可以使用data-前缀设置自定义属性来存储数据。例如，若要在文字按钮上存放相应的ID：

<a href="javascript:;" data-id="2312">测试</a>

这里的data-前缀被称为data属性，既可以通过脚本定义，也可应用CSS属性选择器进行样式设置。其数量不受限制，在控制和渲染数据时提供了强大的控制能力。

下面是元素应用data属性的一个示例：

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

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

 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

使用dataset的优势与DOMStringMap对象

2. 为何要使用dataset

如果使用传统的方法获取属性值应该会类似下面：

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink'); 现在，如果我们要获得多个自定义的属性值，就要用下面N行代码来实现了：

var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}

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

expense=document.getElementById('day-meal-expense').dataset; dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量。

dataset的增删改操作与性能分析

3. dataset的操作

可以像下面这样操作名-值对：

charInput=[];
  for(var item in expenseday){
    charInput.push(expenseday[item]);
  }

上面这几千代码的作用是让所有的自定义属性塞到一个数组中。

如果你想删除一个data属性，可以这么做：

delete expenseday.dataset.meal;
  console.log(expenseday.dataset.meal)//undefined

如果你想给元素添加一个属性，可以这么做：

expenseday.dataset.dessert='icecream';
  console.log(expenseday.dataset.dessert);//icecream

4. 跟getAttribute相比的速度

使用dataset操作data要比使用getAttribute稍微慢些。

但是，如果我们只是处理少量的data数据，这种速度上的差异造成的影响是基本上没有的。反而，我们应该看到，使用dataset操作自适应属性要比其他类似getAttribute的形式要少很多让人头疼的麻烦，并且更具有可读性。因此，权衡来看，操作自定义属性，dataset操作是上选。

dataset的应用场景与兼容性处理

5. 什么地方使用dataset

每次你使用自定义data属性的时候，使用dataset去获取名-值对就是个不错的选择。考虑到现在很多浏览器还是把dataset当作不认识的外星生物看待，所以，在实际使用的时候，有必要进行一下特征检测，看看是否支持dataset，类似下面的使用：

if(expenseday.dataset){
    expenseday.dataset.dessert='icecream';
  }else{
    expenseday.setAttribute('data-dessert','icecream');
  }

注意：如果你的应用程序会频繁更新data属性，建议使用JavaScript对象进行数据管理，而不是每次都经由data属性进行更新。

二、关于字面量赋值，数组赋值

var a=1,b=2;
var c=[a,b];
console.log(c);//[1,2]
var b=3;
console.log(c);//[1,2]
var c=[a,b];
console.log(c);//[1,3]

上面赋给a,b的值都是数字，c是由a和b组成的数组，由于a,b的值就是1和2，所以var c=[a,b]就等于var c=[1,2]；之后a和b的值再怎么改变变与c=[1,2]无关了。

以上内容是关于javascript中dataset的问题小结，希望对大家学习有所帮助。