data-属性命名必须全小写加连字符，否则dataset返回undefined；dataset赋值不更新DOM，需用setAttribute；data-不可在<head>中使用。
data-* 属性命名不规范导致 dataset 返回 undefined
浏览器只解析符合 data-xxx-yyy 形式的属性（全小写 + 连字符），其他命名如 data-userId、data_user_id、data-UserID 全部被忽略，DOM 中根本不存在，dataset 自然读不到。
常见错误现象：element.dataset.userId 是 undefined，但 HTML 里写了 data-userId="123"——不是 JS 写错了，是浏览器压根没认这个属性。
- 正确写法示例：
data-order-status→ JS 中用element.dataset.orderStatus - 数字开头必须用方括号：
data-2024-year→element.dataset["2024Year"]，点号访问无效 - 双连字符（
data-foo--bar）会被转成fooBar，但语义丢失，不推荐
getAttribute() 返回 null 的真实原因
getAttribute() 返回 null 不代表“没写”，而是 DOM 层面确实没这个属性，或调用时机/对象出错。它比 dataset 更底层、更可靠，尤其在命名不规范时反而能暴露问题。
- 元素未加载完成：在
DOMContentLoaded前执行，或querySelector返回null后直接调用 - 属性被动态移除过：
el.removeAttribute("data-loaded")后再读，就是null - 拼写干扰：传入
" data-id "（带空格）或"Data-Id"（大小写混用），getAttribute区分大小写，会失败
防御性写法：const val = el && el.getAttribute("data-id") !== null ? el.getAttribute("data-id") : "default";
立即学习“前端免费学习笔记（深入）”；
dataset 赋值不更新 DOM，刷新后丢失
dataset 是只读代理，不是双向绑定。element.dataset.foo = "bar" 只改了内存副本，原始 HTML 的 data-foo 属性值不变，页面刷新后回到初始状态。
- 真正要持久化，必须用：
element.setAttribute("data-foo", "bar") - 删除属性不能只
delete element.dataset.foo，得用：element.removeAttribute("data-foo") - 混用危险：
dataset.foo = "a"后再setAttribute("data-foo", "b")，后续dataset.foo仍返回"a"（缓存未刷新）
data-* 属性不能放在 <head> 中
HTML 规范禁止在 <head> 内使用 data-* 属性。哪怕你硬写 <head data-env="prod">，浏览器解析时直接忽略，document.head.getAttribute("data-env") 永远返回 null。
- 有效位置只有
<html>或<body>，其中<html>最稳妥（始终存在、最早解析） - 常见误用：服务端模板往
<head>注入data-user-id，前端埋点脚本初始化时取不到 - 自动化测试依赖该属性做环境判定？挂错位置就全 fallback 到默认配置
复杂点在于：命名规则、API 行为、DOM 生命周期三者叠加，任一环节出错都表现为“读不到”。最易被忽略的是——你以为写对了，其实浏览器根本没解析；你以为改成功了，其实只是内存副本变了。
