不用ID或class也能精准定位data-元素，关键在于正确使用CSS属性选择器语法和JS API：用[data-name]匹配存在性，[data-name="value"]精确匹配值，注意引号、大小写及转义，避免混淆dataset与getAttribute，确保属性名合法。
不用 ID 或 class，也能精准定位带 data- 属性的元素——关键不在“有没有选择器”，而在“用对 CSS 属性选择器语法”和“选对 JS API”。
用 [data-name] 选择所有含某 data 属性的元素
当你只想找所有带 data-target-id 的元素，不管值是什么，直接用属性存在选择器即可。
-
document.querySelectorAll('[data-target-id]')返回所有含该属性的元素，哪怕值为空字符串或"undefined" - 注意：不能写成
[dataTargetId]或[dataset.targetId]——CSS 选择器只认原始 HTML 属性名（连字符形式），不认驼峰 - 如果页面有大量元素，这个选择器性能尚可，但比
.class或#id稍慢，因为要遍历所有节点检查属性是否存在
用 [data-name="value"] 精确匹配特定值
要筛选出 data-role="admin" 的按钮，就得用带等号的属性值选择器。
- 值必须用英文双引号或单引号包裹，且严格区分大小写：
'[data-role="Admin"]'不会匹配data-role="admin" - 如果值里含引号、方括号或空格（比如
data-config='{"theme":"dark"}'），直接拼接选择器会报错；此时应改用getAttribute()遍历过滤 - 多个条件可叠加：
'[data-active="true"][data-type="user"]'表示同时满足两个属性
批量匹配多个 data 值时别用 querySelectorAll('[attr="a","b"]')
这种写法是非法的——querySelectorAll 不支持 CSV 格式值列表，浏览器会直接忽略整个选择器，返回空 NodeList。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是循环拼接单值选择器，再用
Set合并去重：Array.from(new Set(Array1.flatMap(v => Array.from(document.querySelectorAll(`[data-name="${v}"]`))))) - 若值来自用户输入或不可信来源，必须先用
CSS.escape(v)转义，否则可能触发选择器解析失败甚至 XSS（尽管概率低） - 对超大数组（>100 项），建议分批执行，避免主线程长时间阻塞
dataset 和 getAttribute 别混用，尤其在读写动态属性时
两者行为差异明显：一个走驼峰映射，一个走原名直取。写错会导致读不到、写不进、或意外覆盖。
- 读
data-user-id：用el.dataset.userId（自动转驼峰）或el.getAttribute('data-user-id')（原样返回） - 写
data-api-key：必须用el.dataset["apiKey"] = "x"，不能写el.dataset.apiKey（会变成data-apikey） - 用
setAttribute('data-user-id', 42)写入后，el.dataset.userId会立即反映新值；但反过来，改dataset也会同步更新 DOM 属性
真正容易被忽略的是属性名合法性：data-user_id 中的下划线不会被 dataset 映射，data-user--id 是无效 HTML 属性，部分浏览器会静默丢弃。写之前多看一眼控制台 Elements 面板里的实际渲染结果。
