Chyba při získávání elementu v JavaScriptu

Někdy začínající programátoři dělají chybu, když pro získání jednoho DOM elementu používají metodu querySelectorAll namísto metody querySelector.

Podívejme se na charakteristické rysy této chyby. Předpokládejme, že máme odstavec:

<p>text</p>

Jistý programátor se rozhodl získat a změnit text tohoto odstavce. K tomu získal odkaz na tento prvek do proměnné, ale chybně použil nesprávnou metodu:

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

Poté se programátor pokusil změnit text odstavce. Avšak text odstavce se nezměnil:

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

Přitom se v konzoli neobjevila žádná chyba. Jde o to, že byla provedena platná operace, ale ne nad jedním prvkem, nýbrž nad skupinou. A přečíst nebo změnit text skupiny prvků jen tak nelze - pouze jejich procházením cyklem a přístupem ke každému prvku zvlášť.

Jak objevit chybu

Podívejme se, jak by měl programátor postupovat, aby tuto chybu objevil. Ve skutečnosti, s jistými zkušenostmi, je ji snadné objevit podle charakteristických znaků.

Předpokládejme však, že k tomu nedošlo. Pak by měla být prvním krokem programátora při hledání chyb výpis hodnot proměnných do konzole. V jeho případě je pouze jedna proměnná - elem. Je třeba vypsat hodnotu této proměnné a podívat se, co v ní je:

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

V konzoli je hned vidět, že v proměnné není jeden prvek, ale pole. To ihned dává zřejmou nápovědu, že byla udělána chyba v metodě pro získání prvku.