W języku JavaScript metoda getElementById odwołuje się do
A. zmiennej liczbowej.
B. klasy zdefiniowanej w CSS.
C. znacznika HTML o podanej nazwie klasy.
D. znacznika HTML o podanym id.
Pytanie z egzaminu CKE, czerwiec 2019 (arkusz EE.09-X-19.06).
Metoda document.getElementById() służy do pobrania z drzewa DOM elementu HTML, który ma konkretną wartość atrybutu id. Czyli jeśli w dokumencie masz element zapisany na przykład jako div id="menu", to w JavaScript możesz odwołać się do niego przez document.getElementById("menu"). Wynikiem będzie obiekt reprezentujący ten element, a nie sama nazwa znacznika ani tekst. Dzięki temu można potem zmienić jego treść, styl, klasę CSS, obsłużyć kliknięcie albo odczytać dane z formularza. Przykład praktyczny: const pole = document.getElementById("email"); pozwala dostać się do pola formularza o id="email" i np. sprawdzić jego wartość przez pole.value. Zgodnie z dobrymi praktykami id powinno być unikalne w całym dokumencie HTML, bo getElementById() zakłada właśnie taki jednoznaczny wybór. Moim zdaniem to jedna z podstawowych metod, którą warto dobrze zapamiętać, bo bardzo często pojawia się przy manipulacji DOM i prostych interaktywnych stronach.
W tym pytaniu łatwo pomylić kilka podobnych pojęć, bo JavaScript, HTML i CSS często pracują razem na tych samych elementach strony. Metoda document.getElementById() nie odwołuje się do zmiennej liczbowej. Przyjmuje ona argument tekstowy, czyli identyfikator elementu, na przykład "naglowek", ale ten tekst nie jest zwykłą zmienną liczbową ani numerem porządkowym. Jeśli podasz id elementu, metoda przeszuka dokument i zwróci odpowiedni obiekt DOM albo null, gdy nic nie znajdzie. To dość ważne w praktyce, bo potem często trzeba sprawdzać, czy element faktycznie istnieje, zanim wykona się na nim operacje.
Nie chodzi też o klasę zdefiniowaną w CSS. Klasy CSS zapisuje się zwykle przez atrybut class, a w arkuszu stylów oznacza kropką, np. .aktywny. Do pobierania elementów po klasie używa się innych mechanizmów, takich jak document.getElementsByClassName("aktywny") albo document.querySelector(".aktywny"). Z kolei id w CSS oznacza się znakiem #, na przykład #menu, ale w getElementById() nie wpisuje się tego znaku #, tylko samą nazwę id. To częsty błąd początkujących, sam kiedyś widziałem to wiele razy na zajęciach.
Niepoprawne jest również myślenie, że metoda pobiera znacznik po nazwie klasy. Nazwa klasy może wystąpić w wielu elementach jednocześnie, a id powinno wskazywać jeden konkretny element w dokumencie. Właśnie ta unikalność sprawia, że getElementById() jest szybka i wygodna do pracy z pojedynczym przyciskiem, formularzem, panelem albo komunikatem na stronie. W praktyce warto rozróżniać: id identyfikuje konkretny element, class grupuje elementy o podobnym wyglądzie lub zachowaniu, a nazwy znaczników typu div, p czy input dotyczą rodzaju elementu HTML, nie jego indywidualnego identyfikatora.
Nie chodzi też o klasę zdefiniowaną w CSS. Klasy CSS zapisuje się zwykle przez atrybut class, a w arkuszu stylów oznacza kropką, np. .aktywny. Do pobierania elementów po klasie używa się innych mechanizmów, takich jak document.getElementsByClassName("aktywny") albo document.querySelector(".aktywny"). Z kolei id w CSS oznacza się znakiem #, na przykład #menu, ale w getElementById() nie wpisuje się tego znaku #, tylko samą nazwę id. To częsty błąd początkujących, sam kiedyś widziałem to wiele razy na zajęciach.
Niepoprawne jest również myślenie, że metoda pobiera znacznik po nazwie klasy. Nazwa klasy może wystąpić w wielu elementach jednocześnie, a id powinno wskazywać jeden konkretny element w dokumencie. Właśnie ta unikalność sprawia, że getElementById() jest szybka i wygodna do pracy z pojedynczym przyciskiem, formularzem, panelem albo komunikatem na stronie. W praktyce warto rozróżniać: id identyfikuje konkretny element, class grupuje elementy o podobnym wyglądzie lub zachowaniu, a nazwy znaczników typu div, p czy input dotyczą rodzaju elementu HTML, nie jego indywidualnego identyfikatora.