Perbedaan antara Jenis-jenis Array Semu dalam JavaScript

Perbedaan antara dua jenis array semu terletak pada perilaku yang berbeda ketika elemen DOM diubah. Misalnya, kita mendapatkan kumpulan paragraf dalam bentuk HTMLCollection dan dalam bentuk NodeList. Kemudian kita membuat dan menambahkan satu paragraf lagi ke DOM kita. Dalam hal ini, paragraf tersebut secara otomatis akan muncul di HTMLCollection, tetapi kumpulan NodeList akan tetap tidak berubah.

Mari kita lihat contohnya. Misalkan kita memiliki sebuah div, dan di dalamnya terdapat paragraf-paragraf. Kita akan mendapatkan div kita dan paragraf-paragraf yang sama dalam bentuk kumpulan dari dua jenis yang berbeda:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

Mari tambahkan satu paragraf lagi ke div kita:

let p = document.createElement('p');
parent.append(p);

Hasilnya, salah satu kumpulan akan berubah, sedangkan yang kedua - tidak:

console.log(elems1); // 4 paragraf - dengan yang baru
console.log(elems2); // 3 paragraf awal

Periksa bagaimana perilaku properti children saat menambahkan elemen baru.

Periksa bagaimana perilaku properti childNodes saat menambahkan elemen baru.