data-*属性名必须全小写、数字或连字符且不能数字开头，否则不进dom；dataset是只读映射，修改需setattribute；值均为字符串，json存取须用getattribute/setattribute。
data-* 属性名写错，JS 就读不到
浏览器只识别严格符合规范的 data- 属性：前缀后必须是小写字母、数字或连字符（-），且不能以数字开头。任何大小写混用（如 data-userId）、下划线（data_user_id）、点号或驼峰写法，都会被 DOM 解析器直接忽略——不是读不到，是压根没进 DOM 树。
常见失效写法：data-userId、data_user_id、data-UserID、data-2024-year（数字开头需特殊访问）；正确写法只有：data-user-id → JS 中通过 el.dataset.userId 访问，data-api-endpoint → el.dataset.apiEndpoint。
含数字开头的属性（如 data-2024-start-date）虽合法，但 JS 中只能用方括号语法：el.dataset["2024StartDate"]；el.dataset.2024StartDate 是语法错误。
dataset 赋值不更新 DOM，真要改得用 setAttribute
dataset 是只读映射，不是双向绑定。执行 el.dataset.foo = "bar" 只修改了内存中那个 DOMStringMap 的副本，不会触发 DOM 更新：el.getAttribute("data-foo") 仍返回旧值，刷新后还原，CSS 选择器也匹配不到新值。
真正持久化修改的唯一方式是：
el.setAttribute("data-foo", "new-value")- 删除必须用：
el.removeAttribute("data-foo") - 混用会出问题：先
el.dataset.foo = "a"，再el.setAttribute("data-foo", "b")，后续el.dataset.foo仍返回"a"（缓存未刷新），而getAttribute返回"b"—— 两者已不一致
所有值都是字符串，类型转换必须手动做
哪怕 HTML 里写 data-count="42" 或 data-active="false"，el.dataset.count 拿到的仍是字符串 "42"，el.dataset.active 是字符串 "false"，不是布尔值。
典型错误：
-
el.dataset.count + 1得到"421"（字符串拼接），应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔恒真），正确判断是el.dataset.active === "true" - 存 JSON 时，必须用
el.setAttribute("data-config", JSON.stringify(obj))；取时用JSON.parse(el.getAttribute("data-config") || "{}")，不能用el.dataset.config（驼峰转换可能错位键名）
getAttribute 比 dataset 更可靠，尤其命名不规范或含数字时
getAttribute() 直接读取原始 HTML 字符串，无驼峰转换限制，兼容所有合法 data- 名（包括含数字、下划线、大小写混用等），且不隐式类型转换、不静默失败。
使用场景：
- 需要兼容 IE11 或旧版 Safari？优先用
el.getAttribute("data-user-id")（dataset在 IE10+ 才稳定） - 属性名含数字开头（如
data-2024-year）？dataset无法访问，只能用getAttribute - 要判断属性是否存在但值为空字符串？
getAttribute返回""或null，而dataset.xxx对空值也返回undefined，语义不同
复杂结构、模糊命名、跨浏览器支持——这些地方别迷信 dataset，getAttribute 才是兜底方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
