js中的dataset问题

1.H5的data问题：data-*是H5新增的属性，用于存储页面或应用程序的私有自定义数据。

 

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力，来实现一些简单的数据存储，数量不受限制，可以用动态的改变

 

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

 

data-* 属性包括两部分：

 

• 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符   (第一次使用时就在这个小写的地方栽了坑)
• 属性值可以是任意字符串
• 需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写

 

要想获得属性的值  使用dataset对象

这样就获得了ID的值；

 

为什么要使用dataset 

传统的我们使用getAttribute获取属性值，如果元素里有很多个属性的话，获取后我们还需要进行循环，但是dataset就不需要，只需要获取到元素.dataset就可以 了，dataset其实不是真正意义上的js对象，它是DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

速度 

同样是获取属性值，使用dataset操作data要比使用getAttribute稍微慢些. 

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