Verschil tussen typen pseudo-arrays in JavaScript

Het verschil tussen de twee typen pseudo-arrays ligt in het verschillende gedrag bij het wijzigen van DOM-elementen. Stel dat we een verzameling alinea's hebben verkregen als een HTMLCollection en als een NodeList. Vervolgens maken we nog een alinea aan en voegen deze toe aan onze DOM. In dat geval zal deze automatisch verschijnen in de HTMLCollection, maar de verzameling NodeList zal ongewijzigd blijven.

Laten we een voorbeeld bekijken. Stel we hebben een div, en daarin alinea's. We halen onze div en dezelfde alinea's op als verzamelingen van twee verschillende typen:

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

Laten we nog een alinea toevoegen aan onze div:

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

Het resultaat is dat de ene verzameling zal veranderen, en de tweede - niet:

console.log(elems1); // 4 alinea's - met de nieuwe
console.log(elems2); // 3 initiële alinea's

Controleer hoe de eigenschap children zich gedraagt bij het toevoegen van een nieuw element.

Controleer hoe de eigenschap childNodes zich gedraagt bij het toevoegen van een nieuw element.