HTML data-*属性是浏览器原生支持的零成本数据通道，必须全小写加连字符命名（如data-user-id），含大写字母、下划线或数字开头等不合规写法会被浏览器忽略，导致dataset读取为undefined；值恒为字符串，修改须用setAttribute，读取需注意类型转换与兼容性。
HTML data- 属性不是“数据绑定”工具，也不是状态管理替代品，它只是给元素挂一个轻量、静态、与渲染无关的“标签”，用错场景或命名不合规，dataset 就会静默失效——不是报错，是根本读不到。
data-* 属性怎么写才合法
浏览器只解析严格符合规范的 data- 属性名，其余一律忽略（DOM 树里不存在，getAttribute 也返回 null）。
-
data-user-id✅ 合法：全小写 + 连字符 -
data-userId❌ 无效：含大写字母，浏览器跳过 -
data_user_id❌ 无效：下划线不被识别 -
data-1st-load✅ 合法但 JS 访问受限：必须用element.dataset["1stLoad"] -
data-api-key✅ 合法 → JS 中为element.dataset.apiKey
dataset.xxx 为什么有时读不到值
dataset 是只读映射，不是实时 DOM 反射。它只对「命名合规 + 已被浏览器解析」的 data- 属性生效，且值恒为字符串。
-
data-active="false"→element.dataset.active === "false"（不是布尔false） -
if (element.dataset.active)在值为"false"时仍为true，应写成element.dataset.active === "true" -
data-count="42"→element.dataset.count + 1得到"421"，正确写法是Number(element.dataset.count) + 1 - 服务端渲染的 JSON 字符串（如
data-config='{"theme":"dark"}'）不能用dataset.config读，必须用JSON.parse(element.getAttribute('data-config'))
setAttribute 和 dataset 混用会出什么问题
dataset 不是双向绑定，它只是读取时的语法糖；真正修改 DOM 必须用 setAttribute 或 removeAttribute。
立即学习“前端免费学习笔记（深入）”；
-
element.dataset.foo = "a"只改了内存副本，element.getAttribute('data-foo')仍返回旧值 -
element.setAttribute('data-foo', 'b')后，element.dataset.foo仍返回"a"（缓存未刷新），两者已不一致 - CSS 属性选择器（如
[data-pending]）只响应真实 DOM 属性变化，dataset赋值不会触发 - 需要持久化更新时，统一用
element.setAttribute('data-xxx', value)；删除用element.removeAttribute('data-xxx')
什么时候该用 getAttribute 而不是 dataset
当命名不规范、含数字开头、下划线、大小写混用，或你需要原始字符串（含空格、换行、前后空白）时，getAttribute 是唯一可靠方式。
-
element.getAttribute('data-user_name')✅ 可读，dataset.userName❌ 返回undefined -
data-tooltip-content=" hello\nworld "→dataset.tooltipContent返回"helloworld"（自动 trim + 去换行），getAttribute返回原样 - 判断属性是否存在：用
element.hasAttribute('data-disabled')，比'disabled' in element.dataset更准确 - 兼容 IE11：某些连字符转驼峰场景（如
data-user-id→dataset.userId）在 IE11 中有 bug，getAttribute更稳
最常被忽略的一点：data-* 是“一次性附着”的元数据载体，不是运行时状态快照。频繁读写它（尤其在循环或动画帧中）会隐式触发重排，性能敏感逻辑务必先缓存到变量再批量操作。
