data-属性名必须全小写加连字符，如data-user-id；dataset是只读映射，修改需setAttribute；事件委托用closest查找祖先；框架中需显式透传data属性。
直接用 [data-*] CSS 属性选择器就能定位，不用 ID 或 class；但属性名写错、大小写混用、连字符处理不当，是 90% 以上失败的根源。
为什么 document.querySelector('[data-userId]') 找不到元素
浏览器根本不解析非法 data 属性名。data-userId 含大写字母，违反 HTML5 规范——data- 后必须全小写 + 连字符。它不会进入 DOM 树，getAttribute('data-userId') 也返回 null，不是“读不到”，是压根不存在。
- ✅ 正确写法：
data-user-id→ JS 中通过dataset.userId访问 - ✅ 正确写法：
data-api-endpoint→dataset.apiEndpoint - ❌ 错误写法：
data-userId、data_user_id、data-UserID、data-2024-start（数字开头需用getAttribute特殊处理）
dataset 和 getAttribute 到底该用哪个
二者行为完全不同：前者是只读映射，后者是原始属性访问。选错会导致值不一致、修改无效、判断逻辑出错。
- 读取简单字符串值（如
data-id="123"）：两个都行，但dataset.id更语义化 - 需要判断布尔含义（如
data-active="false"）：必须用el.dataset.active === "false"，不能写if (el.dataset.active)（非空字符串恒为真） - 要存/取 JSON：必须用
setAttribute('data-config', JSON.stringify(obj))+JSON.parse(el.getAttribute('data-config') || '{}')；dataset.config会把键名转驼峰，破坏原始结构 - 持久化修改属性：只能用
setAttribute('data-active', 'false')或removeAttribute('data-active')；dataset.active = "false"只改内存副本，DOM 不变，CSS 选择器也匹配不到
如何安全地用 data 属性做事件委托
点击子元素（比如图标、文字）时，e.target 往往不是带 data-* 的父容器，直接读 e.target.dataset.id 必然 undefined。
立即学习“前端免费学习笔记（深入）”；
- 绑定监听器到父容器（如
.controls），不要绑在body或模糊区域 - 用
e.target.closest('[data-id]')向上查找最近的带该属性的祖先，比手动写e.target.parentElement.dataset.id更健壮 - 加防御性判断：
if (!control || !control.dataset.id) return; - 避免用
querySelectorAll('[data-id]')全量遍历再逐个绑定事件——性能差，且动态插入的元素不会自动生效
最易被忽略的一点：现代框架（Vue/React/Svelte）默认不透传 data-test-id 这类属性，写在组件标签上等于没写；必须显式配置 inheritAttrs: false 并在模板根节点用 v-bind="$attrs"（Vue）或 {...props}（React）展开，否则 document.querySelector("[data-test-id='xxx']") 永远返回 null。
