JavaScript HTML DOM 节点列表

Objek NodeList DOM HTML

NodeList Objek adalah daftar node (koleksi) yang diambil dari dokumen.

Objek NodeList sama seperti objek HTMLCollection.

Jika menggunakan getElementsByClassName() method, beberapa (peramban lama) akan mengembalikan objek NodeList daripada HTMLCollection.

Seluruh peramban akan untuk childNodes properti mengembalikan objek NodeList.

Sebagian besar peramban akan untuk querySelectorAll() Method ini mengembalikan objek NodeList.

Kode di bawah ini memilih semua node <p> dalam dokumen:

Contoh

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

亲自试一试

Elemen dalam NodeList dapat diakses melalui nomor indeks.

Untuk mengakses node <p> kedua, Anda dapat menulis seperti ini:

y = myNodeList[1];

Komentar:Indeks dimulai dari 0.

Panjang NodeList DOM HTML

length Properti ini mendefinikan bilangan node dalam senarai node:

Contoh

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

亲自试一试

Pengertian contoh:

  • Buat senarai semua elemen <p>
  • Tunjukkan panjang senarai ini

length Properti ini sangat berkesan ketika Anda ingin melintasi daftar node dalam senarai node:

Contoh

Tukar warna latar belakang semua elemen <p> dalam senarai node:

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

亲自试一试

HTMLCollection 与 NodeList 的区别

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

NodeList 是文档节点的集合。

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

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。