<p>dataset 不能动态添加新字段，必须用 setAttribute；因为 dataset 只是已有 data-* 属性的只读映射视图，不触发 DOM 属性写入，仅支持读取和已存在字段的修改。</p>
dataset 不能动态添加新字段，必须用 setAttribute。
为什么 dataset.userId = "123" 不生成 data-user-id 属性
因为 dataset 只是已有 data-* 属性的只读映射视图，不是 DOM 操作接口。给一个尚未存在的键赋值（如 dataset.newProp = "val"），浏览器不会自动创建对应 HTML 属性，getAttribute("data-new-prop") 会返回 null。
- 只有 HTML 中已写死的
data-属性，或之前用setAttribute设置过的，才会出现在dataset中 -
dataset的作用是「读取方便 + 自动驼峰转换」，不是「声明式创建」 - IE11 及更早版本不支持
dataset，但setAttribute全兼容
正确添加新 data 字段：只能用 setAttribute
动态添加新字段唯一可靠方式是 setAttribute，它直接写入 DOM 属性树，且立即生效。
- 属性名必须是 kebab-case 格式：
el.setAttribute("data-user-id", "789")→ 后续可读el.dataset.userId - 避免数字开头：
data-123-id非法，data-id123合法 - 值始终为字符串 —— 即使传数字
42，DOM 中存的是"42"，JS 里仍需parseInt(el.dataset.count) - 不要混用：
setAttribute("data-loading", "true")后，再改el.dataset.loading = "false"不会同步到 DOM，得再次setAttribute
常见错误：误以为 dataset 支持新增，结果 DOM 无反应
典型失败现场：
立即学习“前端免费学习笔记（深入）”；
const btn = document.querySelector("button");
btn.dataset.apiVersion = "v2"; // ✅ 无报错，但 DOM 上看不到 data-api-version
console.log(btn.getAttribute("data-api-version")); // ❌ null
真正起效的写法：
btn.setAttribute("data-api-version", "v2"); // ✅ DOM 立即出现 data-api-version="v2"
console.log(btn.dataset.apiVersion); // ✅ 输出 "v2"
- 首次设置必须走
setAttribute；之后才能用dataset读/写（仅限已存在字段） - 删除字段也别用
delete dataset.xxx，应调用removeAttribute("data-xxx") - 若需批量设置多个
data-字段，建议封装函数统一走setAttribute，避免逻辑分裂
最易被忽略的一点：dataset 映射依赖 DOM 属性真实存在，而这个“存在”只能由 setAttribute 或初始 HTML 触发；把它当成响应式代理，一定会在调试时卡住很久。
