<p>getAttribute 读取自定义属性需严格匹配 HTML 属性名（如"data-user-id"），返回字符串；dataset 自动转换 kebab-case 为 camelCase（如 userId），但不支持数字开头、大写字母等非法命名，且仅映射合法 data- 属性。</p>
element.getAttribute 和 dataset 都能读取自定义属性，但行为差异很大——别直接替换用，否则会读不到值或拿到错误类型。
为什么 getAttribute 读不到 data- 属性的值？
它其实能读，但前提是属性名拼写完全一致。HTML 中写的是 data-user-id="123"，JavaScript 就必须传 "data-user-id"，不能写成 "userId" 或 "user-id"。
常见错误现象：getAttribute('userId') 返回 null，因为浏览器根本没这个原生属性；getAttribute('dataUserId') 同样返回 null，驼峰命名在 HTML 属性里不生效。
- HTML 属性名始终是 kebab-case（短横线分隔），JS 中必须严格按此传字符串
- 如果属性不存在，
getAttribute返回null，不是undefined - 返回值永远是字符串，哪怕 HTML 里写的是
data-count="0"，拿到的也是"0"
dataset 的命名转换规则和限制
dataset 是个代理对象，浏览器自动把 data- 前缀去掉，并把短横线后字母转为小写驼峰（kebab-to-camel）。例如 data-user-id → userId，data-api-url → apiUrl。
立即学习“前端免费学习笔记（深入）”；
但这个转换有硬性限制：
- 属性名不能以数字开头，
data-1id不会被映射到dataset上 - 不能包含大写字母，
data-UserID会被忽略（HTML 规范要求自定义属性小写） - 多个连续短横线（如
data-a--b）只转第一个，变成aB，其余被吞掉 -
dataset只反映初始 HTML 中声明的属性，动态用setAttribute添加的也能读，但用dataset.xxx =写入后，DOM 上会同步生成对应data-xxx属性
什么时候该用 getAttribute，什么时候用 dataset？
选哪个取决于你控制 HTML 的程度和需要的数据类型。
- 要读非
data-自定义属性（比如ng-click、v-model），只能用getAttribute - 需要保留原始字符串格式（比如带前导零的 ID：
data-id="007"），用getAttribute，dataset.id也会是"007"，但容易误以为是数字 - 属性名含数字开头或特殊符号（
data-2fa-token），dataset无法访问，必须用getAttribute('data-2fa-token') - 想统一处理所有
data-属性且属性名符合规范，dataset更简洁，支持解构：const { userId, apiUrl } = element.dataset
兼容性和性能注意点
dataset 在 IE11+ 和所有现代浏览器都可用，IE10 及以下不支持，但这类环境现在极少需兼容。性能上两者无实质差别，都是 O(1) 查找。
真正容易被忽略的是：如果服务端渲染或框架（如 Vue/React）动态写入了 data- 属性，但没触发 DOM 更新完成钩子，dataset 可能暂时读不到最新值——此时应优先检查节点是否已挂载、是否在正确时机读取，而不是怀疑 API 本身。
