JavaScript querySelectorAll

简介

querySelectorAll() 方法是 JavaScript 中的一种方法，它可以在文档中根据指定的 CSS 选择器选择所有符合条件的元素。这个方法可以用来寻找页面中的 HTML 元素，对它们进行操作。

使用方法

querySelectorAll() 方法可以接受一个参数，这个参数是一个字符串，字符串里面包含了一个 CSS 选择器。该方法会返回一个 NodeList 对象，包含了找到的所有元素。我们可以遍历这个列表，对每一个元素进行操作或者取出它们的属性。

这里是一个简单的例子：

let elements = document.querySelectorAll('#myDiv');
elements.forEach((element) => {
  element.style.color = 'red';
});

上述代码使用 querySelectorAll() 方法来获取 ID 为 myDiv 的元素，并将它们的颜色设为红色。

参数

querySelectorAll() 方法带有一个字符串参数，这个字符串参数包含一个 CSS 选择器。该选择器用来指定要查找的元素集合。

这里有一个例子：

let elements = document.querySelectorAll('div.widget');

上述代码使用 querySelectorAll() 方法来查找 class 属性为 widget 的 div 元素集合。

返回值

querySelectorAll() 方法会返回一个 NodeList 对象，该对象包含了找到的元素集合。NodeList 对象类似于数组，我们可以通过下标来访问其中的元素。

示例

示例 1 - 根据 ID 查找元素

下面的代码演示了如何使用 querySelectorAll() 方法来获取文档中的 ID 为 myDiv 的元素，并改变它们的颜色。

let elements = document.querySelectorAll('#myDiv');
elements.forEach((element) => {
  element.style.color = 'red';
});

示例 2 - 根据类名查找元素

下面的代码演示了如何使用 querySelectorAll() 方法来获取文档中 class 属性为 widget 的所有 div 元素，并将它们的显示方式都设为 block。

let elements = document.querySelectorAll('div.widget');
elements.forEach((element) => {
  element.style.display = 'block';
});

注意事项

• querySelectorAll() 返回的是一个 NodeList 对象，而不是一个数组。虽然这两个对象看起来很相似，但是它们有着不同的方法和属性。
• querySelectorAll() 方法返回的 NodeList 对象是一个动态的对象，它会随着文档的改变而改变。

结论

querySelectorAll() 方法是一个强大的方法，它可以用来查找文档中的 HTML 元素，并对它们进行操作。我们可以使用它来查找元素，添加事件监听器，修改样式等。

最后，我们需要注意的是，虽然 querySelectorAll() 方法很方便，但是它的性能并不是最优。如果我们需要查找的元素数量很多，那么最好使用更高效的方法来进行查询。