getAttribute('data-xxx')是最稳的读取方式，能原样返回任意合法data属性的字符串值；dataset仅支持全小写+连字符命名，且为只读代理，修改必须用setAttribute。
getAttribute('data-xxx') 是最稳的读取方式
直接用 getAttribute('data-xxx') 读取，不依赖命名规范、不自动转驼峰、不静默失败。哪怕你写了 data-1st-load、data-apiKey 或 data_user_id，它都能原样返回字符串值。
常见错误现象：dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"——这不是 JS 写错了，是浏览器压根没把 data-userId 当成合法 data 属性解析，DOM 中根本不存在该属性，getAttribute 也会返回 null。
- 只要属性名在 HTML 中真实存在（且以
data-开头），getAttribute就能拿到原始字符串 - 它不 trim 空格、不转换大小写、不处理连字符，适合需要精确控制的场景
- 服务端渲染后若出现 JSON 字符串含未转义引号或换行，
getAttribute拿到的是原始 HTML 字符串，后续JSON.parse()前必须做容错处理
dataset.xxx 只对全小写+连字符命名有效
dataset 不是通用读取接口，它是浏览器按规范“筛选后映射”的只读代理。只有符合 data-a-b-c 这种全小写+连字符格式的属性，才会被解析进 dataset 并转为 aBc 形式。
以下写法全部无效，dataset 中查不到对应字段：
立即学习“前端免费学习笔记（深入）”；
-
data-userId（含大写） -
data_user_id（含下划线） -
data-2024-start（数字开头，需用dataset["2024Start"]方括号访问） -
data-foo--bar（连续连字符，语义模糊且易误转）
即使你用 setAttribute('data-userId', '123') 动态加了属性，只要命名不合规，dataset.userId 依然为 undefined。
所有 data-* 值都是字符串，类型转换必须手动
无论你在 HTML 里写 data-count="42"、data-active="false" 还是 data-config='{"theme":"dark"}'，通过 getAttribute 或 dataset 拿到的永远是字符串。
-
el.dataset.count + 1得到"421"，不是43；应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔恒真）；正确判断是el.dataset.active === "true" - 存对象必须先
JSON.stringify()，读取时加空值判断：const raw = el.getAttribute('data-config'); const config = raw ? JSON.parse(raw) : {};
修改 data 属性必须用 setAttribute，dataset 赋值不生效
dataset 是只读代理（DOMStringMap），给它赋值如 el.dataset.userId = "456" 只更新内存副本，不会同步到 DOM 属性节点。
后果包括：
- DevTools 查
el.outerHTML看不到变化 - CSS 选择器如
[data-user-id="456"]匹配不到 - 刷新页面后还原为初始值
- 混用时状态不一致：先
dataset.foo = "a"，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回"a"，而getAttribute('data-foo')返回"b"
真正写入 DOM 的唯一可靠方式是：el.setAttribute('data-user-id', '456')；删除用 el.removeAttribute('data-user-id')。
