<p>JavaScript 读取 data-* 属性最直接的方式是通过 element.dataset，它返回 DOMStringMap 对象并自动将连字符命名（如 data-user-id）转为驼峰式键名（userId），但仅映射合法命名（仅含字母、数字、连字符，且不以下划线或数字开头）的属性。</p>
data-* 属性怎么用 JavaScript 读取
HTML 的 data-* 属性是标准的自定义数据容器，JS 读取它们最直接的方式是通过元素的 dataset 属性。它返回一个 DOMStringMap 对象，自动把连字符命名（如 data-user-id）转为驼峰式键名（userId）。
注意：不是所有带 data- 前缀的属性都会立刻出现在 dataset 中——只有解析时已存在的属性才被映射；动态添加的需等下次 DOM 更新后才可读（但通常立即可用）。
常见错误：直接用 element.getAttribute('data-user-id') 虽然能读，但绕过了 dataset 的自动转换逻辑，写法冗余且易错。
dataset 键名转换规则和陷阱
dataset 会做标准化处理，这个转换不是“随便猜”，而是有明确规则：
立即学习“前端免费学习笔记（深入）”；
-
data-user-id→userId（连字符后首字母大写，其余小写） -
data-api-url→apiUrl -
data-abc-def-ghi→abcDefGhi -
data-_id和data-123这类非法命名（下划线/数字开头）会被忽略，dataset中不可见
容易踩的坑：data-user_id（下划线）不会转成 userId，也不会出现在 dataset 里——浏览器只认连字符分隔的合法 data-* 名。
获取 data-* 的三种常用方式对比
实际开发中你可能遇到不同场景，选哪种取决于你要什么：
- 要自动转换键名 + 简洁访问 → 用
element.dataset.userId - 要原始字符串值（比如保留大小写或特殊符号）→ 用
element.getAttribute('data-user-id') - 要批量读取所有
data-*属性 → 遍历element.dataset的键，或用element.attributes过滤：Array.from(element.attributes) .filter(attr => attr.name.startsWith('data-')) .reduce((acc, attr) => { acc[attr.name] = attr.value; return acc; }, {});
性能上无明显差异，但 dataset 更语义清晰；getAttribute 更可控，适合处理非标准命名或需要精确匹配的场景。
dataset 修改后 DOM 是否同步更新
对 dataset 赋值会**双向同步**：改 JS 对象，HTML 属性跟着变；反之亦然。但要注意：
-
el.dataset.userId = '1001'→ 自动写入data-user-id="1001" -
el.dataset.userId = null或undefined→ 对应属性被移除 - 不能用
delete el.dataset.userId，会静默失败（DOMStringMap不支持 delete） - 修改
dataset后，后续用getAttribute能立刻读到新值，但 MutationObserver 不一定触发（除非监听 attributeChanged）
真正容易被忽略的是：如果服务端渲染时用了大写字母（如 data-UserID），浏览器会把它标准化为小写 data-userid，最终 dataset.userid 才有效——而不是你写的原名。
