Differenza tra i tipi di pseudo-array in JavaScript

La differenza tra i due tipi di pseudo-array risiede nel diverso comportamento quando gli elementi DOM vengono modificati. Supponiamo, ad esempio, di aver ottenuto una collezione di paragrafi sia come HTMLCollection che come NodeList. Successivamente, creiamo e aggiungiamo un altro paragrafo nel nostro DOM. In questo caso, apparirà automaticamente nella HTMLCollection, ma la collezione NodeList rimarrà invariata.

Vediamo un esempio. Supponiamo di avere un div, e al suo interno dei paragrafi. Prendiamo il nostro div e gli stessi paragrafi sotto forma di collezioni di due tipi diversi:

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

Aggiungiamo un altro paragrafo al nostro div:

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

Di conseguenza, una delle collezioni cambierà, mentre la seconda no:

console.log(elems1); // 4 paragrafi - con il nuovo
console.log(elems2); // 3 paragrafi iniziali

Verifica come si comporterà la proprietà children quando aggiungi un nuovo elemento.

Verifica come si comporterà la proprietà childNodes quando aggiungi un nuovo elemento.