Ero JavaScriptin pseudotaulukotyyppien välillä

Ero kahden pseudotaulukotyypin välillä on DOM-elementtien muuttuessa erilaisessa käyttäytymisessä. Oletetaan esimerkiksi, että saimme kokoelman kappaleita muodossa HTMLCollection ja muodossa NodeList. Sitten luomme ja lisäämme toisen kappaleen DOMiimme. Tässä tapauksessa se ilmestyy automaattisesti HTMLCollection:iin, mutta kokoelma NodeList pysyy muuttumattomana.

Katsotaanpa esimerkkiä. Olkoon meillä div, ja sen sisällä kappaleita. Saadaan divimme ja samat kappaleet kahden eri tyypin kokoelmina:

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

Lisätään vielä yksi kappale diviimme:

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

Tuloksena yksi kokoelmista muuttuu, ja toinen ei:

javascriptconsole.log(elems1); // 4 kappaletta - uuden kanssa
console.log(elems2); // 3 alkuperäistä kappaletta