Diferencia entre tipos de pseudoarrays en JavaScript

La diferencia entre los dos tipos de pseudoarrays está en el comportamiento diferente al modificar elementos del DOM. Supongamos, por ejemplo, que hemos obtenido una colección de párrafos en forma de HTMLCollection y en forma de NodeList. Luego creamos y añadimos otro párrafo a nuestro DOM. En este caso, aparecerá automáticamente en la HTMLCollection, pero la colección NodeList permanecerá sin cambios.

Veamos un ejemplo. Supongamos que tenemos un div, y dentro párrafos. Obtengamos nuestro div y los mismos párrafos en forma de colecciones de dos tipos diferentes:

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

Añadamos otro párrafo a nuestro div:

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

Como resultado, una de las colecciones cambiará, y la segunda no:

console.log(elems1); // 4 párrafos - con el nuevo
console.log(elems2); // 3 párrafos iniciales

Compruebe cómo se comportará la propiedad children al añadir un nuevo elemento.

Compruebe cómo se comportará la propiedad childNodes al añadir un nuevo elemento.