querySelectorAll 返回静态 NodeList，支持任意 CSS 选择器；需转数组才能用 map/filter；可在任意元素上调用实现局部查找；不实时更新，且 IE8+ 部分支持。
querySelectorAll 是 DOM 中用于批量获取匹配 CSS 选择器的元素的方法，返回一个静态的 NodeList（不是数组，但可遍历），支持任意合法 CSS 选择器。
基础用法：传入选择器字符串
直接传入类名、标签名、属性、伪类等标准 CSS 选择器：
-
document.querySelectorAll('div')—— 获取所有 div 元素 -
document.querySelectorAll('.btn')—— 获取所有 class 为 btn 的元素 -
document.querySelectorAll('[data-id]')—— 获取所有带 data-id 属性的元素 -
document.querySelectorAll('input[type="text"]')—— 获取所有 type 为 text 的 input -
document.querySelectorAll('ul li:first-child')—— 获取每个 ul 下的第一个 li
注意返回值不是数组，但可转成数组操作
NodeList 不支持 map、filter 等数组方法，需显式转换：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用展开运算符：
[...document.querySelectorAll('.item')].map(el => el.textContent) - 用 Array.from()：
Array.from(document.querySelectorAll('button')).forEach(btn => btn.disabled = true) - 用 for...of 循环（无需转换）：
for (const item of document.querySelectorAll('.item')) { console.log(item); }
作用域限定：可在任意元素上调用
不只限于 document，任何元素都可以作为查询起点，实现局部查找：
立即学习“Java免费学习笔记（深入）”；
const card = document.querySelector('.card');<br>const titles = card.querySelectorAll('h2, h3');—— 只在 card 内部找标题-
form.querySelectorAll('input:invalid')—— 检查某个表单内哪些输入项无效
常见误区提醒
避免把 querySelectorAll 和 querySelector 混用：
-
querySelector返回第一个匹配元素（或 null），而querySelectorAll返回所有匹配元素的 NodeList - 它不实时更新 —— 返回的是调用时刻的快照，后续 DOM 变化不影响已获取的 NodeList
- 不支持 IE7 及更早版本（IE8+ 支持基本选择器，IE9+ 支持完整 CSS2.1 / 部分 CSS3）
