优先用getattribute()而非dataset，因其直接读取html原始字符串，兼容数字开头、大小写混用、下划线等任意合法data-*名，无驼峰转换限制且不隐式类型转换；dataset仅支持全小写+连字符命名（如data-user-id→userid），否则静默返回undefined。
优先用 getAttribute()，而不是 dataset —— 后者在命名不规范、含数字或大小写混用时会静默失败，且所有值都是字符串，不自动转类型。
为什么 dataset 会读不到你写的 data- 属性
浏览器只把符合「全小写 + 连字符」格式的 data- 属性纳入 dataset 映射，比如 data-user-id → userId；但以下情况都会被忽略：
-
data-userId（含大写）→ 解析为data-userid，dataset.userId是undefined -
data-1st-load（数字开头）→ 驼峰转换失败，dataset.1stLoad语法非法，dataset['1stLoad']也是undefined -
data_api_key（含下划线）→ 不合法命名，DOM 解析时直接跳过，dataset里压根没有这个键 -
data-API-Key（含大写）→ 转成全小写后是data-api-key，但dataset.apiKey仍可能因浏览器实现差异失效
getAttribute('data-xxx') 怎么用才稳
它绕过所有驼峰转换和命名校验，直接返回 HTML 中写的原始字符串，兼容性好、行为可预测：
- 属性名必须带
data-前缀，如el.getAttribute('data-user-id')，不能写成el.getAttribute('user-id') - 返回值恒为字符串，哪怕 HTML 里写的是
data-count="0"，拿到的也是"0"，需手动转：Number(el.getAttribute('data-count')) - 属性不存在时返回
null，不是undefined，判断存在性建议用el.hasAttribute('data-xxx') - IE11 完全支持
getAttribute，但不支持dataset—— 如果还要兼容旧环境，别碰dataset
什么时候可以放心用 dataset
仅当满足全部条件时，dataset 才是简洁选择：
- HTML 中属性名严格为小写字母 + 连字符，如
data-role、data-index、data-is-active - 不需要动态拼接键名（比如不能写
elem.dataset[myKey]，除非myKey已提前转成小驼峰） - 不依赖属性是否存在做逻辑分支 —— 因为
'xxx' in elem.dataset才能准确判断，elem.dataset.xxx !== undefined在属性值为空字符串时会误判 - 写入操作必须用
el.setAttribute('data-xxx', value)，el.dataset.xxx = value不会真正更新 DOM 属性
批量读取所有 data- 属性的可靠方式
Object.keys(elem.dataset) 或 for...in 都不可靠 —— dataset 是 DOMStringMap，不是普通对象：
- 最兼容写法：
Array.from(elem.attributes).filter(attr => attr.name.startsWith('data-')).map(attr => ({ key: attr.name, value: attr.value })) - 现代浏览器可用：
Object.fromEntries(Array.from(elem.dataset, ([k, v]) => [k, v]))，但 Safari 15.6 及更早版本不支持Array.from(dataset) - 注意：空属性如
<div data-flag></div>的值是""（空字符串），不是null或undefined
真正容易被忽略的点是：你写的 data- 属性名是否被浏览器解析进 DOM 树。打开控制台，执行 el.attributes 看一眼，比猜命名规则更直接。一旦发现某个 data- 属性根本不在 attributes 列表里，说明它从一开始就没被识别 —— 此时换什么 JS 方法都读不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
