Panduan Referensi NodeList DOM HTML

NodeList

NodeList adalah kumpulan objek node seperti array (senarai).

Node di dalam NodeList boleh diakses melalui indeks (dari 0).

length 屬性Kembalikan bilangan node dalam NodeList.

NodeList vs. HTMLCollection

NodeList dengan HTMLCollection Hampir sama.

Lihat penjelasan di bawah halaman.

Siapa yang mengembalikan NodeList?

Atribut childNodes

Metod querySelectorAll()

Metod getElementsByName()

Atribut dan Metod

Anda boleh gunakan atribut dan metod berikut di NodeList:

Nama Deskripsi
entries() Kembalikan iterator dengan pasangan kunci/nilai.
forEach() Lakukan fungsi balik untuk setiap node dalam senarai.
item() Kembalikan node di indeks yang ditentukan.
keys() Kembalikan iterator dengan kunci dalam senarai.
length Kembalikan bilangan node dalam NodeList.
values() Kembalikan iterator dengan nilai dalam senarai.

contoh

Pilih semua <p> Node:

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

Elemen dalam NodeList boleh diakses melalui indeks.

Untuk mencari alamat ke node <p> kedua, anda boleh menulis:

myNodeList[1]

親自試試

Peringatan:Indeks bermula daripada 0.

Panjang Senarai DOM HTML

length Aturan yang mendefinikan bilangan node dalam senarai node:

Contoh 1

myNodelist.length

親自試試

Ketika anda mahu keliling senarai node:length Aturan yang berpenting:

Contoh 2

Tukar warna semua elemen <p> dalam senarai node:

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

親自試試

不是數組

NodeList 不是一個數組！

NodeList 可能看起來像一個數組，但事實並非如此。

您可以遍歷 NodeList並使用索引引用其節點。

但是您不能在 NodeList 上使用 Array 方法，如 push()、pop() 或 join()。

HTMLCollection 與 NodeList 的區別

NodeList 與 HTMLcollection 非常相似。

兩者都是從文檔中提取的節點（元素）組成的類似數組的集合（列表）。可以通過索引號訪問節點。索引從 0 開始。

兩者都有 length 屬性，它返回列表（集合）中元素的数量。

HTMLCollection 是文檔元素的集合。

NodeList 是文檔節點（元素節點、屬性節點和文本節點）的集合。

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

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

HTMLCollection 始終是一種實時集合。例如：如果將 <li> 元素添加到 DOM 中的列表，則 HTMLCollection 中的列表也會變化。

NodeList 通常是一種靜態集合。例如：如果將 <li> 元素添加到 DOM 中的列表，則 NodeList 中的列表不會改變。

getElementsByClassName() 和 getElementsByTagName() 方法返回實時的 HTMLCollection。

querySelectorAll() 方法返回靜態 NodeList。

childNodes 屬性返回實時的 NodeList。

實時節點列表

在某一種情況下，NodeList 是實時的：DOM 中的更改會更新 NodeList。

childNodes 方法返回實時的 NodeList。