HTML5 data-属性在JS中通过dataset读取时自动转为小驼峰命名，如data-user-id→userId；dataset是只读DOMStringMap，需用setAttribute动态写入，值均为字符串且需手动类型转换。
dataset 里键名会自动转成小驼峰，别直接用中划线原名
HTML5 的 data- 属性在 JS 中通过 element.dataset 读取时，浏览器会自动把连字符（-）去掉，并把后续字母大写——比如 data-user-id 变成 userId，data-api-url 变成 apiUrl。这不是可选行为，是规范强制的。
常见错误：写 elem.dataset['user-id'] 或 elem.dataset.user-id（后者语法错误），结果返回 undefined。
- 查键名前先看控制台打印
elem.dataset，确认实际属性名 - 动态拼接访问时，用方括号 + 小驼峰字符串：
elem.dataset[camelCaseKey] - 如果原始 HTML 是
data-foo-bar-baz，JS 里只能用fooBarBaz，没有例外
遍历所有自定义 data 属性不能只靠 for...in 或 Object.keys()
element.dataset 是 DOMStringMap 对象，不是普通对象，它不继承自 Object.prototype，所以 for...in、Object.keys()、Object.entries() 都拿不到它的键值对——这些方法会返回空数组或什么也不遍历。
正确做法是把它转成真正的对象再操作，或者用更底层的方式。
立即学习“前端免费学习笔记（深入）”；
- 兼容性最稳的方法：
Array.from(elem.attributes).filter(attr => attr.name.startsWith('data-'))，然后手动提取 name/value - 现代写法（Chrome 84+ / Firefox 68+）：
Object.fromEntries(Array.from(elem.dataset, ([k, v]) => [k, v]))，但注意这行本身不兼容旧版 Safari - 别写
for (let k in elem.dataset)—— 它可能遍历到原型方法，也可能啥也不返回
批量读取时要注意 null/undefined 和类型丢失问题
dataset 所有值都是字符串，哪怕你在 HTML 里写的是 data-count="123" 或 data-active="true"，JS 里拿到的仍是 "123" 和 "true"，不会自动转数字或布尔。
更隐蔽的问题是：如果属性存在但没赋值（如 <div data-flag></div>），它的值是空字符串 ""，不是 null 或 undefined；而如果属性根本不存在，访问 dataset.xxx 才是 undefined。
- 判断是否存在用
'xxx' in elem.dataset，而不是elem.dataset.xxx != null - 需要数值时显式转换：
Number(elem.dataset.count)或+elem.dataset.count - 布尔语义建议统一约定：
elem.dataset.flag === 'true'，避免用!!elem.dataset.flag（空字符串也是 false）
dataset 不支持动态新增，想批量写入得用 setAttribute
elem.dataset 是只读映射，你给它赋值（如 elem.dataset.newKey = 'val'）不会生效，也不会报错，只是静默失败。
要动态添加或修改 data- 属性，必须走 DOM API：
- 单个设置：
elem.setAttribute('data-new-key', 'val') - 批量写入：用
Object.entries(dataObj).forEach(([k, v]) => elem.setAttribute(`data-${k}`, v))，注意 key 要转成 kebab-case - 删除用
elem.removeAttribute('data-xxx')，别试delete elem.dataset.xxx（无效）
dataset 的设计定位就是“读取快照”，不是数据容器。真要维护状态，该用 Map 或组件 state 就用，别硬塞进 dataset。
