Greška pri dobijanju elementa u JavaScript-u

Ponekad programeri početnici prave grešku, koristeći za dobijanje jednog DOM elementa metod querySelectorAll umesto metoda querySelector.

Hajde da pogledamo karakteristične osobine ove greške. Neka je dat paragraf:

<p>tekst</p>

Izvesni programer je rešio da dobije i promeni tekst ovog paragrafa. Za to je dobio referencu na ovaj element u promenljivu, pogrešno koristivši pogrešan metod:

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

Zatim je programer pokušao da promeni tekst paragrafa. Međutim, tekst paragrafa se nije promenio:

elem.textContent = '!!!'; // nije uspelo

Pri tome nijedna greška u konzoli se nije pojavila. Stvar je u tome da je izvršena dopuštena operacija, ali ne nad jednim elementom, već nad grupom. A pročitati ili promeniti tekst grupe elemenata tako jednostavno ne može - samo prelistavši ih petljom i obrativši se svakom elementu pojedinačno.

Kako otkriti grešku

Hajde da pogledamo, kako programer treba da postupi, da bi otkrio ovu grešku. Zapravo, posedujući određeno iskustvo, lako se otkriva po karakterističnim znakovima.

Neka se to, međutim, nije desilo. Tada prva radnja programera pri traženju grešaka treba da bude ispisivanje vrednosti promenljivih u konzolu. U njegovom slučaju postoji samo jedna promenljiva - elem. Potrebno je ispisati vrednost ove promenljive i pogledati, šta u njoj leži:

let elem = document.querySelectorAll('p');
console.log(elem); // ispisaće niz, a ne jedan element

U konzoli se odmah vidi, da u promenljivoj nije jedan element, već niz. Ovo odmah daje očiglednu naznaku o tome, da je dopuštena greška u metodu za dobijanje elementa.