Razlika med tipi psevdopolep v JavaScript

Razlika med dvema tipoma psevdopolep je v različnem obnašanju pri spreminjanju DOM elementov. Recimo, da smo dobili zbirko odstavkov v obliki HTMLCollection in v obliki NodeList. Nato ustvarimo in dodamo še en odstavek v naš DOM. V tem primeru se bo samodejno pojavil v HTMLCollection, vendar bo zbirka NodeList ostala nespremenjena.

Poglejmo si primer. Naj imamo div, v njem pa odstavke. Pridobimo naš div in iste odstavke v obliki zbirk dveh različnih tipov:

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

Dodajmo še en odstavek v naš div:

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

Kot rezultat se bo ena zbirka spremenila, druga pa ne:

console.log(elems1); // 4 odstavki - z novim
console.log(elems2); // 3 začetni odstavki

Preverite, kako se bo obnašala lastnost children pri dodajanju novega elementa.

Preverite, kako se bo obnašala lastnost childNodes pri dodajanju novega elementa.