W języku JavaScript, aby odczytać wartość atrybutu elementu HTML, po uzyskaniu obiektu za pomocą metody getElementById należy użyć
A. pola innerHTML
B. metody removeAttribute
C. metody getAttribute
D. metody setAttribute
Metoda getAttribute jest właściwym wyborem, gdy po pobraniu elementu z DOM, np. przez document.getElementById('logo'), chcesz odczytać wartość jego atrybutu HTML. Typowy zapis wygląda tak: const element = document.getElementById('logo'); const opis = element.getAttribute('alt');. Wtedy JavaScript zwraca wartość atrybutu alt przypisanego do danego elementu. To jest zgodne z modelem DOM, czyli standardowym sposobem reprezentowania dokumentu HTML jako drzewa obiektów, z którym JavaScript może pracować. W praktyce używa się tego np. do odczytania href z linku, src z obrazka, title z elementu albo własnych atrybutów data-*. Moim zdaniem warto zapamiętać prostą zasadę: getAttribute służy do pobierania, setAttribute do ustawiania, a removeAttribute do usuwania atrybutu. Dobra praktyka jest też taka, żeby najpierw upewnić się, że getElementById faktycznie zwrócił element, bo jeśli identyfikator nie istnieje, dostaniesz null i próba wywołania getAttribute zakończy się błędem. W nowoczesnym kodzie często używa się też właściwości dataset dla atrybutów data-*, ale getAttribute nadal jest bardzo uniwersalne i czytelne.
W tym pytaniu łatwo pomylić pracę z zawartością elementu z pracą na jego atrybutach, bo wszystko dzieje się niby na tym samym obiekcie DOM. Pole innerHTML nie służy do odczytywania atrybutów. Ono zwraca albo ustawia kod HTML znajdujący się wewnątrz danego elementu, czyli jego zawartość. Jeśli masz na przykład element div z tekstem i innymi elementami w środku, innerHTML pokaże właśnie tę wewnętrzną strukturę, a nie wartość atrybutu id, class, href czy src. Z mojego doświadczenia to częsty błąd, bo nazwa brzmi ogólnie i ktoś zakłada, że skoro dotyczy HTML, to dotyczy wszystkiego. No nie do końca. Metoda setAttribute działa na atrybutach, ale jej zadaniem jest zapis, czyli ustawienie albo zmiana wartości. Przykładowo element.setAttribute('title', 'Opis') doda lub zmieni atrybut title, ale nie służy do jego odczytu. Z kolei removeAttribute usuwa atrybut z elementu, więc jest operacją jeszcze bardziej odległą od pobierania danych. Mylenie tych metod wynika zwykle z tego, że wszystkie mają w nazwie attribute, ale w DOM nazwy metod są dość dosłowne: get pobiera, set ustawia, remove usuwa. Poprawne podejście polega na pobraniu obiektu, np. przez document.getElementById('link'), a potem użyciu getAttribute('href'), getAttribute('class') albo getAttribute('data-id'), zależnie od tego, jaką informację chcesz odczytać. To jest czytelne, przewidywalne i zgodne z dobrymi praktykami pisania skryptów po stronie klienta.