dataset是浏览器缓存式映射，非实时DOM镜像；赋值只更新内存映射，不触发HTML变更，需setAttribute才真正修改HTML。
直接说结论：dataset 是浏览器提供的缓存式映射，不是实时 DOM 属性镜像；读取方便，但写入不触发 DOM 更新，setAttribute 才是真正改 HTML 的方式。
为什么 element.dataset.xxx = "val" 改了却看不到 HTML 变化
dataset 是 DOMStringMap 对象，本质是浏览器对当前元素所有 data-* 属性的一次性快照+驼峰转换缓存。赋值操作只更新这个内存映射，不调用底层 setAttribute。
常见错误现象：
- 执行
el.dataset.id = "100"后，el.getAttribute("data-id")仍返回旧值或null - DevTools 中 Elements 面板里看不到
data-id属性被写入 - 后续用 jQuery
$(el).data("id")读到的还是旧值（jQuery 自己也维护一份缓存）
正确做法始终是：
立即学习“前端免费学习笔记（深入）”；
- 写入 → 用
el.setAttribute("data-id", "100") - 读取 → 优先用
el.dataset.id（语义清晰、自动转驼峰） - 验证是否存在 → 先
"id" in el.dataset，再取值，避免undefined报错
data-user-id 在 JS 里到底该写成 dataset.userId 还是 dataset["user-id"]
必须用驼峰：HTML 中 data-user-id="42" → JS 中只能通过 el.dataset.userId 访问。
el.dataset["user-id"] 语法错误（属性名含连字符，不能作为对象键直接点取）；el.dataset.user-id 是非法表达式（减法运算）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
- 命名含大写字母（如
data-UserID）→dataset.userid或dataset.UserID都无效，浏览器忽略该属性 - 含下划线（
data_user_id）→dataset.userId不匹配，必须用getAttribute("data_user_id") - 动态插入的元素（如
innerHTML += '<div data-flag="true">'）→ <code>dataset.flag初始为undefined，需手动setAttribute才能生效事件委托中拿不到
dataset值？别直接读event.target点击按钮里的图标，
event.target往往是<svg>或<span>，它本身没挂data-action，所以event.target.dataset.action必然undefined。正确路径是向上找最近的带目标属性的祖先：
- 用
event.target.closest("[data-action]")获取容器元素 - 再读
container.dataset.action或container.getAttribute("data-action") - 高频场景（如表格行 hover）别在回调里反复调
closest，提前把事件绑定到 tbody 上，或缓存父级引用
性能提示：频繁读写
dataset会触发样式重计算，循环中建议先批量读到局部变量，再处理。存 JSON、数字、布尔值时最常翻车的三件事
dataset所有值都是字符串，没有类型推断，也没有自动解析。典型翻车点：
- 数字：
td.dataset.price是"99.9"，参与计算前必须显式转：Number(td.dataset.price)或+td.dataset.price - 布尔：
data-active="false"→td.dataset.active === "false"，但if (td.dataset.active)为真（非空字符串），应写td.dataset.active === "true" - 对象：
data-config='{"theme":"dark"}'→JSON.parse(td.dataset.config)，且必须包try/catch，否则静默失败
真正容易被忽略的是：哪怕你写了
data-info='{"a":1}'，dataset.info拿到的永远是字符串，没人帮你JSON.parse，控制台也不会报错——逻辑就卡在undefined上，查半天才发现漏了 parse。 - 用
