Разлика између типова псеудо-низа у JavaScript-у

Разлика између два типа псеудо-низа је у различитом понашању при промени DOM елемената. Нека, на пример, добијемо колекцију пасуса у облику HTMLCollection и у облику NodeList. Затим ћемо креирати и додати још један пасус у наш DOM. У том случају он аутоматски ће се појавити у HTMLCollection, али колекција NodeList ће остати непромењена.

Хајде да погледамо на примеру. Нека имамо див, а у њему пасусе. Добијмо наш див и исте те пасусе у виду колекција два различита типа:

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

Додајмо још један пасус у наш див:

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

Као резултат, једна од колекција ће се променити, а друга - неће:

console.log(elems1); // 4 пасуса - са новим
console.log(elems2); // 3 почетна пасуса

Проверите, како ће се понашати својство children при додавању новог елемента.

Проверите, како ће се понашати својство childNodes при додавању новог елемента.