Napaka pri pridobivanju elementa v JavaScriptu

Včasih začetni programerji naredijo napako, ko za pridobitev enega DOM elementa uporabijo metodo querySelectorAll namesto metode querySelector.

Poglejmo si značilne značilnosti te napake. Naj bo dan odstavek:

<p>besedilo</p>

Neki programer se je odločil, da dobi in spremeni besedilo tega odstavka. Za to je dobil povezavo na ta element v spremenljivko, pri čemer je pomotoma uporabil napačno metodo:

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

Nato je programer poskušal spremeniti besedilo odstavka. Vendar se besedilo odstavka ni spremenilo:

elem.textContent = '!!!'; // ni delovalo

Pri tem v konzoli ni prišlo do nikakršne napake. Bistvo je v tem, da je bila izvedena dovoljena operacija, vendar ne na enem elementu, temveč na skupini. Prebrati ali spremeniti besedilo skupine elementov preprosto ni mogoče - le s prebiranjem z zanko in dostopom do vsakega elementa posebej.

Kako odkriti napako

Poglejmo, kako naj bi programer ravnal, da bi odkril to napako. Pravzaprav je z nekaj izkušnjami to enostavno odkriti po značilnih znakih.

Recimo, da se tega ne zgodi. Potem mora biti prvo dejanje programerja pri iskanju napak izpis vrednosti spremenljivk v konzolo. V njegovem primeru je samo ena spremenljivka - elem. Treba je izpisati vrednost te spremenljivke in pogledati, kaj je v njej:

let elem = document.querySelectorAll('p');
console.log(elem); // izpiše seznam, ne en element

V konzoli je takoj vidno, da v spremenljivki ni en element, temveč seznam. To takoj da očitni namig, da je bila storjena napaka v metodi za pridobitev elementa.