Fejl ved håndtering af elementarray i JavaScript

Nogle gange forsøger begyndende programmører at arbejde med en række elementer, som om de kun har ét element. Lad os se, hvad essensen af denne fejl er.

Antag, at der er givet disse afsnit:

<p>1</p>
<p>2</p>
<p>3</p>

Antag, at en programmør besluttede at skrive den samme værdi i hvert afsnits tekst. For at gøre dette fik han referencer til disse elementer i en variabel:

let elems = document.querySelectorAll('p');

Derefter tog vores programmør fejlagtigt og tilgik vores variabel, som om der kun var ét element i den, og ikke en liste. Som et resultat vil afsnittenes tekst ikke blive ændret, men det er karakteristisk, at der heller ikke vil være nogen fejl i konsollen:

elems.textContent = '!';

Den korrekte løsning her ville være at gennemgå elementlisten med en løkke og for hvert enkelt element udføre den nødvendige operation:

for (let elem of elems) {
	elem.textContent = '!';
}