NodeList DOM JavaScript HTML

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 22, 2020

Section Artikel

1 Objek HTML DOM NodeList
2 Panjang Daftar Node DOM HTML
3 Perbedaan Antara HTMLCollection dan NodeList

Objek HTML DOM NodeList

Objek NodeList adalah daftar (kumpulan) node yang diekstrak dari dokumen.

Objek NodeList hampir sama dengan objek HTMLCollection.

Beberapa browser (lama) akan mengembalikan objek NodeList bukan HTMLCollection untuk metode seperti getElementsByClassName ().

Semua browser mengembalikan objek NodeList untuk properti childNodes.

Sebagian besar browser mengembalikan objek NodeList untuk metode querySelectorAll ().

Kode berikut memilih semua node <p> dalam dokumen:

Contoh:

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

Elemen dalam NodeList dapat diakses dengan nomor indeks.

Untuk mengakses node kedua Anda dapat menulis dengan kode:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"InnerHTML dari paragraf kedua adalah: " +
myNodelist[1].innerHTML;
</script>

</body>
</html>

Catatan: Indeks dimulai dari 0.

Panjang Daftar Node DOM HTML

Properti length mendefinisikan jumlah node dalam nodelist.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hellow World!</p>

<p>Hellow Norway!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML =
"Dokumen ini berisi " + myNodelist.length + " paragraf.";
</script>

</body>
</html>

Penjelasan Contoh:

Buat daftar semua elemen <p>
Tampilkan panjang dari daftar

Properti length berguna ketika Anda ingin melakukan loop melalui node dalam daftar node:

Contoh
Ubah warna dari semua elemen <p> dalam daftar node:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p> Klik tombol untuk mengubah warna semua elemen p. </p>
<button onclick="myFunction()">Klik</button>

<script>
function myFunction() {
  var myNodelist = document.querySelectorAll("p");
  var i;
  for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
  }
}
</script>

</body>
</html>

Perbedaan Antara HTMLCollection dan NodeList

HTMLCollection (bab sebelumnya) adalah kumpulan elemen HTML.

NodeList adalah kumpulan node dokumen.

NodeList dan HTMLCollection adalah hal yang hampir sama.

Baik objek HTMLCollection dan objek NodeList adalah daftar objek yang mirip dengan array.

Keduanya memiliki properti panjang yang menentukan jumlah item dalam daftar (koleksi).

Keduanya menyediakan indeks (0, 1, 2, 3, 4, …) untuk mengakses setiap item seperti array.

Item HTMLCollection dapat diakses dengan nama, id, atau nomor indeksnya.

Item NodeList hanya dapat diakses dengan nomor indeksnya.

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

Nodelist bukanlah array!
Nodelist mungkin terlihat seperti array, tetapi sebenarnya tidak.
Anda dapat melakukan loop melalui daftar node dan merujuk ke node-node tersebut seperti sebuah array.
Namun, Anda tidak dapat menggunakan Metode Array, seperti valueOf(), push(), pop(), atau join() pada nodelist.

javascript