data属性是HTML5原生支持的自定义数据容器，用于在DOM元素上安全挂载私有业务数据；它以data-开头，浏览器忽略但JS可通过dataset API读写，自动连字符转驼峰，值恒为字符串，适用于纯JS逻辑驱动场景，避免滥用存复杂数据。
data属性是HTML5原生支持的自定义数据容器
它让开发者能在DOM元素上安全挂载与业务逻辑相关的私有数据，不污染标准属性，也不影响语义和渲染。浏览器会忽略所有以 data- 开头的属性，但允许你通过JS随时读写——这是它最核心的价值。
怎么用data-*属性存取数据（以JavaScript为例）
不要直接操作 element.attributes 或用 getAttribute/setAttribute 手动拼接字符串，那样既易错又难维护。正确做法是统一走 dataset API：
const el = document.querySelector('[data-user-id]');
// 存：自动转为驼峰（data-user-id → userId）
el.dataset.userId = '12345';
el.dataset.hasPermission = 'true';
// 取：返回字符串，需自行转换类型
console.log(el.dataset.userId); // '12345'
console.log(el.dataset.hasPermission); // 'true'
console.log(Boolean(el.dataset.hasPermission)); // true（注意：'false'也会转成true！）
-
dataset会自动把连字符命名（data-user-id）转为驼峰（userId），但反向不成立：不能用el.dataset['user-id'] - 所有值都是字符串，
'false'、'0'、空字符串都不是JS意义上的falsy值，判断前务必显式转换 - 若属性名含数字或大写字母（如
data-id2、data-URL），dataset.id2和dataset.url仍可访问，但命名规范建议全小写+连字符
什么时候该用data属性，而不是class或自定义属性
关键看数据是否「仅用于JS逻辑驱动，不参与样式或可访问性」：
- ✅ 适合：
data-product-sku（供AJAX提交用）、data-modal-target（控制弹窗ID）、data-sort-order（排序状态缓存） - ❌ 不适合：
data-hidden="true"（该用hidden属性或CSSdisplay:none）、data-error="required"（该用aria-invalid+aria-describedby） - ⚠️ 警惕：
class="btn btn--primary data-action=submit"—— 把data-写进class值里完全无效，浏览器不会解析
data属性的性能和兼容性要注意什么
现代浏览器支持良好（IE11+），但有两个实际限制常被忽略：
立即学习“前端免费学习笔记（深入）”；
- 大量使用
data-会略微增加HTML体积和DOM内存占用，单页应用中几百个元素各带3–5个data属性基本无感，但若动态生成上万条列表项，建议只挂必要字段，其余走外置Map缓存 -
dataset是实时反射，修改后立即可读；但批量更新多个data属性时，频繁触发dataset赋值可能引发微小重排（尤其在旧版Chrome），此时可先用setAttribute批量写入，再统一读取 - 服务端渲染时，确保模板引擎正确转义value（如避免
data-config="{{ json }}">中的双引号破坏HTML结构）
真正容易出问题的不是语法，而是把data属性当数据库用：存复杂对象、嵌套JSON、甚至函数字符串——这些都该交给JS变量或状态管理，data属性只负责轻量、扁平、可序列化的上下文锚点。
