Fejl ved hentning af element i JavaScript

Sommetider begynder programmører en fejl, ved at bruge til at hente et enkelt DOM-element metoden querySelectorAll i stedet for metoden querySelector.

Lad os se på de karakteristiske træk ved denne fejl. Antag der er et afsnit:

<p>tekst</p>

En programmør besluttede at hente og ændre teksten i dette afsnit. For at gøre dette fik han en reference til dette element i en variabel, ved fejlagtigt at bruge den forkerte metode:

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

Derefter forsøgte programmøren at ændre teksten i afsnittet. Men teksten i afsnittet ændrede sig ikke:

elem.textContent = '!!!'; // virkede ikke

Samtidig dukkede der ingen fejl op i konsollen. Faktum er, at en tilladt operation blev udført, men ikke på ét element, men på en gruppe. Og at læse eller ændre teksten for en gruppe af elementer kan ikke gøres direkte - kun ved at gennemløbe dem med en løkke og tilgå hvert element individuelt.

Sådan finder du fejlen

Lad os se, hvordan en programmør skal handle for at opdage denne fejl. Med en vis erfaring er den faktisk let at opdage ved dens karakteristiske kendetegn.

Antag, at dette ikke sker. Så skal programmørens første handling ved fejlsøgning være at udskrive værdierne af variabler i konsollen. I dette tilfælde er der kun én variabel - elem. Det er nødvendigt at udskrive værdien af denne variabel og se, hvad der er i den:

let elem = document.querySelectorAll('p');
console.log(elem); // vil udskrive et array, ikke et enkelt element

I konsollen er det umiddelbart tydeligt, at variablen ikke indeholder ét element, men et array. Dette giver straks en oplagt indikation af, at der er begået en fejl i metoden til at hente elementet.