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:

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

Mari tambahkan satu paragraf lagi ke div kita:

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

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

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