data-属性是HTML5新增的合法自定义属性，HTML4不支持，校验会报错且IE9及更早不支持dataset API；其值均为字符串，需手动解析，不参与SEO和无障碍，慎用于大容量数据。
HTML4 不支持 data- 属性，硬写会被视为非法
HTML4 严格遵循 DTD 规范，data- 开头的属性不在标准属性列表中。浏览器虽通常会容忍（不报错、仍解析），但校验工具（如 W3C Validator）会标记为错误，且 document.getElementById("x").dataset 在旧版 IE 中根本不存在——这意味着你无法用 dataset API 读取。
常见错误现象：
document.getElementById("btn").dataset.userId // undefined（IE9 及更早、或 HTML4 doctype 下）
- 若页面声明了
，哪怕写了data-id="123"，也属于“无效标记” - jQuery 的
.data()方法在 HTML4 下可读取，但它不是直接读 DOM 属性，而是内部缓存 + 智能转换（比如把"true"转成布尔值），行为与原生dataset不一致 - 服务端渲染时若依赖 HTML4 doctype，又想用自定义数据，只能退回到
rel、rev或自定义非标准属性（如uid="123"），但后者无法被dataset访问
dataset 是 HTML5 原生 API，只映射 data- 前缀属性
HTML5 明确将 data-* 定义为合法自定义属性，并通过 element.dataset 提供统一访问接口。它自动处理命名转换：连字符转驼峰（data-user-id → userId），且仅响应以 data- 开头的属性。
使用场景：动态绑定 ID、状态标识、埋点参数等轻量元数据，避免污染全局变量或额外 DOM 查找。
-
data-后必须至少跟一个字符（data-单独写无效） - 属性名中连续多个连字符（如
data-a--b）会被转成aB（只保留首个连字符后首字母大写，其余连字符被忽略） - 设值时用
el.dataset.foo = "bar"，DOM 中会自动同步生成data-foo="bar"；但直接改el.setAttribute("data-foo", "baz")，dataset.foo也会实时更新 - 不支持嵌套对象或数组——所有值都是字符串，需手动
JSON.parse()（如果存的是 JSON 字符串）
存储容量和性能：本质仍是字符串属性，无特殊优化
data- 属性没有独立存储机制，它就是 DOM 元素上的普通字符串属性，和 id、class 一样走同一套内存管理。所谓“存储方式不同”是误解——HTML4 不让写，HTML5 允许写且提供 API 读，但底层没变。
- 单个
data-值过大（如存 1MB JSON 字符串）会导致 DOM 节点体积膨胀，影响序列化（innerHTML）、克隆（cloneNode）和垃圾回收速度 - 频繁读写
dataset不比直接getAttribute/setAttribute快；现代浏览器对两者做了类似优化，差异可忽略 - SEO 和无障碍（a11y）工具一般忽略
data-属性，它们不参与语义暴露，也不被搜索引擎索引
兼容性陷阱：IE11 支持 dataset，但不支持动态添加的 data- 属性反射
IE11 实现有缺陷：若元素初始 HTML 中没有 data- 属性，后续用 setAttribute("data-x", "y") 添加，dataset.x 在 IE11 中仍为 undefined，必须刷新整个属性映射（如先读一次 getAttribute 再访问 dataset）才能生效。
- 稳妥写法：
el.setAttribute("data-id", "456");<br>if (el.dataset && !el.dataset.id) {<br> // IE11 fallback<br> el.dataset.id = el.getAttribute("data-id");<br>} - Vue/React 等框架内部已处理该问题，但手写 DOM 操作时容易漏掉
- 移动端 iOS Safari 8+、Android Chrome 30+ 均无此问题，纯 HTML5 环境下无需担心
实际用的时候，别把 data- 当数据库使；它适合传几个字段 ID 或开关标志，真要存结构化数据，还是走 JS 对象或 Map 更靠谱。最常被忽略的是 IE11 的反射延迟，一上线就发现按钮点不动，查半天才发现是 dataset 没更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
