JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript 中的 NodeList 簡介

一個NodeList object 本質上是從 HTML 文檔中獲取的節點(DOM 元素)的集合。它很像一個數組,但不支持數組方法,因為 NodeList 和數組是兩個完全不同的東西。

在本文中,您將了解什麼是 NodeList ,以及如何在 JavaScript 中使用它來遍歷 DOM 元素列表。本教程還介紹了 NodeList 之間的區別 和一個 HTMLCollection 簡要說明。

實時與靜態節點列表

一個 NodeList 可以直播靜態 ,這意味著對 DOM 的更改要么自動應用於集合,要么根本不影響集合的元素。

querySelectorAll() 方法返回一個靜態 NodeList , 而 Node.childNodes 屬性返回一個實時 NodeList .

這是一個現場 NodeList 的例子 :

const parent = document.getElementById('sidebar');

// collect children (return Live NodeList)
let childNodes = parent.childNodes;

// print length (assume "1")
console.log(childNodes.length); 

// add a new Node to parent
parent.appendChild(document.createElement('div'));

// print length again (output "2")
console.log(childNodes.length);

當您決定迭代 NodeList 時,最好記住這種區別。

創建一個NodeList

querySelectorAll() 方法可用於提取 JavaScript NodeList 文檔中的對象。以下示例選擇 all <div> 文檔中的元素:

const divs = document.querySelectorAll('div');

NodeList 中選擇特定節點 收藏,只需使用索引號(從0開始):

// select 3rd node in NodeList
const div = document.querySelectorAll('div')[2];

NodeList的長度

NodeList 內的節點數 可以通過 NodeList.length 訪問對象 屬性:

const paragraphs = document.querySelectorAll('p');

// print NodeList length
console.log(paragraphs.length);

length 屬性在迭代 NodeList 時非常有用 使用傳統的 for 循環:

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
for (let i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerText);
}

遍歷 NodeList

有幾種方法可以遍歷 NodeList JavaScript 中的對象。最簡單和最簡單的方法是使用 forEach() 方法。它為 NodeList 中的每個元素執行一次給定函數 收藏:

const paragraphs = document.querySelectorAll('p');

// iterate over all paragraphs
paragraphs.forEach((p, index) => {
    console.log(p.innerText);
});

現代瀏覽器也支持 entries() , keys() , 和 values() NodeList 上的方法 目的。在本指南中循環以了解更多在 JavaScript 中迭代 DOM 元素的方法,包括最新的 for...of 循環。

節點列表與數組

一個 NodeList 可能看起來像一個數組,但實際上,兩者是兩個不同的東西。您可以遍歷 NodeList 使用 forEach() 並使用索引值直接訪問其節點,就像數組一樣。

但是,您不能使用像 push() 這樣的數組方法 , pop() , join() , 和 valueOf() 對於 NodeList .一個 NodeList 可以使用 Array.from() 轉換為真實數組 方法(僅適用於現代瀏覽器)。

NodeListHTMLCollection

一個 NodeList 和一個 HTMLCollection 非常相同 事物。一個 HTMLCollection 基本上是 HTML 元素的集合,而 NodeList 對象由元素節點組成。所以這兩個集合都引用了相同的東西——HTML元素。

他們都有一個 length 屬性來獲取集合中的項目總數,每個項目都可以使用索引號作為數組進行訪問。但是,除了索引號,HTMLCollection 裡面的項目 可以通過他們的name訪問 和ID , 不是的東西 可以使用 NodeList 對象。

同樣,NodeList 對象可以包含屬性文本 節點。 JavaScript 的 HTMLCollection 並非如此 .

NodeList 之間的另一個相似之處 和一個 HTMLCollection 是他們不是 數組,因此您可以使用數組方法,例如 push() , pop() , join() , 和 valueOf() 對於 HTMLCollection 也是。

總結

在這篇文章中,我們看看 NodeList 對像以及如何在 JavaScript 中使用它。簡而言之:

  • 一個NodeList 是元素節點的集合 (DOM 元素)。
  • 一個NodeList 可以直播靜態 ,這意味著對 DOM 元素的修改要么立即應用於集合,要么完全忽略。
  • document.querySelectorAll() 方法可用於創建靜態 NodeList 在 JavaScript 中。
  • 您可以顯示 NodeList 內的節點總數 通過使用 length 財產。
  • JavaScript 提供了幾種迭代 NodeList 的方法 目的。最簡單的是 forEach() 方法。
  • 一個NodeList不是 一個數組,所以普通的數組方法對它不起作用。
  • 一個NodeList 非常相似HTMLCollection ,除了 NodeList 項目只能通過它們的索引號 (0, 1, 2, ....) 訪問,而 HTMLCollection 可以使用索引號、名稱或 ID 訪問元素。

Tutorial JavaScript 教程
  1. 面向對象和客觀化原則

  2. Side Hustle Projects - 這是我的,你的呢?

  3. 使用透明數據 URI 重新審視 SVG 工作流程以提高性能和漸進式開發

  4. 是的,Formik,React:不同的下拉菜單

  5. 在 CSS 中使組件/div 居中的 4 種方法

  6. 顯示/隱藏元素的反應問題

  7. Screenbean - 拉皮條你的截圖💅

  1. 提取 Javascript 數字的指數和尾數

  2. 在你的下一個 React 項目中使用 Fontsource 自託管 Google 字體

  3. 小組項目時間 - 訓練營 Scrum 團隊中的 javascript

  4. vue.js 開發者(初學者)的問題

  5. Express中的請求參數

  6. 如何讓你的 React Native 應用程序響應

  7. js交換兩個數字

  1. 使用 TypeScript、Prisma 和 Next.js 構建 Twitter 克隆

  2. 在運行時禁用 Angular 動畫

  3. 如何調試服務器端渲染

  4. #1) JavaScript 中存在哪些不同的數據類型?