The difference between the two types of
pseudo-arrays is the different behavior when
changing DOM elements. Let, for example, we
obtained a collection of paragraphs in the
form of HTMLCollection
and in the
form of NodeList
. We will then create
and add another paragraph to our DOM. In this
case, it will automatically appear in
HTMLCollection
, but the NodeList
collection will remain unchanged.
Let's look at an example. Let's have a div with paragraphs in it. Let's get our div and the same paragraphs as collections of two different types:
let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p'); // NodeList
Let's add one more paragraph to our div:
let p = document.createElement('p');
parent.append(p);
As a result, one of the collections will change, and the second one will not:
console.log(elems1); // 4 paragraphs - with new one
console.log(elems2); // 3 original paragraphs
Check how the
children
property will behave when adding
a new element.
Check how the
childNodes
property will behave when adding
a new element.