data-*属性必须全小写加连字符命名（如data-user-id），否则浏览器解析时直接忽略；读取用dataset.userId，写入必须用setAttribute，值恒为字符串需手动类型转换。
data- 属性不是“加个属性就能用”的快捷方式，它只在命名合法、读写方式正确、类型处理到位的前提下才真正可用。写错名字、混用 API、忽略字符串本质，三者任一都会导致 JS 读不到值。
data-* 属性名怎么写才不被浏览器忽略
浏览器只解析严格符合规范的 data- 名——必须全小写、以 data- 开头、后续只能是字母、数字或连字符（-），且不能以数字开头。
-
data-user-id✅ 合法，JS 中对应element.dataset.userId -
data-api-url✅ 合法，对应element.dataset.apiUrl -
data-2024-report✅ 合法，但必须用element.dataset["2024Report"]访问（.2024Report是语法错误） -
data-userId❌ 浏览器直接忽略，dataset.userId返回undefined -
data_user_id❌ 不触发驼峰转换，dataset.userId读不到，只能靠getAttribute("data_user_id") -
data-UserID❌ 大小写混用，同样被忽略
dataset 读取方便，但写入必须用 setAttribute
dataset 是只读映射，不是双向绑定。它只是 DOM 解析时对已有 data- 属性的一次性快照。
- 读取推荐：
element.dataset.userId（语义清晰、自动驼峰） - 写入必须：
element.setAttribute("data-user-id", "1024")，否则 DOM 不更新 -
element.dataset.userId = "1024"看似生效，但getAttribute("data-user-id")仍返回旧值，刷新后还原 - 删除属性必须：
element.removeAttribute("data-user-id")，delete element.dataset.userId只清缓存，不删 DOM - 混用风险：先赋值
dataset，再setAttribute，两者会不一致——dataset缓存未刷新，getAttribute已更新
所有值都是字符串，类型转换不能省
哪怕你写 data-count="42" 或 data-is-active="false"，JS 拿到的永远是字符串 "42" 和 "false"。
立即学习“前端免费学习笔记（深入）”；
-
if (el.dataset.isActive)在data-is-active="false"时也成立（非空字符串转布尔恒为true） - 正确判断布尔：
el.dataset.isActive === "true"或更稳妥地用存在性判断el.hasAttribute("data-is-active") - 转数字：
Number(el.dataset.count)或+el.dataset.count，别直接el.dataset.count + 1（字符串拼接） - 存 JSON：
el.setAttribute("data-config", JSON.stringify({theme: "dark"})) - 取 JSON：
JSON.parse(el.getAttribute("data-config") || "{}")，务必加try/catch防格式错误
哪些场景真适合用 data-*，哪些必须换方案
data- 只适合存静态、轻量、与渲染无关的上下文元数据。一旦涉及状态同步、跨组件响应、持久化或敏感信息，它就该退场了。
- ✅ 合理用法：
data-track-id（埋点 ID）、data-modal-target（弹窗目标）、data-sort-field（当前排序字段） - ❌ 错误用法：
data-cart-count当购物车状态（需响应多个组件）、data-token存认证凭据（公开可查）、data-is-loading控制按钮禁用（CSS 无法响应，应改用class或disabled） - ⚠️ SSR 注意：服务端渲染后，首次 JS 执行前
dataset不可用，得用getAttribute安全取值 - ⚠️ 表格场景：优先把
data-绑在<tr>上，而不是分散在<td>里，避免动态渲染后定位失效
最常被忽略的是「命名合法性」和「写入必须用 setAttribute」这两条——其他问题还能靠调试发现，这两条错了，DOM 里根本看不到属性，JS 自然读不到，连报错都不会有。
