Forskjellen mellom typer pseudoarrays i JavaScript

Forskjellen mellom de to typene pseudoarrays ligger i ulik oppførsel ved endring av DOM-elementer. La oss for eksempel si at vi har fått en samling av avsnitt som en HTMLCollection og som en NodeList. Deretter oppretter og legger vi til et nytt avsnitt i vår DOM. I dette tilfellet vil det automatisk dukke opp i HTMLCollection, men samlingen NodeList vil forbli uendret.

La oss se på et eksempel. La oss si at vi har en div, og inni den er det avsnitt. Vi henter vår div og de samme avsnittene som samlinger av to forskjellige typer:

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

La oss legge til et nytt avsnitt i vår div:

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

Som et resultat vil én av samlingene endre seg, men den andre vil ikke:

console.log(elems1); // 4 avsnitt - med det nye
console.log(elems2); // 3 opprinnelige avsnitt

Sjekk hvordan egenskapen children vil oppføre seg når du legger til et nytt element.

Sjekk hvordan egenskapen childNodes vil oppføre seg når du legger til et nytt element.