Chyba pri získavaní prvku v JavaScripte

Niekedy začiatoční programátori robia chybu, keď na získanie jedného DOM prvku použijú metódu querySelectorAll namiesto metódy querySelector.

Pozrime sa na charakteristické črty tejto chyby. Nech je daný odsek:

<p>text</p>

Nejaký programátor sa rozhodol získať a zmeniť text tohto odseku. Na to získal odkaz na tento prvok do premennej, ale omylom použil nesprávnu metódu:

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

Potom sa programátor pokúsil zmeniť text odseku. Avšak, text odseku sa nezmenil:

elem.textContent = '!!!'; // nefungovalo

Pri tom sa v konzole neobjavila žiadna chyba. Vec sa má tak, že bola vykonaná povolená operácia, ale nie nad jedným prvkom, ale nad skupinou. A prečítať alebo zmeniť text skupiny prvkov jednoducho tak nie je možné - len ich prechodom cyklom a prístupom ku každému prvku samostatne.

Ako objaviť chybu

Pozrime sa, ako by mal programátor konať, aby objavil túto chybu. V skutočnosti, s určitými skúsenosťami, je ju ľahké objaviť podľa charakteristických znakov.

Nech sa to však nestane. Potom prvou akciou programátora pri hľadaní chýb by mal byť výpis hodnôt premenných do konzoly. V jeho prípade je len jedna premenná - elem. Treba vypísať hodnotu tejto premennej a pozrieť sa, čo v nej leží:

let elem = document.querySelectorAll('p');
console.log(elem); // vypíše pole, a nie jeden prvok

V konzole je hneď vidieť, že v premennej nie je jeden prvok, ale pole. To hneď dáva zrejmú nápovedu o tom, že bola urobená chyba v metóde na získanie prvku.