data-属性必须以data-开头且仅含字母、数字、连字符、下划线和冒号；连字符自动转驼峰，值恒为字符串；设置新属性须用setAttribute而非dataset；dataset读取便捷但IE11不支持，且不支持动态新增或实时反映删除。
data-属性必须以 data- 开头，且后续只能包含字母、数字、连字符、下划线和冒号
HTML 规范强制要求自定义数据属性名必须以 data- 为前缀，否则浏览器会忽略它。比如 data-user-id 合法，dataUserID 或 user-id 都不合法——后者甚至不会出现在 DOM 的 dataset 中。
注意连字符（-）在属性名中会被自动转为驼峰式键名：
data-user-id → JavaScript 中读作 dataset.userId；
data-api-key → dataset.apiKey；
data-foo-bar-baz → dataset.fooBarBaz。
- 避免用
data-后接大写字母或空格，如data-UserId会被转成dataset.userid（全小写） - 不要用
data-声明已存在的全局属性（如data-class），虽然能设，但可能引发混淆 - 值始终是字符串类型，即使写
data-count="42"，JS 里取出来仍是"42"
通过 setAttribute 或直接写 HTML 设置 data- 属性
两种方式效果等价，但适用场景不同：
- 静态页面或服务端渲染时，直接在 HTML 标签里写：
<button data-action="delete" data-item-id="105">删除</button> - 运行时动态添加，用
setAttribute：btn.setAttribute('data-action', 'edit') - 别用
btn.dataset.action = 'edit'来设置新属性——它只对已存在的data-属性生效；首次设置请用setAttribute
错误示例：btn.dataset.newProp = 'value' 不会生成 data-new-prop 属性，DOM 上看不到，getAttribute('data-new-prop') 也返回 null。
用 dataset 读取 data- 属性比 getAttribute 更方便，但有兼容性限制
dataset 是 HTMLElement 的原生属性，返回一个 DOMStringMap 对象，支持点语法读取，比反复调用 getAttribute 简洁得多：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const btn = document.querySelector('button');
console.log(btn.dataset.action); // "delete"
console.log(btn.dataset.itemId); // "105"但它在 IE11 及更早版本完全不可用，需要降级处理：
- 现代项目（ES6+）可直接用
dataset - 需兼容 IE11？改用
btn.getAttribute('data-action') -
dataset不支持动态新增属性（见上一条），也不反映属性删除后的实时状态（缓存行为）
data- 属性不适合存大量数据或敏感信息
它本质是公开的 HTML 属性，任何用户都能在开发者工具里看到、修改，所以：
- 别放 token、密码、用户手机号等敏感内容
- 别塞 JSON 字符串（如
data-config='{"timeout":5000}'），既难维护又易引号冲突；真要传结构化数据，用JSON.parse(btn.dataset.config)前务必校验格式 - 大量 data- 属性会拖慢 DOM 渲染和查询性能，尤其是列表项上千时；优先考虑用 JS 对象管理状态，而非塞进 HTML
真正该用 data- 的地方，是那些“与当前元素强绑定、轻量、只读、无需保密”的上下文标识，比如 data-track-id、data-step-index、data-testid。
