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()
轉換為真實數組 方法(僅適用於現代瀏覽器)。
NodeList
與 HTMLCollection
一個 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 訪問元素。