Klaida gaunant elementą JavaScript

Kartais pradedantieji programuotojai daro klaidą, naudodami vienam DOM elementui gauti metodą querySelectorAll vietoj metodo querySelector.

Pažiūrėkime į būdingus šios klaidos požymius. Tarkime, duotas pastraipa:

<p>textas</p>

Kažkoks programuotojas nusprendė gauti ir pakeisti šios pastraipos tekstą. Tam jis gavo nuorodą į šį elementą į kintamąjį, klaidingai panaudojęs ne tą metodą:

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

Tada programuotojas bandė pakeisti pastraipos tekstą. Tačiau pastraipos tekstas nepasikeitė:

elem.textContent = '!!!'; // neveikė

Be to, konsolėje neatsirado jokios klaidos. Reikalas tas, kad buvo atliktas leidžiamas veiksmas, bet ne su vienu elementu, o su grupe. O perskaityti arba pakeisti grupės elementų tekstą tiesiog taip negalima - tik pereinant juos ciklu ir kreipiantis į kiekvieną elementą atskirai.

Kaip aptikti klaidą

Pažiūrėkime, kaip programuotojas turėtų elgtis, norėdamas aptikti šią klaidą. Tiesą sakant, turint tam tikrą patirtį, ją lengva aptikti pagal būdingus požymius.

Tarkime, kad taip neatsitiko. Tada pirmuoju programuotojo veiksmu ieškant klaidų turėtų būti kintamųjų reikšmių išvedimas į konsolę. Jo atveju yra tik vienas kintamasis - elem. Reikia išvesti reikšmę šio kintamojo ir pažiūrėti, kas jame yra:

let elem = document.querySelectorAll('p');
console.log(elem); // išves masyvą, o ne vieną elementą

Konsolėje iš karto matyti, kad kintamajame yra ne vienas elementas, o masyvas. Tai iš karto duoda akivaizdų užuominą apie tai, kad buvo padaryta klaida naudojant elementų gavimo metodą.