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

Разликата помеѓу двата типа на псевдо-низи е во различното однесување при промена на DOM елементите. Да претпоставиме, на пример, дека добивме колекција на параграфи во форма на HTMLCollection и во форма на NodeList. Потоа ќе создадеме и додадеме уште еден параграф во нашиот DOM. Во овој случај, тој автоматски ќе се појави во HTMLCollection, но колекцијата NodeList ќе остане непроменета.

Да погледнеме на пример. Нека имаме еден div, а во него параграфи. Да го земеме нашиот div и истите тие параграфи во вид на колекции од два различни типа:

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

Да додадеме уште еден параграф во нашиот div:

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

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

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

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

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