JavaScript中querySelectorAll的基本用法及詳細解析

更新時間：2025年04月03日 10:28:13 作者：碼力無邊-OEC

querySelectorAll是一個用于獲取文檔中所有匹配指定選擇器的元素的方法,這篇文章主要介紹了JavaScript中querySelectorAll的基本用法及詳細解析,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

querySelectorAll 是 JavaScript 中用于查找符合指定 CSS 選擇器的所有 DOM 元素的一個方法。與 querySelector 不同，querySelectorAll 返回的是一個靜態(tài)的 NodeList，包含文檔中匹配選擇器的所有元素。

基本用法

let elements = document.querySelectorAll(selector);

selector: 這是一個 CSS 樣式規(guī)則的字符串，用于指定選擇器。
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) 規(guī)則的 li 元素（即奇數位置的元素）。

2. 返回一個靜態(tài) NodeList

querySelectorAll 返回的是一個 NodeList，這是一個類數組對象，類似于 HTMLCollection。它和真正的數組的區(qū)別主要體現在：

靜態(tài): NodeList 是靜態(tài)的，意味著即使 DOM 發(fā)生變化，NodeList 內部的元素不會更新。它是在調用 querySelectorAll 時的那一刻被捕獲的元素。
類數組: 雖然 NodeList 看起來像數組，但它不是一個真正的數組。它沒有數組的一些內建方法，比如 push() 和 pop()。不過你可以通過 forEach 方法或通過 Array.from() 將其轉為真正的數組。

遍歷: 可以通過 for...of 循環(huán)、forEach、或者基于索引的傳統(tǒng) for 循環(huán)來遍歷 NodeList。

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

// 通過 forEach 遍歷
elements.forEach(function(element) {
  console.log(element);
});

// 通過傳統(tǒng)的 for 循環(huán)遍歷
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. 偽類與組合選擇器

你可以通過組合選擇器和偽類選擇器來創(chuàng)建非常強大的查詢：

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

這將返回所有 div 元素下的第一個子元素是 p 的元素。

6. 性能考慮

因為 querySelectorAll 返回所有匹配的元素，如果選擇器非常復雜或者頁面包含大量匹配元素，可能會對性能產生影響。在需要查找大量元素時，性能開銷可能較大。對于常見的操作，通常性能差異可以忽略不計，但在大量操作中，簡化選擇器可以提高效率。

7. 與其他方法的比較

getElementsByClassName 和 getElementsByTagName
- 這些方法返回的也是類數組的 HTMLCollection，但它們是實時的，意味著如果 DOM 發(fā)生變化，HTMLCollection 會實時更新，而 NodeList 不會。
querySelector
- querySelector 只返回第一個匹配的元素，而 querySelectorAll 返回所有匹配的元素。