data-属性是HTML5原生支持的自定义数据机制，用于存储轻量静态UI上下文数据；非data-属性不被规范认可，无法通过dataset访问，且存在兼容性与验证问题。
data-\* 属性是 HTML5 专门用来存自定义数据的机制
它不是“可有可无的装饰”，而是浏览器原生支持的、语义明确的数据承载方式。HTML4 没有等效机制，强行用 class 或自造属性（如 my-id）会导致验证失败、JS 获取不统一、后续维护困难。
为什么不能直接写 my-data="123" 而必须用 data-*
因为非标准属性在 HTML5 中属于“未知属性”，部分浏览器会忽略，getAttribute() 可能返回 null，且无法通过 dataset API 访问。只有以 data- 开头的属性才被规范认可，并自动映射到元素的 dataset 对象中：
<div id="btn" data-user-id="1001" data-is-active="true"></div>
<script>
const el = document.getElementById('btn');
console.log(el.dataset.userId); // "1001"（自动驼峰转换）
console.log(el.dataset.isActive); // "true"
</script>-
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：<script type="application/json" id="data-user-1001"> {"name":"Alice","role":"admin"} </script>再用 JS 找到并解析——绕开了属性限制，但增加了 DOM 查询成本
data-\* 的边界和常见误用
它适合存轻量、静态、与 UI 强相关的上下文数据（如 ID、状态标记、配置开关），不适合：
立即学习“前端免费学习笔记（深入）”；
- 大量结构化数据（应走 AJAX 或内联
script） - 敏感信息（会暴露在源码中，且无加密）
- 频繁变更的状态（反复 setAttribute 性能差，不如用 JS 对象管理）
- 需要 CSS 选择器匹配的场景（
[data-status="pending"]可用，但过度依赖会导致样式与数据耦合）
另外注意：IE10+ 才支持 dataset，IE9 及以下需回退到 getAttribute('data-xxx')；所有浏览器都支持 getAttribute 读取 data-*，但只有现代浏览器能自动做驼峰映射。
