JavaScript HTML DOM 節點列表

HTML DOM NodeList 對象

NodeList 對象是從文檔中提取的節點列表（集合）。

NodeList 對象與 HTMLCollection 對象幾乎相同。

如使用 getElementsByClassName() 方法，某些（老的）瀏覽器會返回 NodeList 對象而不是 HTMLCollection。

所有瀏覽器都會為 childNodes 屬性返回 NodeList 對象。

大多數瀏覽器會為 querySelectorAll() 方法返回 NodeList 對象。

下面的代碼選取文檔中的所有 <p> 節點：

實例

var myNodeList = document.querySelectorAll("p");

親自試一試

NodeList 中的元素可通過索引號進行訪問。

如需訪問第二個 <p> 節點，您可以這樣寫：

y = myNodeList[1];

注釋：索引從 0 開始。

HTML DOM Node List 長度

length 屬性定義節點列表中的節點數：

實例

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

親自試一試

例子解釋：

  • 創建所有 <p> 元素的列表
  • 顯示該列表的長度

length 屬性在您希望遍歷節點列表中的節點時很有用：

實例

改變節點列表中所有 <p> 元素的背景色：

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

親自試一試

HTMLCollection 與 NodeList 的區別

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文檔節點的集合。

NodeList 和 HTML 集合幾乎完全相同。

HTMLCollection 和 NodeList 對象都是類數組的對象列表（集合）。

它們都有定義列表（集合）中項目數的 length 屬性。

它們都可以通過索引 (0, 1, 2, 3, 4, ...) 像數組那樣訪問每個項目。

訪問 HTMLCollection 項目，可以通過它們的名稱、id 或索引號。

訪問 NodeList 項目，只能通過它們的索引號。

只有 NodeList 對象能包含屬性節點和文本節點。

節點列表不是數組！

節點數組看起來像數組，但并不是。

您能夠遍歷節點列表并像數組那樣引用其節點。

不過，您無法對節點列表使用數組方法，比如 valueOf()、push()、pop() 或 join()。