能，但必须用完整属性名如"data-user-id"，不能简写或驼峰；它直接匹配dom中真实存在的字符串属性，不自动转换，返回值恒为字符串。
getAttribute 能读到所有 data-* 属性吗
能，但必须用完整属性名，比如 data-user-id 就得写成 "data-user-id"，不能简写成 "user-id" 或 "userId"。浏览器不会自动转换连字符或做驼峰映射，这是最常踩的坑。
常见错误现象：element.getAttribute("userId") 返回 null，或者 element.getAttribute("dataUserId") 也返回 null——因为 DOM 中根本不存在这两个属性名。
- HTML 中写的是
data-user-id="123"，JS 就必须用getAttribute("data-user-id") - 即使用了
dataset（如element.dataset.userId），底层仍是靠标准属性名支撑；dataset是语法糖，不是替代getAttribute的新机制 - 大小写敏感：HTML 写
data-Api-Key，JS 里仍要传"data-Api-Key"，浏览器不标准化大小写
getAttribute 读取 data-* 和普通属性有区别吗
没有本质区别——getAttribute 统一按字符串匹配属性名。它不管是不是 data- 开头，只要属性真实存在于 HTML 标签中，就能读到。
使用场景差异在于语义和维护性：data- 是为自定义数据预留的合法命名空间，而直接写 foo="bar" 属于非标准属性，可能被未来 HTML 规范占用，也可能被某些框架/工具忽略或清洗。
<div id="btn" data-action="submit" role="button"> → <code>getAttribute("data-action")得"submit"，getAttribute("role")得"button"-
getAttribute("id")有效，但更推荐用element.id，因为后者是 DOM 属性，响应式更新（比如 JS 改了element.id = "new"，再getAttribute("id")才同步） -
getAttribute始终返回字符串，哪怕原值是数字或布尔值，比如data-count="42"→ 返回"42"，需手动parseInt - 先确认元素是否真有该属性：
console.log(element.outerHTML)，看输出里有没有data-xxx="..." - 检查是否在 DOM ready 后执行读取，避免操作了未插入文档的 fragment
-
dataset读不到也不代表getAttribute就能读到——两者依赖同一份 DOM 属性，只是访问路径不同 - 不要在
for循环里反复读同一个data-值，提取到变量缓存 - 服务端模板（如 EJS、Django）里拼接
data-时，注意引号闭合和特殊字符转义，比如data-desc=""若name含双引号会破坏 HTML 结构 - 如果值含 JSON，建议用
JSON.stringify+ 单引号包裹，再用JSON.parse解析，别手写对象字面量
为什么有时 getAttribute 返回 null，但 dataset 却能读到
通常不是 getAttribute 失效，而是属性根本没被渲染进 DOM。最常见于 Vue/React 等框架中：组件还没挂载、或数据尚未响应式赋值，此时元素虽已 querySelector 到，但 data- 属性还没被框架注入。
另一个隐蔽原因是服务端渲染（SSR）+ 客户端水合（hydration）不同步：HTML 初始含 data-，但 hydration 后框架清除了它（比如用了 v-bind 动态绑定但没显式保留）。
性能和兼容性要注意什么
getAttribute 在现代浏览器中几乎没有性能瓶颈，但频繁调用仍比直接访问 DOM 属性（如 element.id）略慢，因为涉及字符串查找和属性表遍历。
兼容性极好，IE6+ 都支持，无需 polyfill。但注意：如果属性是通过 setAttribute 动态添加的，必须确保添加时机早于 getAttribute 调用——否则就是典型的“读到了空”。
实际写的时候，getAttribute 的边界很清晰：它只认 DOM 上真实存在的属性字符串。复杂点往往不在 API 本身，而在 HTML 是否真生成了那个 data-，以及你读它的那一刻 DOM 是否已就绪。
