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:

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

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

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

Tuloksena yksi kokoelmista muuttuu, ja toinen ei:

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

Tarkista, kuinka ominaisuus children käyttäytyy uuden elementin lisäämisen yhteydessä.

Tarkista, kuinka ominaisuus childNodes käyttäytyy uuden elementin lisäämisen yhteydessä.