HTMLElement.dataset
1、html5自定义属性及基础
html5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相应的id：
<button type="button" data-id="2312">测试</button>
这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用css属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。
下面是元素应用data属性的一个例子：
<html> <head></head> <body> <div id="testdiv1" data-name="张三" data-age="1" data-to-do="吃饭">$18.3</div> <script> //要想获取某个属性的值,可以像下面这样使用dataset对象 var expenseday=document.getElementById('testdiv1'); var name=expenseday.dataset.name; console.log(name);//张三 console.log(expenseday.dataset.age);//1 console.log(expenseday.dataset.toDo);//吃饭 </script> </body> </html>
运行结果：
data属性基本上所有的浏览器都是支持的，但是dataset对象支持的就比较特殊了，目前仅在Opera 11.1+、Chrome 9+下可以通过javascript使用dataset访问你自定义的data属性。
需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如上面的例子中现有如下data属性：data-to-do，则我们要获取相应的值可
以使用：expenseday.dataset.toDo
2.、为何要使用dataset
如果使用传统的方法获取属性值应该会类似下面：
var typeOfDrink = document.getElementById('testdiv1').getAttribute('data-name');
现在如果我们要获得多个自定义的属性值就要用下面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('testdiv1').dataset;
dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象。DOMStringMap是HTML5一种新的含有多个名-值对的交互变量。
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操作是上选。
