document.querySelectorAll() 获取所有匹配元素

最后更新：2026-09-09

querySelectorAll 返回所有匹配 CSS 选择器的元素的 NodeList（静态集合）。

分类	DOM 操作
ES 版本	DOM

📝 语法

document.querySelectorAll('CSS选择器');

selector	CSS 选择器。

返回值：NodeList（可用 forEach 遍历）。

是否修改原值：否（返回新值）

编辑下方代码，点击运行，在输出面板查看结果：

运行结果：

（遍历打印每个元素文本）

💡 提示 NodeList 有 forEach 但没有 map/filter——需要时用 [...nodeList] 转为真数组。

ℹ️ info querySelectorAll 返回静态集合——DOM 变化后不会自动更新。

浏览器	Chrome	Edge	Firefox	Safari	Opera
document.querySelectorAll()	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有现代浏览器均支持

更多实战案例即将上线，敬请期待。

QNodeList 和数组的区别？

ANodeList 有 forEach 但没有 map/filter/reduce。需要这些方法时用 [...nodeList] 转换。

QquerySelectorAll 是动态的还是静态的？

A静态——DOM 变化后不会自动更新（与 getElementsByTagName 不同）。

Q如何把 NodeList 转为数组？

A[...nodeList] 或 Array.from(nodeList)。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。