Skillnaden mellan typer av pseudoarrayer i JavaScript

Skillnaden mellan de två typerna av pseudoarrayer ligger i olika beteenden när DOM-element ändras. Låt oss, till exempel, säga att vi har fått en samling stycken som en HTMLCollection och som en NodeList. Sedan skapar och lägger vi till ytterligare ett stycke i vår DOM. I det här fallet kommer det automatiskt att dyka upp i HTMLCollection, men samlingen NodeList förblir oförändrad.

Låt oss titta på ett exempel. Låt oss säga att vi har en div, och inuti den finns stycken. Vi hämtar vår div och samma stycken samlingar av två olika typer:

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

Lägg till ytterligare ett stycke i vår div:

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

Som ett resultat kommer en av samlingarna att ändras, medan den andra förblir oförändrad:

console.log(elems1); // 4 stycken - med det nya
console.log(elems2); // 3 initiala stycken

Testa hur egenskapen children kommer att bete sig när ett nytt element läggs till.

Testa hur egenskapen childNodes kommer att bete sig när ett nytt element läggs till.