前言

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

基本用法

let elements = document.querySelectorAll(selector);

• selector: 這是一個(gè) CSS 樣式規(guī)則的字符串，用于指定選擇器。
• elements: 返回一個(gè)包含所有匹配元素的 NodeList（類數(shù)組對(duì)象）。如果沒(méi)有匹配項(xiàng)，返回的 NodeList 是空的。

詳細(xì)解析

1. 支持的選擇器

querySelectorAll 支持的選擇器與 querySelector 完全相同。它們的語(yǔ)法和功能與 CSS 選擇器保持一致。常見(jiàn)的選擇器有：

• ID選擇器: #id

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

  通常不需要使用 ID 選擇器，因?yàn)?ID 是唯一的，但技術(shù)上仍然可以使用。

• 類選擇器: .class

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

  返回所有 class 為 myClass 的元素。

• 標(biāo)簽選擇器: 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 的元素內(nèi)部的所有 class="item" 的元素。

• 偽類選擇器: :pseudo-class

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

  返回所有滿足 nth-child(odd) 規(guī)則的 li 元素（即奇數(shù)位置的元素）。

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

querySelectorAll 返回的是一個(gè) NodeList，這是一個(gè)類數(shù)組對(duì)象，類似于 HTMLCollection。它和真正的數(shù)組的區(qū)別主要體現(xiàn)在：

• 靜態(tài): NodeList 是靜態(tài)的，意味著即使 DOM 發(fā)生變化，NodeList 內(nèi)部的元素不會(huì)更新。它是在調(diào)用 querySelectorAll 時(shí)的那一刻被捕獲的元素。

• 類數(shù)組: 雖然 NodeList 看起來(lái)像數(shù)組，但它不是一個(gè)真正的數(shù)組。它沒(méi)有數(shù)組的一些內(nèi)建方法，比如 push() 和 pop()。不過(guò)你可以通過(guò) forEach 方法或通過(guò) Array.from() 將其轉(zhuǎn)為真正的數(shù)組。

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

  let elements = document.querySelectorAll('.myClass');
  
  // 通過(guò) forEach 遍歷
  elements.forEach(function(element) {
    console.log(element);
  });
  
  // 通過(guò)傳統(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. 沒(méi)有找到匹配的元素

如果 querySelectorAll 沒(méi)有找到任何匹配的元素，它返回一個(gè)空的 NodeList，而不是 null。因此不需要像 querySelector 那樣檢查是否返回 null。

let elements = document.querySelectorAll('.nonExistentClass');
console.log(elements.length); // 0，表示沒(méi)有找到匹配項(xiàng)

4. 作用域

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

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

這將在 container 元素的范圍內(nèi)，查找所有具有 .item 類的元素。

5. 偽類與組合選擇器

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

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

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

6. 性能考慮

因?yàn)?nbsp;querySelectorAll 返回所有匹配的元素，如果選擇器非常復(fù)雜或者頁(yè)面包含大量匹配元素，可能會(huì)對(duì)性能產(chǎn)生影響。在需要查找大量元素時(shí)，性能開(kāi)銷可能較大。對(duì)于常見(jiàn)的操作，通常性能差異可以忽略不計(jì)，但在大量操作中，簡(jiǎn)化選擇器可以提高效率。

7. 與其他方法的比較

• getElementsByClassName 和 getElementsByTagName

  • 這些方法返回的也是類數(shù)組的 HTMLCollection，但它們是實(shí)時(shí)的，意味著如果 DOM 發(fā)生變化，HTMLCollection 會(huì)實(shí)時(shí)更新，而 NodeList 不會(huì)。

• querySelector

  • querySelector 只返回第一個(gè)匹配的元素，而 querySelectorAll 返回所有匹配的元素。

小結(jié)

• querySelectorAll 是一個(gè)功能強(qiáng)大的方法，它允許你通過(guò) CSS 選擇器來(lái)查找文檔中所有匹配的 DOM 元素。
• 它返回一個(gè)靜態(tài)的 NodeList，不會(huì)隨著 DOM 的變化而自動(dòng)更新。
• 它支持所有常見(jiàn)的 CSS 選擇器，并且可以使用組合和偽類選擇器來(lái)進(jìn)行復(fù)雜查詢。
• 性能方面在大量查找或復(fù)雜選擇器時(shí)需要謹(jǐn)慎使用。

querySelectorAll 提供了靈活的方式來(lái)操作和遍歷多個(gè) DOM 元素，是現(xiàn)代 JavaScript 操作 DOM 的核心工具之一。

到此這篇關(guān)于JavaScript中querySelectorAll的基本用法及詳細(xì)解析的文章就介紹到這了,更多相關(guān)JS中querySelectorAll詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論