用JS或jQuery读写HTML元素的data-*属性

Intro

HTML5新增了data-*属性。

而在一些前端框架如Bootstrap中也可以见到data-*属性的应用：
Bootstrap 中data-* 属性的整理和总结

• jQuery: $(selector).data(name) 得到
• JS: document.getElementById(selector).dataset 返回值是DOMStringMap类型的对象。
  或$(selector)[0].dataset。(jQuery对象[0] 可以得到 DOM对象)

用jQuery读写data-*属性

• jQuery API
  data(key, value)
  data(obj)
• Code
  首先，在中引入jQuery依赖(CDN或本地依赖)：
  
  然后，在中测试代码：

  用jQuery读写data-*属性
  
  

  在浏览器中访问页面，查看控制台输出，如下：

  123
  abc
  

用JS读写data-*属性

• Code
  直接在中测试代码：

  用JS读写data-*属性
  
  

  控制台输出如下：

  张三
  李四
  

• Web API
  DOMStringMap
  DOM元素.dataset就是DOMStringMap类型，而这个对象中包含了data-*属性名(不包含data-前缀)和值的映射关系。

测试代码：

测试DOMStringMap

查看控制台输出：

也就是说，我们可以向HTML标签自定义多个data-*属性，然后，用DOM元素.dataset这个属性来获取DOMStringMap格式的对象，
这个对象包含我们自定义的data-*属性的名:值对(名自动去掉前缀data-)。