<p>data-* 属性必须用 dataset 以驼峰形式访问，连字符自动转驼峰但大小写不敏感；getAttribute 可读原始字符串但需手动处理类型和拼写，二者值不同步且 dataset 不支持复杂数据或响应式。</p>
data-* 属性必须用 dataset 获取，不能用 getAttribute 直接读驼峰名
HTML 里写 data-user-id="123" 或 data-page-url="https://a.b/c"，JS 中不能直接写 el.dataset.userId 就完事——得先确认命名规则。浏览器会把连字符转成驼峰：data-user-id → userId，data-api-key → apiKey，但 data-URL 会被转成 url（全小写），data-XML-Format 会变成 xmlformat（所有大写字母前的连字符都被忽略，后续字母全小写）。所以别依赖大小写敏感的命名。
常见错误是写 el.dataset["user-id"] ——这会报 undefined，因为 dataset 只支持驼峰键访问，不支持中划线字符串索引。
用 getAttribute 能读原始值，但要自己处理连字符和大小写
如果 HTML 是 data-user-id="456"，el.getAttribute("data-user-id") 确实能拿到 "456"，但它不自动转换命名，也不做类型转换——全是字符串。你得手动 parseInt(el.getAttribute("data-user-id")) 或 JSON.parse()，而且一旦属性名拼错（比如写成 "data-userid"），就直接返回 null，没有提示。
适合场景：
- 需要读取未按规范命名的 data 属性（比如后端模板动态注入，命名不统一）
- 明确只要原始字符串，不做任何映射或转换
立即学习“前端免费学习笔记（深入）”；
注意：getAttribute 无法读取通过 dataset 设置的新值，反之亦然——两者底层不共享缓存。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
dataset 改值会实时同步到 DOM，但某些值会自动转成字符串
执行 el.dataset.userId = 789，DOM 中对应属性会立刻变成 data-user-id="789"；赋布尔值 el.dataset.active = true，结果是 data-active="true"；赋对象或数组会调用 .toString()，[1,2,3] 变成 "1,2,3"。
所以别指望用 dataset 存复杂结构。真要存 JSON，老实用 setAttribute("data-config", JSON.stringify(obj))，读的时候再 JSON.parse(getAttribute("data-config"))。
另外，dataset 不响应式——改了不会触发 MutationObserver，除非监听的是 attributes 类型且过滤 data- 前缀。
批量读取所有 data 属性？别用 dataset 遍历，用 getAttributeNames()
el.dataset 是 DOMStringMap，不能用 for...in 或 Object.keys() 安全遍历（部分浏览器会暴露内部方法）。正确方式是：
const dataAttrs = Array.from(el.getAttributeNames())
.filter(name => name.startsWith("data-"))
.reduce((acc, name) => {
acc[name.slice(5)] = el.getAttribute(name);
return acc;
}, {});这样拿到的是原始 key 名（如 "user-id"）和原始字符串值，没经过驼峰转换，也兼容非标准命名。如果页面有大量 data 属性且频繁读取，注意这个操作不是零开销，别在 render 循环里反复调用。
真正容易被忽略的是：服务端渲染时若 data 属性值含换行或双引号，没做 HTML 实体转义，JS 读出来会截断或报错——务必检查输出是否合法 HTML。
