data-属性须全小写加连字符，如data-user-id；dataset只读，修改需setattribute()；值恒为字符串，需手动类型转换；存json宜用getattribute()再parse；css选择器需引号匹配。
直接写 data- 开头的属性就行，但浏览器只认全小写+连字符的命名，其他写法等于没写；dataset 读取方便但不能写入，真要改值必须用 setAttribute()。
HTML 中 data-* 属性怎么写才被浏览器识别
浏览器解析时会严格过滤：只有 data- 后紧跟小写字母、数字或连字符（且不能以数字开头），才算合法 data- 属性。
-
data-user-id→ ✅ 正确，JS 中可通过el.dataset.userId访问 -
data-api-endpoint→ ✅ 正确，对应el.dataset.apiEndpoint -
data-2024-start-date→ ✅ 合法，但 JS 中只能用el.dataset["2024StartDate"]（点号语法不支持数字开头） -
data-userId、data_user_id、data-UserID→ ❌ 全部无效，DOM 中查不到，dataset返回undefined -
data-2024-year写在 HTML 里，但 JS 用el.dataset.2024Year→ ❌ 语法错误，点号不能以数字开头
读取 data-* 值时为什么拿到的总是字符串
dataset 和 getAttribute() 返回的值永远是字符串，哪怕你写的是 data-count="42" 或 data-active="false"。类型转换必须手动做，否则逻辑会出错。
-
el.dataset.count + 1得到"421"（字符串拼接），不是43；应写成Number(el.dataset.count) + 1或+el.dataset.count + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真）；正确判断是el.dataset.active === "true" - 存 JSON 字符串时，推荐用
getAttribute("data-config")读取再JSON.parse()，避免dataset.config因驼峰转换导致键名错位（比如data-user-preferences→dataset.userPreferences，但原始键是user-preferences）
修改 data-* 属性为什么 dataset 赋值没用
el.dataset.xxx = "new" 看似生效，其实只是改了内存里的映射副本，不会更新 DOM 属性节点，也不会触发 getAttribute() 或 CSS 选择器重新匹配。
- 真正写入 DOM 的唯一方式是：
el.setAttribute("data-xxx", "new-value") - 删除必须用：
el.removeAttribute("data-xxx")，delete el.dataset.xxx无效 - 混用会出问题：先
el.dataset.foo = "a"，再el.setAttribute("data-foo", "b")，后续el.dataset.foo仍返回"a"（dataset不刷新） - CSS 属性选择器如
[data-status="active"]匹配失败？记得加引号——[data-status="active"]✅，[data-status=active]❌（无引号时浏览器按标识符解析，不匹配字符串值）
最常被忽略的一点：data-* 是元数据槽位，不是状态容器。它适合存 data-sku="ABC-123"、data-tracking-id="t_789" 这类静态、轻量、与渲染无关的信息。一旦开始用它控制 disabled、aria-hidden 或驱动组件重绘，就该换 React state、Vue ref 或原生 CustomElement 的内部属性了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
