Feil ved henting av element i JavaScript
Noen ganger gjør nybegynnere programmere feil
ved å bruke metoden querySelectorAll i stedet for metoden
querySelector for å hente ett DOM-element.
La oss se på de karakteristiske trekkene ved denne feilen. La det være gitt et avsnitt:
<p>tekst</p>
En programmerer bestemte seg for å hente og endre teksten i dette avsnittet. For å gjøre dette fikk han en referanse til dette elementet i en variabel, ved feil å bruke feil metode:
let elem = document.querySelectorAll('p');
Deretter prøvde programmereren å endre teksten i avsnittet. Men teksten i avsnittet endret seg ikke:
elem.textContent = '!!!'; // virket ikke
Samtidig dukket det ikke opp noen feil i konsollen. Grunnen er at en gyldig operasjon ble utført, men ikke på ett element, men på en gruppe. Og å lese eller endre teksten til en gruppe elementer kan man ikke bare gjøre - man må gå gjennom dem med en loop og henvende seg til hvert element hver for seg.
Hvordan oppdage feilen
La oss se på hvordan programmereren burde handle for å oppdage denne feilen. Med litt erfaring er den faktisk lett å oppdage ved sine karakteristiske trekk.
La oss likevel anta at dette ikke skjedde. Da
burde programmererens første handling ved feilsøking
være å skrive ut verdiene til variablene
i konsollen. I dette tilfellet er det bare
en variabel - elem. Man må skrive ut verdien
av denne variabelen og se hva
den inneholder:
let elem = document.querySelectorAll('p');
console.log(elem); // vil skrive ut en array, ikke ett element
I konsollen ser man umiddelbart at variabelen ikke inneholder ett element, men en array. Dette gir umiddelbart en opplagt hint om at det er begått en feil i metoden for å hente elementet.
