前言：由于“无处安放”而引发的混乱
在 HTML5 普及之前，前端开发者为了在 DOM 元素上绑定一些数据（比如用户 ID、商品价格、状态码），可谓是八仙过海，各显神通：
直到 HTML5 引入了 data-* 自定义数据属性，这一切终于有了“官方标准”。
第一阶段：基础——它长什么样？
data-* 属性允许我们在标准 HTML 元素中存储额外的页面私有信息。
1. HTML 写法
语法非常简单：必须以 data- 开头，后面接上你自定义的名称。
<!-- ❌ 错误示范：不要大写，不要乱用特殊符号 -->
<div data-User-Id="1001"></div>
<!-- ✅ 正确示范：全小写，连字符连接 -->
<div
id="user-card"
data-id="1001"
data-user-name="juejin_expert"
data-value="99.9"
data-is-vip="true"
>
用户信息卡片
</div>
2. CSS 中的妙用
很多人以为 data-* 只是给 JS 用的，其实 CSS 也能完美利用它。
场景一：通过属性选择器控制样式
/* 当 data-is-vip 为 "true" 时，背景变金 */
div[data-is-vip="true"] {
background: gold;
border: 2px solid orange;
}
场景二：利用 attr() 显示数据这是一个非常酷的技巧，可以用来做 Tooltip 或者计数器显示。
div::after {
/* 直接把 data-value 的值显示在页面上 */
content: "当前分值: " attr(data-value);
color: #666;
}
第二阶段：进阶——JavaScript 如何读写？
这才是重头戏。在 JS 中操作 data-* 有两种方式：传统派 和 现代派。
1. 传统派：getAttribute / setAttribute
这是最稳妥的方法，兼容性最好（虽然现在也没人要兼容 IE6 了）
代码高亮：
const el = document.getElementById('user-card');
// 读取
const userId = el.getAttribute('data-id'); // "1001"
// 修改
el.setAttribute('data-value', '100');
特点：读出来永远是字符串。哪怕你存的是 100，取出来也是 "100"。
2. 现代派：dataset API (推荐 ✨)
HTML5 为每个元素提供了一个 dataset 对象（DOMStringMap），它将所有的 data-* 属性映射成了对象的属性。
这里有个大坑（或者说是规范），请务必注意：
HTML 中的 连字符命名 (kebab-case) 会自动转换为 JS 中的 小驼峰命名 (camelCase) 。
const el = document.getElementById('user-card');
// 1. 访问 data-id
console.log(el.dataset.id); // "1001"
// 2. 访问 data-user-name (注意变身了！)
console.log(el.dataset.userName); // "juejin_expert"
// ❌ el.dataset.user-name 是语法错误
// ❌ el.dataset['user-name'] 是 undefined
// 3. 修改数据
el.dataset.value = "200";
// HTML 会自动变成 data-value="200"
// 4. 删除数据
delete el.dataset.isVip;
// HTML 中的 data-is-vip 属性会被移除
敲黑板：dataset 里的属性名不支持大写字母。如果你在 HTML 里写 data-MyValue="1", 浏览器会强制转为小写 data-myvalue，JS 里就得用 dataset.myvalue 访问。所以，HTML 里老老实实全小写吧。
第三阶段：深入——类型陷阱与性能权衡
1. 一切皆字符串
不管你赋给 dataset 什么类型的值，最终都会被转为字符串。
el.dataset.count = 100; // HTML: data-count="100"
el.dataset.active = true; // HTML: data-active="true"
el.dataset.config = {a: 1}; // HTML: data-config="[object Object]" -> 灾难！
避坑指南：
- 如果你要存数字，取出来时记得 Number(el.dataset.count)。
2. 性能考量
- 读写速度：dataset 的访问速度在现代浏览器中非常快，但在极高频操作下（比如每秒几千次），直接操作 JS 变量肯定比操作 DOM 快。
- 重排与重绘：修改 data-* 属性会触发 DOM 变更。如果你的 CSS 依赖属性选择器（如 div[data-status="active"]），修改属性可能会触发页面的重排（Reflow）或重绘（Repaint）。
第四阶段：实战——优雅的事件委托
data-value 最经典的用法之一就是在列表项的事件委托中。
需求：点击列表中的“删除”按钮，删除对应项。
<ul id="todo-list">
<li>
<span>学习 HTML5</span>
<!-- 把 ID 藏在这里 -->
<button class="btn-delete" data-id="101" data-action="delete">删除</button>
</li>
<li>
<span>写掘金文章</span>
<button class="btn-delete" data-id="102" data-action="delete">删除</button>
</li>
</ul>
代码高亮：
const list = document.getElementById('todo-list');
list.addEventListener('click', (e) => {
// 利用 dataset 判断点击的是不是删除按钮
const { action, id } = e.target.dataset;
if (action === 'delete') {
console.log(`准备删除 ID 为 ${id} 的条目`);
// 这里发送请求或操作 DOM
// deleteItem(id);
}
});
为什么这么做优雅？
你不需要给每个按钮都绑定事件，也不需要去分析 DOM 结构（比如 e.target.parentNode...）来找数据。数据就在元素身上，唾手可得。
总结与“禁忌”
HTML5 的 data-* 属性是连接 DOM 和数据的一座轻量级桥梁。
什么时候用？
- 当 CSS 需要根据数据状态改变样式时。
- 做事件委托需要传递参数时。
什么时候别用？（禁忌）
不要存储敏感数据：用户可以直接在浏览器控制台修改 DOM，千万别把 data-password 或 data-user-token 放在这。
不要当数据库用：别把几 KB 的 JSON 数据塞进去，那是 JS 变量或者是 IndexDB 该干的事。
SEO 无用：搜索引擎爬虫通常不关心 data-* 里的内容，重要的文本内容还是要写在标签里。
参考文章：原文链接
400 186 1886
