JavaScript中querySelectorAll的基本用法及详细解析

前言

querySelectorAll 是 JavaScript 中用于查找符合指定 CSS 选择器的所有 DOM 元素的一个方法。与 querySelector 不同，querySelectorAll 返回的是一个静态的 NodeList，包含文档中匹配选择器的所有元素。

基本用法

let elements = document.querySelectorAll(selector);

• selector: 这是一个 CSS 样式规则的字符串，用于指定选择器。
• elements: 返回一个包含所有匹配元素的 NodeList（类数组对象）。如果没有匹配项，返回的 NodeList 是空的。

详细解析

1. 支持的选择器

querySelectorAll 支持的选择器与 querySelector 完全相同。它们的语法和功能与 CSS 选择器保持一致。常见的选择器有：

• ID选择器: #id

  let elements = document.querySelectorAll('#myId');
  

  通常不需要使用 ID 选择器，因为 ID 是唯一的，但技术上仍然可以使用。

• 类选择器: .class

  let elements = document.querySelectorAll('.myClass');
  

  返回所有 class 为 myClass 的元素。

• 标签选择器: tag

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

  返回所有的 <div> 元素。

• 属性选择器: [attribute=value]

  let elements = document.querySelectorAll('input[type="text"]');
  

  返回所有 type 属性为 "text" 的 input 元素。

• 后代选择器: ancestor descendant

  let elements = document.querySelectorAll('#container .item');
  

  返回 id 为 container 的元素内部的所有 class="item" 的元素。

• 伪类选择器: :pseudo-class

  let elements = document.querySelectorAll('li:nth-child(odd)');
  

  返回所有满足 nth-child(odd) 规则的 li 元素（即奇数位置的元素）。

2. 返回一个静态 NodeList

querySelectorAll 返回的是一个 NodeList，这是一个类数组对象，类似于 HTMLCollection。它和真正的数组的区别主要体现在：

• 静态: NodeList 是静态的，意味着即使 DOM 发生变化，NodeList 内部的元素不会更新。它是在调用 querySelectorAll 时的那一刻被捕获的元素。

• 类数组: 虽然 NodeList 看起来像数组，但它不是一个真正的数组。它没有数组的一些内建方法，比如 push() 和 pop()。不过你可以通过 forEach 方法或通过 Array.from() 将其转为真正的数组。

• 遍历: 可以通过 for...of 循环、forEach、或者基于索引的传统 for 循环来遍历 NodeList。

  let elements = document.querySelectorAll('.myClass');
  
  // 通过 forEach 遍历
  elements.forEach(function(element) {
    console.log(element);
  });
  
  // 通过传统的 for 循环遍历
  for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
  }
  
  // 使用 for...of 遍历
  for (let element of elements) {
    console.log(element);
  }
  

3. 没有找到匹配的元素

如果 querySelectorAll 没有找到任何匹配的元素，它返回一个空的 NodeList，而不是 null。因此不需要像 querySelector 那样检查是否返回 null。

let elements = document.querySelectorAll('.nonExistentClass');
console.log(elements.length); // 0，表示没有找到匹配项

4. 作用域

querySelectorAll 可以在全局范围 (document) 或者在特定元素的作用域中使用。

let container = document.querySelector('#container');
let items = container.querySelectorAll('.item');

这将在 container 元素的范围内，查找所有具有 .item 类的元素。

5. 伪类与组合选择器

你可以通过组合选择器和伪类选择器来创建非常强大的查询：

let elements = document.querySelectorAll('div > p:first-child');

这将返回所有 div 元素下的第一个子元素是 p 的元素。

6. 性能考虑

因为 querySelectorAll 返回所有匹配的元素，如果选择器非常复杂或者页面包含大量匹配元素，可能会对性能产生影响。在需要查找大量元素时，性能开销可能较大。对于常见的操作，通常性能差异可以忽略不计，但在大量操作中，简化选择器可以提高效率。

7. 与其他方法的比较

• getElementsByClassName 和 getElementsByTagName

  • 这些方法返回的也是类数组的 HTMLCollection，但它们是实时的，意味着如果 DOM 发生变化，HTMLCollection 会实时更新，而 NodeList 不会。

• querySelector

  • querySelector 只返回第一个匹配的元素，而 querySelectorAll 返回所有匹配的元素。

小结

• querySelectorAll 是一个功能强大的方法，它允许你通过 CSS 选择器来查找文档中所有匹配的 DOM 元素。
• 它返回一个静态的 NodeList，不会随着 DOM 的变化而自动更新。
• 它支持所有常见的 CSS 选择器，并且可以使用组合和伪类选择器来进行复杂查询。
• 性能方面在大量查找或复杂选择器时需要谨慎使用。

querySelectorAll 提供了灵活的方式来操作和遍历多个 DOM 元素，是现代 JavaScript 操作 DOM 的核心工具之一。

到此这篇关于JavaScript中querySelectorAll的基本用法及详细解析的文章就介绍到这了,更多相关JS中querySelectorAll详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！