JavaScript 中怎么使用 querySelectorAll 获取所有匹配节点-js教程-PHP中文网

querySelectorAll 是获取匹配 CSS 选择器的所有元素的静态 NodeList；支持类名、ID、标签、属性、伪类等，但不支持伪元素；可限定作用域于任意元素；返回值非数组，但可用展开运算符或 Array.from 转换使用数组方法。

javascript 中怎么使用 queryselectorall 获取所有匹配节点

querySelectorAll 是 JavaScript 中用于获取文档中所有匹配指定 CSS 选择器的元素节点的方法，返回一个 静态 NodeList（不是数组，但可遍历）。

基本用法：传入合法 CSS 选择器

它接受一个字符串参数，内容是标准 CSS 选择器，支持类名、ID、标签名、属性、伪类等（不支持伪元素）。

document.querySelectorAll('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（注意：:first-child 是有效伪类）
注意返回值不是数组，但可以转成数组操作
NodeList 不具备 map、forEach（老版本 IE 不支持）、filter 等数组方法，但现代浏览器中 NodeList 已原生支持 forEach；如需兼容或使用其他数组方法，可转换：

											
												
												
													java-api-doc-generator
													分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
												
												下载
												
											
										

用展开运算符：[...document.querySelectorAll('.item')].map(...)

  用 Array.from()：Array.from(document.querySelectorAll('button')).filter(...)

  用 Array.prototype 方法（兼容旧环境）：Array.prototype.forEach.call(nodes, callback)


作用域可限定在任意元素内（不止 document）
你可以在某个具体元素上调用 querySelectorAll，只查找它的后代节点：

const card = document.querySelector('.card');
  
const titles = card.querySelectorAll('h2'); —— 只查该 card 内的 h2
  这比写 document.querySelectorAll('.card h2') 更精准，尤其页面有多个同类结构时

常见误区提醒

不支持动态实时更新：它返回的是快照，后续 DOM 变化不会影响已获取的 NodeList
  不能用 ::before、::after 等伪元素选择器（语法报错）
  ID 选择器记得加 #，类选择器加 .，否则会当成标签名匹配（比如 'header' 匹配 ，'#header' 才匹配 id="header"）
  空格和 > 有区别：'nav a' 匹配 nav 内任意层级的 a，'nav > a' 只匹配 nav 的直接子 a