Panduan Referensi NodeList DOM HTML

NodeList

NodeList adalah koleksi seperti array dari objek node (daftar).

Node dalam NodeList dapat diakses melalui indeks (dari 0).

Atribut lengthKembalikan jumlah node dalam NodeList.

NodeList vs. HTMLCollection

NodeList dengan HTMLCollection Hampir sama.

Lihat penjelasan di bawah halaman.

Siapa yang mengembalikan NodeList?

Properti childNodes

Metode querySelectorAll()

Metode getElementsByName()

Properti dan Metode

Anda dapat menggunakan properti dan metode berikut di NodeList:

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

contoh

Pilih semua <p> Node:

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

Elemen dalam NodeList dapat diakses melalui nomor indeks.

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

myNodeList[1]

Coba sendiri

Perhatian:Indeks dimulai dari 0.

Panjang Daftar Node DOM HTML

length Atribut menentukan jumlah node dalam daftar node:

Contoh 1

myNodelist.length

Coba sendiri

Ketika Anda ingin menggali melalui node dalam daftar node:length Atribut yang sangat bermanfaat:

Contoh 2

Ubah warna semua elemen <p> dalam daftar node:

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

Coba sendiri

Bukan array

NodeList bukan array!

NodeList terlihat seperti array, tetapi bukan seperti itu.

Anda dapat menggali NodeList dan menggunakan referensi indeks untuk node nya.

Tetapi Anda tidak dapat menggunakan metode array seperti push(), pop(), atau join() di NodeList.

Perbedaan antara HTMLCollection dan NodeList

NodeList dengan HTMLcollection Sama seperti

Keduanya adalah koleksi seperti array yang terdiri dari node (elemen) yang diambil dari dokumen. Node dapat diakses melalui indeks. Indeks dimulai dari 0.

Keduanya mempunyai Atribut lengthyang mengembalikan jumlah elemen (koleksi) dalam daftar (koleksi).

HTMLCollection adalahElemen dokumenKoleksi.

NodeList adalahNode dokumenKoleksi (node elemen, node atribut, dan node teks).

Item HTMLCollection dapat diakses melalui nama, id, atau indeksnya.

Item NodeList hanya dapat diakses melalui indeksnya.

HTMLCollection selalu adalah jenisNyataKoleksi. Contoh: Jika menambahkan elemen <li> ke dalam daftar DOM, daftar di HTMLCollection juga akan berubah.

NodeList biasanya adalah jenisStatisKoleksi. Contoh: Jika menambahkan elemen <li> ke dalam daftar DOM, daftar di NodeList tidak akan berubah.

getElementsByClassName() dan getElementsByTagName() Metode mengembalikan HTMLCollection yang nyata.

querySelectorAll() Metode mengembalikan NodeList yang statis.

childNodes Atribut mengembalikan NodeList yang nyata.

Daftar node yang nyata

Dalam beberapa kasus, NodeList adalahNyata：Perubahan DOM akan memperbarui NodeList.

childNodes Metode mengembalikan NodeList yang nyata.