data-*属性名必须全小写加连字符，否则dataset中无对应键；dataset值恒为字符串，需手动类型转换；修改须用setAttribute()；IE11存在驼峰映射bug，关键场景建议降级用getAttribute()。
data-* 属性名必须全小写加连字符，否则 dataset 里压根没有这个键
浏览器只认 data- 开头、后面跟小写字母和连字符的属性名。比如 data-user-id 合法，data-userId、data-UserId、data_user_id 全部非法——解析时被静默丢弃，dataset 对象里根本不会出现对应字段，console.log(element.dataset) 都看不到它。
常见错误现象：element.dataset.userId 返回 undefined，但 element.getAttribute('data-userId') 却能取到值（因为原生属性没校验规则，但 dataset 映射是严格转换的）。
-
data-addval→dataset.addval（全小写，✅） -
data-add-val→dataset.addVal（连字符后首字母大写，✅） -
data-addValue→ ❌ 浏览器忽略，dataset 无此键 -
data-123或data-_id→ ❌ 静默丢弃
dataset 值永远是字符串，类型转换别偷懒
dataset 返回的所有值都是字符串，哪怕你在 HTML 里写的是 data-cost="100" 或 data-progress="0.0001"，JS 里拿到的仍是 "100" 和 "0.0001"。直接参与运算会出 NaN，比如 upgradeButtonData.addval + 1 结果是 "11" 而不是 2。
- 数字优先用
Number()：比parseInt()更安全，不需指定基数，且对空字符串、null返回NaN，便于统一判断 - 浮点数用
parseFloat()：比如进度值data-progress="0.0001"，Number()也行，但语义上更明确 - 布尔值不能靠
== true：要显式判断dataset.active === "true" - 数组/对象必须 JSON 存取：
JSON.parse(el.dataset.tags || "[]")
动态修改 dataset 必须用 setAttribute，innerHTML 不触发更新
dataset 是只读的 DOMStringMap，你不能直接赋值：el.dataset.cost = "200" 无效。改值必须调用 setAttribute()，而且得用原始 HTML 属性名（带连字符），不是驼峰名。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
el.setAttribute("data-cost", "200") - ❌ 错误：
el.dataset.cost = "200"（无效果） - ❌ 错误：
el.setAttribute("dataCost", "200")（属性名错，浏览器忽略） - ⚠️ 注意：
innerHTML += "..."插入新元素后，新节点的dataset不会自动初始化，得等 DOM 解析完再访问，或手动调用el.setAttribute
IE11 有驼峰映射 bug，关键场景降级用 getAttribute
IE11 对 data-user-id → dataset.userId 的转换存在兼容性问题，有时返回 undefined 即使属性存在。生产环境若还需支持 IE11，别依赖 dataset 读取关键业务字段。
- 稳妥写法：
const cost = el.getAttribute("data-cost")，然后自己转类型 - 封装一层兼容函数也行，但注意
getAttribute返回null而不是undefined，判空逻辑稍不同 - 现代项目（Chrome/Firefox/Safari/Edge）基本没问题，但金融、政企系统仍可能踩到这个坑
实际开发中最容易被忽略的，是命名合法性检查和类型转换的耦合——你写了 data-add-val，却在 JS 里用 addval 访问；或者忘了 Number() 包一层，结果 cost * 1.1 算出来是 "1001.1"。这两个点一错，后续逻辑全崩，但控制台还不报错。
