dataset最安全语义化但仅映射HTML中已声明的data-*属性，命名自动转驼峰；动态添加需用setAttribute，否则jQuery.data()等可能失效；键名必须用点语法如dataset.userId，不可用连字符或方括号驼峰字符串。
直接用 dataset 最安全、最语义化，但必须注意：它只映射已声明的 data-* 属性，且命名自动转驼峰；若属性是纯 JS 动态添加（没写在 HTML 里），dataset 可能读不到——这时候得用 setAttribute。
data-* 属性没写在 HTML 里，用 dataset 赋值会失效
比如 HTML 是 <div id="box"></div>，你执行 box.dataset.userId = "123"，虽然属性确实被加上了（box.getAttribute("data-user-id") 能取到），但 jQuery 的 .data("userId") 或某些框架内部逻辑可能拿不到这个值，因为 .data() 只读初始 HTML 中声明过的 data-*，后续用 dataset 添加的不触发缓存更新。
- ✅ 正确做法：HTML 中先声明，哪怕值为空 ——
<div id="box" data-user-id=""></div> - ✅ 或统一用
setAttribute("data-user-id", "123")，它对“有无初始声明”不敏感 - ⚠️ 避免混用：
dataset.userId = "123"和$(box).data("userId", "456")会导致两个值并存、互不同步
dataset 的键名自动转驼峰，别手写连字符
dataset 把 data-user-id 自动变成 userId，把 data-api-url 变成 apiUrl。如果你写成 box.dataset["user-id"] 或 box.dataset.user-id（带连字符或减号），JS 会报错或静默失败。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确读写：
box.dataset.userId、box.dataset.apiUrl - ✅ 删除属性：
delete box.dataset.userId（不是box.dataset.delete("userId")） - ❌ 错误写法：
box.dataset["user-id"]、box.dataset.user-id、box.dataset["userId"]（方括号里不能用驼峰字符串当 key，必须用点语法）
需要兼容旧浏览器或操作非 data- 自定义属性时，用 setAttribute
dataset 只管 data-*，而 setAttribute 是通用接口，能设任何属性，包括 data-、x-、甚至自造的 my-prop。IE11 及更老版本不支持 dataset，这时只能靠 setAttribute + getAttribute。
立即学习“前端免费学习笔记（深入）”；
- ✅ 设值：
box.setAttribute("data-user-id", "789")、box.setAttribute("x-status", "pending") - ✅ 读值：
box.getAttribute("data-user-id")（注意不是box.dataset.userId） - ✅ 移除：
box.removeAttribute("data-user-id") - ⚠️ 注意：
setAttribute("class", "active")有效，但推荐用classList更精准
真正容易翻车的地方不在语法，而在「初始 HTML 是否声明了该 data- 属性」——这个前提决定了你是走 dataset 还是 setAttribute 路线，也决定了 jQuery .data() 能不能跟上。别假设“写了就一定生效”，先 inspect 元素看 attribute 真实存在与否。
