Perbezaan antara jenis array pseudo dalam JavaScript

Perbezaan antara dua jenis array pseudo terletak pada tingkah laku yang berbeza apabila elemen DOM berubah. Katakan, sebagai contoh, kami mendapat koleksi perenggan dalam bentuk HTMLCollection dan dalam bentuk NodeList. Kemudian kami akan mencipta dan menambah satu lagi perenggan ke dalam DOM kami. Dalam kes ini, ia secara automatik akan muncul dalam HTMLCollection, tetapi koleksi NodeList akan kekal tanpa perubahan.

Mari kita lihat contoh. Katakan kita mempunyai div, dan di dalamnya terdapat perenggan. Mari dapatkan div kami dan perenggan yang sama dalam bentuk koleksi dua jenis yang berbeza:

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

Tambah satu lagi perenggan ke dalam div kami:

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

Hasilnya, satu koleksi akan berubah, manakala yang kedua - tidak:

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

Periksa bagaimana sifat children akan berkelakuan apabila menambah elemen baru.

Periksa bagaimana sifat childNodes akan berkelakuan apabila menambah elemen baru.