data-* 属性让你在任何 HTML 元素上存储自定义的私有数据。它们是在 DOM 上附加元数据的标准方式，JavaScript 可以读取它，而无需滥用非标准属性或类。
html
<button
data-id="42"
data-user-role="admin"
data-is-active="true"
>Edit</button>
const btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
两个关键规则：data-user-role 通过 dataset.userRole 访问（短划线转换为 camelCase），而且每个值都是字符串——根据需要进行转换（Number(btn.dataset.id)、btn.dataset.isActive === "true"）。
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
在每个元素上存储 id 意味着父级上的一个监听器可以处理所有项目。
data-* 是将服务器数据传入 DOM 供客户端 JS 使用的干净、符合标准的方式（无需额外的 API 调用），用于连接事件委托和驱动 CSS 状态——而无需创建会使 HTML 无效的非标准属性。
不要在其中存储大型或敏感数据；它在标记中是可见的。