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

`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.

← →
↑
en ru