引言
回想一下，早些年为了在HTML元素上存点自己的数据，是不是用过各种奇怪的“野路子”？比如塞进class名里，或者定义一些非标准的属性？现在，这事儿有标准答案了——HTML5带来的自定义数据属性（data-*）。它相当于给每个HTML元素配备了一个专属的“小背包”，让你能以一种优雅、标准化的方式，把额外信息稳稳当当地存进去，完全无需借助DOM对象上的额外属性。
基本概念
用法特别直观：所有自定义数据属性都以 data- 这个固定前缀开头，后面跟上你自己定义的属性名就行了。比如说：
John Doe
瞧，这个
元素就一口气背上了三个自定义数据包：data-id、data-user 和 data-date-of-birth。清晰明了，一看就知道是干什么的。
使用自定义数据属性
1. 在 HTML 中定义
这可能是最简单的一步——随心所欲地往任何HTML元素上“贴标签”就行：
...
2. 通过 Ja vaScript 访问
想取出“背包”里的东西？HTML5提供了非常方便的 dataset 属性：
const article = document.querySelector('#electriccars');
console.log(article.dataset.columns); // "3"
console.log(article.dataset.indexNumber); // "12314"
console.log(article.dataset.parent); // "cars"
这里有个贴心的小细节：Ja vaScript会自动把HTML中kebab-case（短横线连接）的属性名，转换成camelCase（驼峰式）来访问，比如 data-index-number 变成了 dataset.indexNumber。
3. 通过 Ja vaScript 修改
当然，存进去的数据也不是一成不变的，通过 dataset 修改起来同样顺手：
article.dataset.columns = 5;
就这么一句，data-columns 的值就从“3”变成了“5”。
4. 在 CSS 中使用
它甚至还能跟CSS联动。通过属性选择器，我们可以根据自定义数据的值来应用不同的样式：
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
这样一来，样式和数据的绑定就更紧密、更语义化了。
高级用法
1. 存储 JSON 数据
当单个值不够用，需要存个复杂对象时怎么办？直接存JSON字符串就好了：
在Ja vaScript里解析一下就能用：
const userData = document.getElementById('user-data');
const user = JSON.parse(userData.dataset.user);
console.log(user.name); // "John"
2. 事件委托
这是自定义数据属性大显身手的场景之一，尤其在处理列表项时尤为高效：
- Alice
- Bob
- Charlie
document.getElementById('user-list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('Clicked on user:', e.target.dataset.userName);
console.log('User ID:', e.target.dataset.userId);
}
});
有了数据属性，事件处理函数里就能直接拿到业务相关的核心数据，省去了再去DOM里来回查找的麻烦。
3. 动态内容加载
它也是实现声明式UI交互的利器。比如，可以把加载行为和目标位置直接“声明”在按钮上：
document.querySelector('button').addEventListener('click', function() {
const url = this.dataset.loadUrl;
const target = this.dataset.target;
// 接下来，用 url 加载数据，并更新 target 元素的内容
});
逻辑和配置分离，代码的意图一目了然。
最佳实践
- 命名规范：起个一看就懂的名字。坚定使用 kebab-case（例如
data-user-id），别用驼峰式，这是HTML属性的通用约定。 - 避免存储敏感信息：必须警惕的是，这些属性在浏览器里一览无余，可千万别把密码、密钥之类的敏感信息往里塞。
- 保持数据简单：虽然能存JSON，但别搞得太复杂。数据结构简单点，维护和调试都会轻松很多。
- 不要过度使用：它是元素的“附属信息包”，不是全局状态管理器。只存储和该元素强相关的数据。
- 考虑性能：页面上成千上万个元素都挂满数据属性，肯定会增加HTML体积，拖慢初始加载速度。适量使用是关键。
- 保持一致性：整个项目里，类似功能的属性命名和用法最好统一，这对团队协作至关重要。
实际应用示例：交互式图表
光说不练假把式，来看一个具体的例子——用SVG和自定义数据属性做个简单的交互图表：
交互式图表
这个例子的精妙之处在于：
- 每个柱状图（
）都用 data-value和data-category把自己的数值和类别“背”在了身上。 - 一个事件监听器挂在父级
上，就能轻松管理所有柱子的点击事件，这就是事件委托的威力。 - 当用户点击某个柱子时，直接从其数据属性中取出信息更新页面，交互逻辑干净利落。
浏览器兼容性
总的来说，自定义数据属性本身在所有现代浏览器中都已得到完美支持。不过，当使用 dataset 这个API来读写时，需要留意一下：IE 10 及更老的版本不认识它。如果项目需要照顾这些“老前辈”，稳妥起见，可以回退到经典的 getAttribute 和 setAttribute 方法：
// 现代浏览器推荐写法
const value = element.dataset.myValue;
// 兼容旧浏览器的写法
const value = element.getAttribute('data-my-value');
简单一个判断，就能让体验覆盖更广的用户群体。
