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 会报错或静默失败。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确读写：
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 真实存在与否。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
