queryselectorall不支持data属性多值or匹配，因css语法禁止逗号分隔值；应改用选择器组拼接、js过滤或标准化拆分数组判断，并注意命名规范与dom同步。
直接用 querySelectorAll 无法对 data 属性值做“多值 or 匹配”，必须手动拼接多个选择器或遍历过滤——这是最常卡住的地方。
为什么 querySelectorAll('[data-type="a","b"]') 会失败
浏览器 CSS 选择器语法不支持在属性值里用英文逗号分隔多个候选值。[data-type="a","b"] 是非法语法，解析时直接报错或静默忽略。实际生效的只有第一个引号内的内容，比如 [data-type="a"]，后面部分被丢弃。
- 错误写法：
document.querySelectorAll('[data-status="active","pending"]')→ 返回空 NodeList - 合法但低效写法：
document.querySelectorAll('[data-status="active"], [data-status="pending"]')→ 手动拼接逗号分隔的选择器组 - 更稳妥做法：用循环 +
querySelectorAll分别查，再用Set去重（尤其当元素可能同时匹配多个值时）
用 Array.from() + filter() 做运行时匹配
当匹配逻辑复杂（比如要“且”关系、模糊包含、大小写不敏感），或 data 值来自用户输入/后端 JSON，硬拼选择器容易出 XSS 或语法错误，此时应放弃纯 CSS 方式，改用 JS 过滤。
- 先取全部候选元素：
const els = Array.from(document.querySelectorAll('[data-type]')) - 再按需过滤：
els.filter(el => ['cat', 'dog'].includes(el.dataset.type)) - 注意
el.dataset.type永远是字符串，若后端传的是数字或布尔，得提前转类型，例如：Number(el.dataset.count) > 5或el.dataset.active === 'true' - 空值容错不能少：
el.dataset.type ?? ''或el.getAttribute('data-type') || ''，避免undefined.includes报错
多值 data 属性怎么存和查（如 data-tag="vue,react,svelte"）
用英文逗号分隔是常见做法，但直接 includes() 会误匹配（"vue" 会被 "vu" 命中）。安全做法是拆成数组再判断。
- 存的时候加空格清理：
data-tag="vue, react, svelte"（注意逗号后空格） - 查的时候标准化：
el.dataset.tag.split(',').map(t => t.trim()).includes('react') - 如果值本身含逗号（如城市名 “Changsha, Hunan”），就别用逗号分隔，改用其他分隔符如竖线
|，并统一约定：data-location="Changsha, Hunan|Beijing|Shanghai" - 极端情况可存 JSON 字符串：
data-tags='["vue","react"]'，读取时JSON.parse(el.dataset.tags || '[]')，但务必加try/catch
容易被忽略的命名与读取陷阱
data 属性写错一个字符，JS 就读不到；读写 API 混用，DOM 和内存状态立刻不一致——这不是 bug，是规范使然。
- 命名必须全小写+连字符：
data-user-id✅，data-userId❌（浏览器直接忽略） -
dataset自动转驼峰：data-api-url→el.dataset.apiUrl，但data-2024-report必须写成el.dataset["2024Report"] - 写入必须用
setAttribute才真正更新 DOM：el.dataset.foo = 'bar'只改内存副本，下次getAttribute('data-foo')还是旧值 - 判断是否存在，别用
el.dataset.xxx !== undefined，改用'xxx' in el.dataset
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
