Razlika između tipova pseudo-nizova u JavaScript-u

Razlika između dva tipa pseudo-nizova ogleda se u različita ponašanja prilikom promene DOM elemenata. Recimo, na primer, da smo dobili kolekciju pasusa u obliku HTMLCollection i u obliku NodeList. Zatim ćemo kreirati i dodati još jedan pasus u naš DOM. U tom slučaju, on će automatski se pojaviti u HTMLCollection, ali kolekcija NodeList će ostati nepromenjena.

Hajde da pogledamo primer. Neka postoji div, a u njemu pasusi. Dobjimo naš div i iste te pasuse u obliku kolekcija dva različita tipa:

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

Dodajmo još jedan pasus u naš div:

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

Kao rezultat, jedna od kolekcija će se promeniti, a druga - neće:

console.log(elems1); // 4 pasusa - sa novim
console.log(elems2); // 3 početna pasusa

Proverite kako će se ponašati svojstvo children pri dodavanju novog elementa.

Proverite kako će se ponašati svojstvo childNodes pri dodavanju novog elementa.