getattribute('data-xxx')是最稳的读取方式，它不转换命名、不丢大小写、不忽略数字、不自动类型转换，返回html中写的原始字符串，兼容ie11且适用于含数字、大写字母、下划线等复杂命名的data属性。
getAttribute('data-xxx') 是最稳的读取方式
绝大多数场景下，直接用 getAttribute('data-xxx') 读取 data 属性，比 dataset 更可靠。它不转换命名、不丢大小写、不忽略数字、不自动类型转换，拿到的就是 HTML 里写的原始字符串。
常见错误现象：element.dataset.item2Id 读不到 data-item-2-id="100" 的值（浏览器不支持数字开头的驼峰转换）；data-api-key 写成 apiKey 就失效；data-URL 被转成 url，大小写全丢了。
- 只要属性名含数字、大写字母、下划线（如
data-user-name、data-item2-id、data-api_key），一律用getAttribute() - 需要保留前后空格或特殊符号（比如
data-value=" yes "）时，getAttribute()返回原样，dataset也会返回原样，但命名转换已不可控 - IE11 及更老浏览器不支持
dataset，但支持getAttribute()—— 如果还要兼容，别碰dataset
dataset.targetId 这种写法只适用于纯小写+连字符
dataset 看似方便，但它把 data-target-id 自动转成 targetId 是强制行为，不是可选开关。你不能绕过这个转换，也不能让它“按原样映射”。
使用前提非常严格：属性名必须全小写、只含字母和短横线、且短横线后必须接字母（不能是数字或大写）。例如 data-role → role，data-user-id → userId，都合法；但 data-item-2-id、data-Api-Key、data-user_name 全部静默失败，访问结果为 undefined。
- 动态拼 key 时，必须先手动转驼峰，再用方括号：比如变量
key = 'user-id'，得写elem.dataset[key.replace(/-([a-z])/g, (_, l) => l.toUpperCase())] - 别写
elem.dataset['user-id']或elem.dataset.user-id（语法错误），这俩都不行 -
dataset是只读的 DOMStringMap，赋值如elem.dataset.foo = 'bar'不会更新 DOM 属性，要用setAttribute('data-foo', 'bar')
批量读取所有 data-* 属性，别用 Object.keys(dataset)
element.dataset 不是普通对象，它不继承 Object.prototype，所以 Object.keys()、for...in、Object.entries() 都拿不到任何键值对——它们返回空数组或根本遍历不到。
真正能用的方案只有两种：
- 兼容性最广的写法：
Array.from(element.attributes).filter(attr => attr.name.startsWith('data-')).reduce((acc, attr) => { acc[attr.name] = attr.value; return acc; }, {}) - 现代浏览器可用（Chrome 84+ / Firefox 68+ / Safari 14.1+）：
Object.fromEntries(Array.from(element.dataset, ([k, v]) => [k, v]))，但注意这行代码本身在旧版 Safari 会报错
额外提醒：如果 HTML 里写的是 <div data-flag></div>（无值），getAttribute('data-flag') 返回 ""，而 'flag' in element.dataset 是 true；如果属性根本不存在，getAttribute() 返回 null，element.dataset.flag 是 undefined。
jQuery 的 .data() 和 .attr('data-*') 完全不是一回事
如果你项目里混用了 jQuery，这点必须盯死：$el.data('id') 和 $el.attr('data-id') 返回的东西可能完全不同。
.data() 是 jQuery 自己维护的一套缓存机制，它会尝试把字符串转成对应类型（"true" → true，"123" → 123），还会监听后续修改并同步内部状态；而 .attr('data-id') 就是原样读 DOM 上的属性值，不解析、不缓存、不联动。
- 服务端渲染了
<div data-count="0"></div>，$el.data('count')得到数字0，$el.attr('data-count')得到字符串"0" - 执行
$el.data('count', 1)后，DOM 上的data-count属性**不会变**，$el.attr('data-count')仍是"0" - 绝对不要用
.data()存 JSON 字符串（如data-config='{"a":1}'），jQuery 解析失败时行为不稳定，有时返回原字符串，有时返回空对象
结论很实在：要读 HTML 原始值，只用 .attr('data-*')；要存运行时状态（比如组件内部计数器），才用 .data()，但别指望它和 DOM 属性保持一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
