data-*属性名必须全小写加连字符，否则dataset无法读取；dataset是只读映射，修改须用setAttribute()；所有值均为字符串，类型转换需手动处理；命名不规范或含数字时应优先使用getAttribute()。
data-* 属性名必须全小写加连字符，否则 dataset 读不到
浏览器只识别 data- 后紧跟小写字母、数字或连字符（且不能以数字开头）的属性名。写成 data-userId、data_user_id 或 data-UserID，DOM 解析时会直接忽略——不是取不到值，是压根没挂到元素上。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"。这不是 JS 写错了，是浏览器根本没把它当 data-* 属性处理。
-
data-user-id→ ✅ 可用dataset.userId -
data-api-endpoint→ ✅ 对应dataset.apiEndpoint -
data-2024-start→ ✅ 但只能用dataset["2024Start"]（点号语法不支持数字开头） -
data-config-json→ ✅ 推荐，比data-configJson更规范
dataset 是只读映射，改值必须用 setAttribute()
dataset 是 DOMStringMap 的只读代理，赋值如 el.dataset.status = "loading" 看似生效，实际只是临时更新内存映射，不会同步到 DOM 属性节点，也不会触发 CSS 选择器重新匹配（比如 [data-status="loading"]）。
真正写入 DOM 的唯一可靠方式是：el.setAttribute("data-status", "loading")。删除同理：el.removeAttribute("data-status")，delete el.dataset.status 完全无效。
- 批量写入多个 data 属性？用
Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - 混用
dataset.xxx = "a"和setAttribute("data-xxx", "b")会导致不一致：dataset.xxx仍返回"a"（缓存未刷新） - CSS 选择器要响应变化？必须走
setAttribute，否则样式不会重计算
所有值都是字符串，类型转换必须手动做
哪怕你写 data-count="42" 或 data-active="false"，读出来永远是字符串 "42" 和 "false"。JS 不做任何隐式转换，也不报错，但逻辑很容易出错。
- 数字运算：别写
el.dataset.count + 1（结果是"421"），改用+el.dataset.count + 1或Number(el.dataset.count) + 1 - 布尔判断：别用
if (el.dataset.active)（"false"是真值），正确写法是el.dataset.active === "true"或更稳妥的el.hasAttribute("data-active") - JSON 数据：必须用
JSON.stringify()存，JSON.parse(el.getAttribute("data-config") || "{}")取，并加try/catch防解析失败
优先用 getAttribute() 读取，尤其命名不规范或含数字时
getAttribute("data-xxx") 比 dataset.xxx 更底层、更可控：它直接读 HTML 字符串，不依赖驼峰转换规则，不静默失败，也不自动转类型。
当你遇到这些情况，别硬扛 dataset：data-1st-load、data-apiKey、data_user_id、服务端渲染的 data-initial-state='{"count":10}'……统统用 getAttribute()。
- 判断属性是否存在？
el.hasAttribute("data-disabled")比el.dataset.disabled !== undefined准确 - 读取原始值（比如空字符串
""或"0"）？getAttribute()不做任何修饰 - 和 jQuery 混用？
.attr("data-xxx")对应 DOM 原生行为，.data("xxx")是独立缓存，二者不同步
复杂点在于：命名规则、读写机制、类型处理这三者必须同时对齐。稍有偏差，dataset 就会静默失效，而 getAttribute() 虽稳，却失去驼峰便利性——所以实际项目中，建议统一用全小写+连字符命名，读写都走 setAttribute()/getAttribute()，把 dataset 当作只读快捷通道，而非状态管理入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
