Kļūda, iegūstot elementu JavaScript

Dažreiz iesācēji programmētāji pieļauj kļūdu, izmantojot, lai iegūtu vienu DOM elementu, metodi querySelectorAll metodes vietā querySelector.

Apskatīsim šīs kļūdas raksturīgās īpašības. Pieņemsim, ka dots rindkopa:

<p>teksts</p>

Kāds programmētājs nolēma iegūt un mainīt šīs rindkopas tekstu. Lai to izdarītu, viņš iegūsa atsauci uz šo elementu mainīgajā, kļūdaini izmantojot ne to metodi:

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

Tad programmētājs mēģināja mainīt rindkopas tekstu. Tomēr rindkopas teksts nemainījās:

elem.textContent = '!!!'; // nedarbojās

Tomēr konsolē neparādījās neviena kļūda. Lieta ir tāda, ka tika izpildīta pieļaujama operācija, bet ne ar vienu elementu, bet ar grupu. Un nolasīt vai mainīt grupas elementu tekstu vienkārši tā nevar - tikai izmantojot ciklu, lai tos izietu cauri un piekļūtu katram elementam atsevišķi.

Kā atklāt kļūdu

Paskatīsimies, kā programmētājam vajadzētu rīkoties, lai atklātu šo kļūdu. Patiesībā, ar zināmu pieredzi, to ir viegli atklāt pēc raksturīgajām pazīmēm.

Pieņemsim, ka tas tomēr nav noticis. Tad pirmais programmētāja solis, meklējot kļūdas, vajadzētu būt mainīgo vērtību izvadei konsolē. Viņa gadījumā ir tikai viens mainīgais - elem. Jāizvada vērtība šī mainīgā un jāpaskatās, kas tajā atrodas:

let elem = document.querySelectorAll('p');
console.log(elem); // izvadīs masīvu, nevis vienu elementu

Konsolē uzreiz ir redzams, ka mainīgajā atrodas nevis viens elements, bet masīvs. Tas uzreiz dod acīmredzamu pavedienu par to, ka pieļauta kļūda elementa iegūšanas metodē.