Différence entre les types de pseudo-tableaux en JavaScript

La différence entre les deux types de pseudo-tableaux réside dans leur comportement différent lors de la modification des éléments DOM. Supposons, par exemple, que nous ayons obtenu une collection de paragraphes sous forme de HTMLCollection et sous forme de NodeList. Ensuite, nous créons et ajoutons un autre paragraphe dans notre DOM. Dans ce cas, il apparaîtra automatiquement dans la HTMLCollection, mais la collection NodeList restera inchangée.

Regardons un exemple. Disons que nous avons une div, et dedans des paragraphes. Récupérons notre div et les mêmes paragraphes sous forme de collections de deux types différents :

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

Ajoutons un autre paragraphe dans notre div :

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

En conséquence, une des collections changera, et la seconde - non :

console.log(elems1); // 4 paragraphes - avec le nouveau
console.log(elems2); // 3 paragraphes initiaux

Vérifiez comment se comportera la propriété children lors de l'ajout d'un nouvel élément.

Vérifiez comment se comportera la propriété childNodes lors de l'ajout d'un nouvel élément.