Разлика между типовете псевдомасиви в 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 при добавяне на нов елемент.