Diferença entre tipos de pseudoarrays em JavaScript

A diferença entre os dois tipos de pseudoarrays está no comportamento diferente quando os elementos DOM são alterados. Suponha, por exemplo, que obtivemos uma coleção de parágrafos como HTMLCollection e como NodeList. Em seguida, criamos e adicionamos mais um parágrafo ao nosso DOM. Nesse caso, ele aparecerá automaticamente na HTMLCollection, mas a coleção NodeList permanecerá inalterada.

Vamos ver um exemplo. Suponha que temos uma div e, dentro dela, parágrafos. Vamos obter nossa div e os mesmos parágrafos como coleções de dois tipos diferentes:

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

Vamos adicionar mais um parágrafo à nossa div:

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

Como resultado, uma das coleções mudará, e a outra - não:

console.log(elems1); // 4 parágrafos - com o novo
console.log(elems2); // 3 parágrafos iniciais

Verifique como a propriedade children se comportará ao adicionar um novo elemento.

Verifique como a propriedade childNodes se comportará ao adicionar um novo elemento.