querySelectorAll支持多条件写法：逗号分隔表示“或”（如'div, p, .highlight'），类与属性连写表示“且”（如'input[type="text"].required'），并支持父子（>）、兄弟（+、~）等CSS组合关系，参数必须为单个合法字符串。
querySelectorAll 支持哪些多条件写法？
querySelectorAll 本身不支持“逻辑或”（OR）或“逻辑与”（AND）的编程式组合，它只接受符合 CSS 选择器语法的字符串。所谓“多条件”，实际是靠 CSS 选择器的组合能力实现的——比如并集、交集、属性匹配、伪类嵌套等。
常见误区是试图写 document.querySelectorAll('div, .active', 'button[disabled]')，这会报错：参数只能是一个字符串。正确做法是把所有条件合并进单个字符串中。
- 多个元素类型用逗号分隔 →
querySelectorAll('div, p, .highlight')（匹配 div 或 p 或带 highlight 类的任意元素） - 同一元素需同时满足多个条件，直接连写 →
querySelectorAll('input[type="text"].required')（必须是 type=text 且有 required 类） - 父子/兄弟关系可用空格、
>、+、~表达 →querySelectorAll('form > .error') - 属性存在+值匹配要加引号 →
button[data-action="submit"]，不写引号在含空格/特殊字符时会解析失败
为什么 class 和属性组合经常漏掉元素？
典型现象：querySelectorAll('.btn[data-loading]') 找不到明明有 class="btn" 且 data-loading 属性的按钮。原因往往是属性值不为空但没显式赋值，比如 <button class="btn" data-loading></button> 是合法的布尔属性写法，此时 [data-loading] 能匹配；但如果写成 data-loading="false"，而你仍用 [data-loading]，就依然能匹配（只要属性存在）；但若误写为 [data-loading="true"]，那 data-loading="false" 就被排除了。
- 检查是否混淆了「属性存在」和「属性值等于某字符串」：用
[data-loading]表示存在该属性，用[data-loading="true"]表示值严格等于 "true" - class 名中间有空格会被当成后代选择器 →
'.btn primary'错，应写'.btn.primary'（两个 class 都在同一个元素上） - 大小写敏感：HTML 中 class 名区分大小写，
.MyClass不会匹配class="myclass"
动态拼接多条件时怎么避免语法错误？
手动拼字符串容易出错，尤其涉及变量插入时。比如：const type = 'email'; document.querySelectorAll('input[type=' + type + ']') —— 缺少引号，生成的是 input[type=email]，虽然部分浏览器能容错，但 type 值含破折号（如 data-custom）就会失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 始终给属性值加单/双引号，并统一转义：用模板字符串 +
JSON.stringify最稳 →input[type=${JSON.stringify(type)}] - 多个 class 动态组合时，别用空格拼：错误
'.' + classes.join(' .')；正确应是'.' + classes.join('.')（即.a.b.c） - 避免在选择器里拼用户输入内容，防止 XSS 或语法崩溃；如必须，先白名单过滤或改用遍历 +
element.matches()回退
querySelectorAll 返回 NodeList，后续操作要注意什么？
返回的是静态 NodeList，不是数组，不能直接用 map、filter。常见错误是写 querySelectorAll(...).forEach(...) —— 现代浏览器支持，但 IE 完全不支持；更隐蔽的问题是误以为它是实时集合（其实是快照），DOM 变化后不会自动更新。
- 需要数组方法时，优先用展开运算符：
[...document.querySelectorAll('button')].map(...) - 如果要兼容老环境，用
Array.from()或Array.prototype.slice.call() - 频繁增删 DOM 后还要反复筛选？考虑缓存结果或改用事件委托，而不是反复调用
querySelectorAll
最易被忽略的一点：CSS 选择器优先级规则在这里完全生效，比如 #nav .item.active 和 .active#nav .item 表达的语义完全不同，后者要求元素同时有 active 类和 id=nav —— 这在 HTML 中不可能（id 唯一，且一个元素不能有两个 id），但语法上不报错，只会默默返回空列表。
