第 121 期(W3C 标准-JavaScript-DOM)：dataset

[wingmeng]

HTMLElement.dataset 属性允许访问在 HTML 或 DOM 中的元素上设置的所有自定义数据属性(data-*)。

自定义的数据属性名称以 data- 开头的，只可以包含字母（小写），数字和 dash (-), dot (.), colon (:), underscore (_) 字符。

坑点预警：

1. data-* 中的大写字母会被自动转换成小写字母；
2. HTML 中短横线连接的 data-* 属性名，在 js 中需要转换成小驼峰体。

<div id="demo"
  data-id="1"
  data-user-id="2"
  data-customUserId="3"
  data-USER="abc"
></div>

var demo = document.getElementById('demo');

console.log(demo.dataset);  // DOMStringMap
console.log(demo.dataset.id);  // 1
console.log(demo.dataset['user-id']);  // undefined
console.log(demo.dataset.userId);  // 2
console.log(demo.dataset['custom-user-id']);  // undefined
console.log(demo.dataset.customUserId);  // undefined
console.log(demo.dataset.USER);  // undefined
console.log(demo.dataset.user);  // abc