queryselectorall 返回静态 nodelist，支持 css 选择器，需转数组才能用 map/filter；queryselector 仅返回首个匹配元素。

querySelectorAll 是 JavaScript 中用于获取多个 DOM 元素的常用方法，它返回一个 静态的 NodeList（不是数组，但可遍历），支持 CSS 选择器语法，非常灵活实用。

基本用法：传入 CSS 选择器字符串

你可以像写 CSS 一样写选择器，例如：

• document.querySelectorAll('div') —— 获取页面中所有 <div> 元素 <li> <code>document.querySelectorAll('.btn') —— 获取所有 class 为 btn 的元素
• document.querySelectorAll('[data-id]') —— 获取所有带 data-id 属性的元素
• document.querySelectorAll('ul li:first-child') —— 获取每个 <ul></ul> 下的第一个 <li>

注意：返回的是 NodeList，不是数组

虽然 NodeList 看起来像数组（有 length、支持 forEach），但它没有 map、filter、reduce 等数组方法。如需使用这些方法，可先转成数组：


Alibabacloud Sdk Client Initialization For Java
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
下载
• 用展开运算符：[...document.querySelectorAll('.item')]
• 用 Array.from()：Array.from(document.querySelectorAll('.item'))
• 旧浏览器兼容可用：Array.prototype.slice.call(document.querySelectorAll('.item'))

常见操作示例

拿到元素后，常做这些事：

• 遍历并修改样式：document.querySelectorAll('.highlight').forEach(el => el.style.color = 'red')
• 绑定多个按钮事件：document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', handler))
• 提取文本内容：Array.from(document.querySelectorAll('h2')).map(h => h.textContent)

和 querySelector 的区别要记清

querySelector 只返回第一个匹配元素（或 null），而 querySelectorAll 返回所有匹配元素的 NodeList。别混用，也别对 querySelector 的结果调用 forEach（会报错）。