17370845950

data-属性是HTML5原生支持的自定义数据机制，用于存储轻量静态UI上下文数据；非data-属性不被规范认可，无法通过dataset访问，且存在兼容性与验证问题。

data-\* 属性是 HTML5 专门用来存自定义数据的机制

它不是“可有可无的装饰”，而是浏览器原生支持的、语义明确的数据承载方式。HTML4 没有等效机制，强行用 class 或自造属性（如 my-id）会导致验证失败、JS 获取不统一、后续维护困难。

为什么不能直接写 my-data="123" 而必须用 data-*

因为非标准属性在 HTML5 中属于“未知属性”，部分浏览器会忽略，getAttribute() 可能返回 null，且无法通过 dataset API 访问。只有以 data- 开头的属性才被规范认可，并自动映射到元素的 dataset 对象中：

• data-user-id → dataset.userId（连字符转驼峰）
• data-is-active → dataset.isActive
• 值始终是字符串，布尔含义需手动转换（如 el.dataset.isActive === 'true'）

HTML4 下模拟自定义数据的可行做法

没有 dataset，只能退回到属性读写 + 命名约定。关键是避免污染标准属性，同时保证 JS 可靠读取：

• 用 class 存简单标识（如 class="item item--type-a item--id-42"），但解析麻烦、易冲突
• 用 id 编码信息（如 id="user-1001"），仅适用于单维度、唯一标识场景
• 最稳妥的是挂载到 DOM 元素的 JS 属性上：el.__customData = { userId: 1001, loaded: false }; —— 但该数据不随 HTML 序列化，服务端渲染或 SSR 场景下不可见
• 如果必须服务端输出数据，HTML4 只能靠 script 标签内联 JSON：
  再用 JS 找到并解析——绕开了属性限制，但增加了 DOM 查询成本

data-\* 的边界和常见误用

它适合存轻量、静态、与 UI 强相关的上下文数据（如 ID、状态标记、配置开关），不适合：

• 大量结构化数据（应走 AJAX 或内联 script）
• 敏感信息（会暴露在源码中，且无加密）
• 频繁变更的状态（反复 setAttribute 性能差，不如用 JS 对象管理）
• 需要 CSS 选择器匹配的场景（[data-status="pending"] 可用，但过度依赖会导致样式与数据耦合）

另外注意：IE10+ 才支持 dataset，IE9 及以下需回退到 getAttribute('data-xxx')；所有浏览器都支持 getAttribute 读取 data-*，但只有现代浏览器能自动做驼峰映射。