dataset 是元素的只读属性，返回 DOMStringMap 对象，自动将 data-* 属性转为驼峰命名（如 data-user-id → userId）并映射为可读写属性，赋值始终转为字符串，删除用 delete，动态 key 建议用 setAttribute。
HTML 的 dataset 属性是操作 data-* 自定义属性最直接、最规范的方式，它把所有以 data- 开头的属性自动映射为 JavaScript 对象的可读写属性。
dataset 是什么？它怎么来的？
dataset 是元素的只读属性，返回一个 DOMStringMap 对象。浏览器会自动将元素上所有 data-xxx 属性（如 data-user-id、data-is-active）转成驼峰命名形式（userId、isActive），并挂载到这个对象上。
注意：带连字符的属性名会被转换为驼峰式，且不区分大小写；但 JS 中只能用驼峰名访问，不能用短横线形式。
如何读取自定义 data 属性
只需通过元素的 dataset 对象按驼峰名访问即可：
立即学习“前端免费学习笔记（深入）”；
<div id="box" data-user-id="123" data-page-url="/home" data-is-pinned="true"></div>const el = document.getElementById('box');console.log(el.dataset.userId); // "123"console.log(el.dataset.pageUrl); // "/home"console.log(el.dataset.isPinned); // "true"（始终是字符串）
如何写入或修改 data 属性
对 dataset 属性赋值，会自动同步更新对应 HTML 的 data-* 属性：
-
el.dataset.userId = "456";→ HTML 变为data-user-id="456" -
el.dataset.isLoading = "false";→ 新增data-is-loading="false" -
el.dataset.newKey = "abc";→ 新增data-new-key="abc" - 删除某个 data 属性：用
delete el.dataset.userId（会从 DOM 中移除该属性）
⚠️ 注意：赋值总是转为字符串；布尔值、数字、null 等都会被 .toString() 处理。
常见陷阱与建议
不要混用短横线写法：JS 中 el.dataset["user-id"] 或 el.dataset.user-id 都无效，必须用驼峰名。
避免覆盖原生属性名：比如 data-class 会变成 dataset.class，但 class 是保留字，此时应改用 dataset["class"] 访问（推荐统一用驼峰避免冲突）。
批量操作建议用 setAttribute / getAttribute：如果要动态拼接 key 名（如 data-${key}），dataset 不支持方括号动态访问（el.dataset[key] 在部分旧版浏览器中不可靠），此时应改用 el.setAttribute('data-' + key, value)。
