<p>data-* 属性必须以 data- 开头才合法，否则无法通过 dataset 访问、CSS 选择器匹配或避免标准冲突；命名须小写、用连字符、禁用下划线和大写；值恒为字符串，需显式转换类型；多维度区分应拆分为独立属性而非 JSON；动态元素需校验 data- 属性存在性。</p>
data-* 属性必须以 data- 开头才合法
浏览器只把 data- 开头的属性识别为标准自定义属性，能进 dataset、被 CSS 选择器稳定匹配、且不和未来 HTML 标准冲突。写成 uid="123" 或 product-id="456" 看似能用，但 element.dataset.uid 取不到值，[product-id="456"] 在部分浏览器里压根不生效。
常见错误包括：
- 漏写
data-前缀，比如直接写id="item-1"当作标识用（该用data-item-id="1"） - 用了大写字母或下划线：
data-UserId或data-user_id—— 前者 dataset 不识别，后者下划线不会转驼峰，dataset.userId拿不到 - 双连字符：
data-user--id是非法命名，解析时可能被截断或忽略
用 data-* 区分同类元素时，命名要带语义+可组合
比如商品列表里每个卡片都要区分，别只写 data-id="1"，而应写 data-product-id="10023"。这样既避免和其他模块（如用户、订单）的 id 冲突，又方便后续扩展条件筛选（例如 [data-product-id][data-in-stock="true"]）。
多个维度需要同时区分时，优先用多个独立 data- 属性，而不是拼 JSON 字符串：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
data-category="laptop" data-brand="apple" data-year="2024" - ❌ 避免：
data-meta='{"category":"laptop","brand":"apple"}'—— 无法用 CSS 选择器高效过滤，JS 解析还得JSON.parse()+try/catch
注意大小写：HTML 中写 data-is-active="true"，JS 里读是 el.dataset.isActive，不是 el.dataset.isactive 或 el.dataset.is_active。
JavaScript 读取 data-* 时，字符串类型必须显式转换
data- 的值永远是字符串，哪怕你写了 data-count="42" 或 data-enabled="false"。直接比较或计算会出错：
-
el.dataset.count > 40→ 实际是"42" > "40"，字符串比较逻辑不同，结果不可靠 -
if (el.dataset.enabled)→"false"是真值，条件成立，和预期相反
正确做法：
- 数值：用
Number(el.dataset.count)或一元加号+el.dataset.count - 布尔：用严格相等判断，
el.dataset.enabled === "true" - 空值容错：先检查
el.dataset.count != null，再转换，避免Number(undefined)得到NaN
用 CSS 选择器定位带特定 data-* 的元素要小心语法
CSS 里可以直接写 [data-status="pending"] 或 [data-price-range]（有该属性即可），但注意：
- 属性值含空格或特殊字符时，必须加引号：
[data-user-name="john doe"]，不加引号会解析失败 - 不要用点号当分隔符：
data-user.name在 HTML 里合法，但[data-user.name="abc"]会被当成「class 选择器 + 属性选择器」，实际匹配不到 - 连字符没问题，但 JS 里对应的是驼峰：
data-api-key→dataset.apiKey，CSS 里仍用原名[data-api-key]
最易被忽略的一点：动态插入的元素如果没带 data- 属性，事件委托（如 document.addEventListener('click', ...)）里用 event.target.closest('[data-action]') 就会返回 null —— 别忘了加空值判断，否则后续读 dataset 直接报错。
