最稳方式是用 getattribute('data-xxx')，因其直接读取原始字符串、兼容性好、不自动转换格式；dataset 仅适用于纯小写+连字符的简单场景，遇数字、大写、下划线易出错；jquery 的 data() 和 attr() 行为不同，不可混用；框架绑定需手动字符串化和转义，查询时注意 css 选择器特殊字符转义。
data-\* 属性怎么用 getAttribute 取最稳
直接用 getAttribute 是最通用、最不容易翻车的方式，尤其当你不确定属性名是否带前缀、是否被框架改写、或者需要读原始字符串时。dataset 看似方便，但会自动转换连字符、忽略大小写、丢掉空格和特殊字符——很多实际场景里这反而是 bug 源头。
常见错误现象：element.dataset.myId 取不到 data-my-id="123" 的值（其实能取到，但变成 myId），更糟的是 data-user-name → userName，而 data-URL → url，大小写全丢了；如果后端传了 data-foo-bar-baz，你写 fooBarBaz 没问题，但一旦中间有数字比如 data-item-2-id，dataset.item2Id 就是 undefined（浏览器不支持数字开头的驼峰转换）。
实操建议：
- 只要属性名含数字、大写字母、下划线或你想保留原始格式（比如
data-api-key），一律用getAttribute('data-api-key') -
dataset仅适合纯小写+连字符的简单场景，例如data-role、data-index - 注意：IE11 支持
getAttribute，但不支持dataset—— 如果还要兼容 IE，别碰dataset
jQuery 里 data() 和 attr('data-*') 完全不是一回事
data() 是 jQuery 自己搞的一套缓存机制，它会解析值类型（把 "true" 变成布尔 true，"123" 变成数字 123），还会监听后续修改并维护内部状态；而 attr('data-xxx') 就是原样读 DOM 属性。两者混用极易出错。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：服务端渲染了一个 <div data-count="0"></div>，你用 $el.data('count') 得到的是数字 0；之后执行 $el.data('count', 1)，DOM 上的 data-count 属性**不会变**；再调 $el.attr('data-count') 还是 "0" —— 你以为在同步更新，其实两边早就脱钩了。
实操建议：
- 只读取、不修改时，优先用
attr('data-*')，确保拿到的是 HTML 里写的原始值 - 要存运行时状态（比如组件内部计数器），用
data()，但别指望它反映 DOM - 绝对不要用
data()存 JSON 字符串再靠 jQuery 自动解析——它会尝试转对象，失败就返回原字符串，行为不稳定
Vue/React 中动态绑定 data-\* 要防转义和序列化陷阱
框架模板里写 :data-id="item.id" 或 data-id={item.id} 看似没问题，但一旦 item.id 是对象、数组或 null，结果就是 data-id="[object Object]" 或 data-id="null" —— 不是你想要的字符串化结果。
更隐蔽的问题：React 会自动过滤掉非标准属性，除非你用 data-* 前缀；Vue 2 在模板中对 v-bind 的 data- 属性支持良好，但 Vue 3 的 v-bind 对象展开时，如果 key 是动态拼的（如 `data-${k}`），得确保它是合法属性名，否则会被忽略。
实操建议：
- 后端传来的 ID、token、配置项等，先
String(val)再绑定，避免隐式转换 - 需要存结构化数据（如对象），手动
JSON.stringify后再塞进data-config，读取时再JSON.parse—— 别依赖框架自动处理 - Vue 中避免
v-bind="{ [`data-${key}`]: value }"这种写法，key 含非法字符时静默失效，改用显式:data-xxx="value"
用 querySelector 按 data-\* 查元素，注意引号和转义
document.querySelector('[data-status="active"]') 能工作，但一旦值里有空格、引号或括号，比如 data-tag='user "admin"'，不加转义就会语法报错；CSS 选择器对 data- 属性名本身也敏感——data-user-id 没问题，但 data-user.id（带点）必须写成 [data-user\.id]。
性能影响不大，但写错选择器会导致查不到元素，调试时容易误判逻辑问题。
实操建议：
- 值含双引号，用单引号包裹选择器：
document.querySelector("[data-tip='He said \"hi\"']") - 值含单引号，用双引号包裹：
document.querySelector('[data-msg="It\'s done"]') - 属性名含点、括号等 CSS 特殊字符，必须用反斜杠转义：
data-user\.id、data-attr\[v1\] - 不确定值内容时，优先用
getAttribute+Array.from(document.querySelectorAll(...)).filter(...)替代复杂选择器
事情说清了就结束。真正麻烦的从来不是“怎么取”，而是“谁改过它”“什么时候改的”“改完还留没留在 DOM 上”——尤其是跨框架、跨生命周期操作 data 属性时，多一层验证比猜强。
