Forskellen mellem typer af pseudo-arrays i JavaScript

Forskellen mellem de to typer pseudo-arrays ligger i deres forskellige opførsel, når DOM-elementer ændres. Lad os for eksempel antage, at vi har fået en samling af afsnit som en HTMLCollection og som en NodeList. Hvis vi derefter opretter og tilføjer endnu et afsnit til vores DOM, vil det automatisk blive vist i HTMLCollection, men samlingen NodeList forbliver uændret.

Lad os se på et eksempel. Antag, at vi har en div, og inde i den er der afsnit. Vi henter vores div og de samme afsnit som samlinger af to forskellige typer:

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

Lad os tilføje endnu et afsnit til vores div:

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

Som et resultat vil den ene samling ændre sig, men den anden vil ikke:

console.log(elems1); // 4 afsnit - med den nye
console.log(elems2); // 3 oprindelige afsnit

Undersøg, hvordan egenskaben children vil opføre sig, når et nyt element tilføjes.

Undersøg, hvordan egenskaben childNodes vil opføre sig, når et nyt element tilføjes.