Błąd pobierania elementu w JavaScript

Czasami początkujący programiści popełniają błąd, używając do pobrania pojedynczego elementu DOM metody querySelectorAll zamiast metody querySelector.

Przyjrzyjmy się charakterystycznym cechom tego błędu. Załóżmy, że mamy akapit:

Pewien programista postanowił pobrać i zmienić tekst tego akapitu. Aby to zrobić, uzyskał referencję do tego elementu w zmiennej, błędnie używając niewłaściwej metody:

Następnie programista próbował zmienić tekst akapitu. Jednak tekst akapitu się nie zmienił:

Przy tym w konsoli nie pojawił się żaden błąd. Chodzi o to, że została wykonana dopuszczalna operacja, ale nie na jednym elemencie, a na grupie. A odczytanie lub zmiana tekstu grupy elementów po prostu tak nie jest możliwa - tylko poprzez przeiterowanie ich pętlą i odwołanie się do każdego elementu z osobna.

Jak wykryć błąd

Zobaczmy, jak programista powinien postępować, aby wykryć ten błąd. W rzeczywistości, posiadając pewne doświadczenie, łatwo go wykryć po charakterystycznych oznakach.

Załóżmy jednak, że tak się nie stało. Wtedy pierwszą czynnością programisty przy szukaniu błędów powinno być wypisanie wartości zmiennych do konsoli. W jego przypadku jest tylko jedna zmienna - elem. Trzeba wypisać wartość tej zmiennej i sprawdzić, co sie w niej znajduje:

W konsoli od razu widać, że w zmiennej znajduje się nie jeden element, a tablica. To od razu daje oczywistą podpowiedź, że popełniono błąd w metodzie pobierania elementu.