<p>HTML data-* 属性名必须全小写且用连字符分隔，否则dataset无法映射：data-user-id→dataset.userId可读，data-userId→undefined；大写或数字开头等非常规命名须用getAttribute()。</p>
HTML data-* 属性名必须全小写，任何大写字母都会导致 JavaScript 无法通过 dataset 访问——不是“读不到”，而是该属性压根不会进入 DOM 的 dataset 映射。
data-userId 和 data-user-id 的区别在哪
浏览器在解析 HTML 时，会把所有属性名强制转为小写。所以 data-userId 实际被存为 data-userid（注意是连在一起的），而 dataset.userId 查找的是 data-user-id 对应的驼峰键，两者完全不匹配。
-
data-user-id→ ✅el.dataset.userId可读 -
data-userId→ ❌el.dataset.userId返回undefined，且无报错 -
data-UserId→ 同样变成data-userid，仍无法触发驼峰映射 -
getAttribute("data-userId")能读到值，但这是靠大小写不敏感的字符串匹配，不是靠规范支持
为什么 dataset.uid 读不到 data-UID
dataset 的驼峰转换只对符合 data-xxx-yyy 格式的全小写连字符命名生效。一旦出现大写字母，比如 data-UID，浏览器不会把它当作合法 data-* 属性处理——它可能出现在 DOM 中，但不会被纳入 dataset 的键集合。
-
data-uid→el.dataset.uid✅ -
data-UID→el.dataset.uid❌，el.dataset["UID"]也 ❌ - 唯一可靠方式：
el.getAttribute("data-UID")✅（大小写不敏感） - 服务端渲染或 SSR 框架（如 Next.js）可能直接丢弃含大写的
data-*属性
含数字开头的 data 属性怎么读
以数字开头的 data-* 属性（如 data-2024-year）是合法的，但 dataset 无法用点号访问，因为 el.dataset.2024Year 是语法错误。
立即学习“前端免费学习笔记（深入）”；
-
data-2024-year→ 必须用el.dataset["2024Year"]✅ -
getAttribute("data-2024-year")更直白、无语法风险 ✅ - 不要写
data-1st-load这类带序数词的——虽然能用方括号读，但可读性差，建议改用data-first-load - 所有值仍是字符串：
el.dataset["2024Year"]返回"2024"，不是数字2024
什么时候该放弃 dataset，直接用 getAttribute
只要你的 data-* 属性名不满足“全小写 + 连字符”这个硬性条件，或者你不确定构建流程/SSR 是否会重写属性名，就别碰 dataset。它不是容错机制，而是严格规范下的便捷映射。
- 遇到下划线：
data_user_id→dataset.userId❌，getAttribute("data_user_id")✅ - 遇到混合大小写：
data-apiKey→dataset.apiKey❌，getAttribute("data-apiKey")✅ - 需要判断属性是否存在（不管值）：
el.hasAttribute("data-active")比el.dataset.active !== undefined更准 - 批量读取多个 data 属性？别循环
dataset，用Array.from(el.attributes).filter(a => a.name.startsWith("data-"))
真正容易被忽略的点：dataset 的“驼峰映射”是 DOM 解析阶段一次性生成的快照，后续修改属性名（比如用 setAttribute 动态加了个 data-new-prop），dataset 不会自动更新——你得手动刷新引用或继续用 getAttribute。
