只有带 data- 前缀的自定义属性才是合法 data 属性，会自动挂载到 element.dataset（驼峰化键名、字符串值）；遍历需用 object.entries(el.dataset) 或 getattributenames() 过滤；注意拼写、执行时机及框架动态添加兼容性。
data属性在HTML里怎么写才有效
只有带 data- 前缀的自定义属性才是合法的 data 属性，浏览器会自动识别并挂载到元素的 dataset 对象上。比如 data-user-id="123" 会被解析为 element.dataset.userId === "123"（注意：连字符转驼峰）。不加 data- 前缀的属性（如 user-id）不会进 dataset，也不能用标准方式遍历。
用 element.dataset 遍历所有 data 属性
dataset 是一个 DOMStringMap，不是普通对象，不能直接用 for...in 或 Object.keys() 安全遍历——某些浏览器（如旧版 Safari）会把原型方法也列出来。正确做法是先转成真实对象或用 Object.entries() 提取键值对：
const el = document.querySelector('[data-user-id]');
const entries = Object.entries(el.dataset);
entries.forEach(([key, value]) => {
console.log(key, value); // "userId" "123"
});
- 注意
el.dataset的 key 是自动驼峰化的，原始 HTML 中的data-api-key变成apiKey - 如果需要原始 key 名（含连字符），得改用
el.getAttributeNames().filter(n => n.startsWith("data-")) -
dataset值永远是字符串，即使你写了data-count="5"，取出来也是"5"
批量遍历多个元素的 data 属性（常见需求）
多数场景不是查单个元素，而是处理一组（如所有按钮带 data-action 的）：
document.querySelectorAll('[data-action]').forEach(btn => {
const action = btn.dataset.action;
const target = btn.dataset.target || '#default';
btn.addEventListener('click', () => handle(action, target));
});
- 用属性选择器
[data-action]比先选全部再过滤更高效 - 别漏掉空值判断：
btn.dataset.foo在属性不存在时返回undefined，不是空字符串 - 如果 data 属性值含 JSON（如
data-config='{"mode":"dark"}'），需手动JSON.parse()，dataset不会自动解析
遇到 dataset 返回空对象？检查这三处
明明写了 data- 却读不到，大概率是以下原因：
- HTML 中拼写错误：
dat-user-id（少了个a）或data_user_id（用了下划线而非连字符） - JS 执行时机太早，DOM 还没加载完，
querySelector返回null，后续调用.dataset报错 - 服务端渲染或框架（如 Vue/React）动态添加 data 属性时，没走标准 DOM API，而是直接 setAttribute，此时需确认是否触发了 dataset 更新（通常会，但极少数自定义渲染逻辑可能绕过）
最稳妥的兜底方式是：用 el.getAttributeNames().filter(n => n.startsWith("data-")) 获取原始属性名，再逐个 el.getAttribute(name) 读值——它不依赖 dataset 规则，兼容性最好，只是没驼峰转换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
