data-*属性名必须全小写加连字符，否则不进入dataset映射；合法命名才触发驼峰转换；数字开头需方括号访问；dataset写入不更新DOM，须用setAttribute；所有值均为字符串。
data-* 属性名大小写错误会导致 dataset 读不到
浏览器在解析 HTML 时，对 data-* 属性名有硬性校验：前缀 data- 后**必须全小写 + 连字符**，任何大写字母（如 data-userId、data-UserID）都会被直接忽略——不是读不到，是压根没进 DOM 的 dataset 映射表。你在 DevTools 的 Elements 面板里都看不到它，element.dataset.userId 必然返回 undefined。
常见失效写法包括：
-
data-userId→ 浏览器当普通属性处理，不归入 data-* 体系 -
data-User-ID→ 同样被跳过，dataset 无对应字段 -
data-API-Key→ 即便语义清晰，也因含大写而失效
dataset 自动转驼峰的规则只对合法命名生效
dataset 的驼峰转换不是“智能猜测”，而是严格基于 kebab-case（短横线分隔）的机械映射：每个短横线后首字母大写，其余全部小写。它只作用于**已被浏览器识别为合法 data-* 属性**的那些字段。
正确映射示例：
立即学习“前端免费学习笔记（深入）”；
-
data-user-id→element.dataset.userId -
data-api-url→element.dataset.apiUrl -
data-last-modified-at→element.dataset.lastModifiedAt
错误尝试：
- 写成
data-userId，再试图访问element.dataset.userId→ 返回undefined（命名非法，无映射） - 写成
data-user-id，却访问element.dataset.userid或element.dataset.Userid→ 同样undefined（驼峰规则固定，不接受变体）
数字开头的 data 属性只能用方括号访问
如果属性名以数字开头（如 data-2024-year），虽然 HTML 合法（浏览器会解析），但 JS 中无法用点号语法访问：element.dataset.2024Year 是语法错误（变量名不能以数字开头）。
必须改用方括号语法：
-
element.dataset["2024Year"]✅ -
element.dataset["2024-report"]→ 实际对应data-2024-report，但注意连字符仍触发驼峰转换逻辑，所以是"2024Report"，不是"2024-report"
这类命名容易引发混淆，建议尽量避免数字开头；若必须用，写入时也得用 setAttribute('data-2024-year', value)，不能依赖 dataset["2024Year"] = value（部分老浏览器不支持写入方括号形式）。
混用 setAttribute 和 dataset 会导致状态不一致
dataset 是只读代理，不是双向绑定。你写 element.dataset.userId = "1002"，只是更新了内存副本；真正要持久化到 DOM 属性，必须调用 element.setAttribute('data-user-id', '1002')。
典型陷阱：
- 先
dataset.userId = "a"，再setAttribute('data-user-id', 'b')→ 下次读dataset.userId仍是"a"（缓存未刷新） - 先
setAttribute('data-user-id', 'a')，再dataset.userId = "b"→getAttribute('data-user-id')仍返回"a"
统一策略更安全：
- 读取优先用
element.dataset.xxx（语义清晰、自动驼峰） - 写入/删除一律用
element.setAttribute('data-xxx', value)或element.removeAttribute('data-xxx') - 需要兼容 IE11 或 SSR 场景时，读取改用
element.getAttribute('data-xxx')（绕过 dataset 缓存和驼峰逻辑）
最常被忽略的一点：所有 data-* 值都是字符串，哪怕你写 data-count="42"，读出来也是 "42"。类型判断、数值运算、JSON 解析都得手动做，没有隐式转换。
