document.querySelectorAll 是一个强大的 JavaScript 方法，可以帮助我们快速找到文档中的多个元素，并对它们进行操作。在前端开发中，这一方法特别有用，因为它可以帮助我们避免手动遍历 DOM 树的痛苦。
基本语法
使用 querySelectorAll 方法需要传入一个选择器作为参数。该选择器可以是任何支持 CSS 选择器语法的字符串。例如：
const selectedElements = document.querySelectorAll('.example');上述代码将选中文档中所有类名为 example 的元素，并把它们保存在 selectedElements 变量中。
遍历选中元素
querySelectorAll 方法返回的结果是一个 NodeList 类型的对象。NodeList 类型很像数组，但是并非真正的数组，不能使用数组的方法。因此，在对选中的元素进行操作时，我们需要先将 NodeList 转换为数组。
以下是一个示例代码，展示了如何使用 querySelectorAll 遍历选中的元素，以及如何使用 Array.from 方法将 NodeList 转换为数组。
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------- --------------
-------
------
----
--- --------------------------
--------------
--- --------------------------
--------------
-----
--------
----- ---------------- - --------------------------------------
----- ------------- - -----------------------------
------------------------------- -- -
---------------------------------
---
---------
-------
-------在这个示例代码中，我们首先选中文档中所有类名为 example 的元素，并将它们保存在 selectedElements 变量中。接着，我们使用 Array.from 方法将 NodeList 转换为数组，并将转换后的结果保存在 elementsArray 变量中。最后，我们使用 forEach 循环遍历 elementsArray 数组中的元素，并打印出每个元素的文本内容。
结论
querySelectorAll 是一种十分强大的选择器，可以帮助我们快速找到文档中的多个元素，并对它们进行操作。在前端开发中，这一方法是必须要学会的。通过掌握如何使用 querySelectorAll 和遍历选中元素的技巧，我们可以更加高效地操作 DOM 树，提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31678