Daftar Node 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() metode, beberapa (peramban yang lama) akan mengembalikan objek NodeList daripada HTMLCollection.

Seluruh peramban akan untuk childNodes properti mengembalikan objek NodeList.

Sebagian besar peramban akan untuk querySelectorAll() Metode 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];

Keterangan:Indeks dimulai dari 0.

Panjang NodeList DOM HTML

panjang Properti ini menentukan jumlah node dalam daftar node:

Contoh

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

}

Pengertian contoh:

  • Buat daftar semua elemen <p>
  • Tampilkan panjang daftar ini

panjang Properti ini sangat berguna saat Anda ingin mengelilingi node dalam daftar node:

Contoh

Ubah warna latar belakang semua elemen <p> dalam daftar node:

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

}

Coba Sendiri

Perbedaan HTMLCollection dan NodeList

HTMLCollection (di bab sebelumnya) adalah koleksi elemen HTML.

NodeList adalah koleksi node dokumen.

Objek HTMLCollection dan NodeList adalah daftar objek list (koleksi) yang seperti array.

Mereka semua memiliki definisi daftar (koleksi) bilangan item. panjang Atribut.

Mereka semua dapat diakses melalui indeks (0, 1, 2, 3, 4, ...) seperti array.

Akses item HTMLCollection dapat melalui nama, id, atau indeks.

Akses item NodeList hanya melalui indeks mereka.

Hanya objek NodeList yang dapat mengandung node atribut dan node teks.

Daftar node bukan array!

Daftar node terlihat seperti array, tetapi bukan.

Anda dapat mengelilingi daftar node dan mengacu ke node nya seperti array.

Namun, Anda tidak dapat menggunakan metode array untuk daftar node, seperti valueOf()、push()、pop() atau join().