Difference between pseudo-array types in JavaScript

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:

javascriptlet 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:

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

As a result, one of the collections will change, and the second one will not:

javascriptconsole.log(elems1); // 4 paragraphs - with new one
console.log(elems2); // 3 original paragraphs