W języku JavaScript, aby zmienić wartość atrybutu znacznika HTML, po uzyskaniu obiektu za pomocą metody getElementById należy skorzystać z
A. metody getAttribute.
B. pola innerHTML.
C. pola attribute i podać nazwę atrybutu.
D. metody setAttribute.
Pytanie z egzaminu CKE, czerwiec 2017 (arkusz E.14-X-17.06).
W tym przypadku chodzi o metodę setAttribute(), czyli standardowy sposób ustawiania albo zmieniania wartości atrybutu elementu w drzewie DOM. Po pobraniu elementu, np. przez document.getElementById('logo'), można wykonać document.getElementById('logo').setAttribute('src', 'nowe-logo.png'); i wtedy przeglądarka zmieni wartość atrybutu src dla wskazanego elementu. Tak samo da się ustawić np. alt, title, href, class, data-id czy disabled. Składnia jest prosta: element.setAttribute('nazwaAtrybutu', 'nowaWartość'). Moim zdaniem to jedna z tych metod, które warto znać bardzo dobrze, bo często pojawia się przy dynamicznych stronach, walidacji formularzy i obsłudze interfejsu. W praktyce wiele atrybutów można też zmieniać przez właściwości obiektu, np. element.src albo element.href, ale setAttribute() jest bardziej ogólne i jasno pokazuje, że pracujemy z atrybutem HTML. To jest zgodne z podejściem DOM API, czyli oficjalnym interfejsem przeglądarki do manipulowania dokumentem. Dobra praktyka jest taka, żeby najpierw upewnić się, że element istnieje, a dopiero potem zmieniać jego atrybut, bo inaczej można dostać błąd typu cannot read properties of null. Czyli najczęściej: const el = document.getElementById('przycisk'); if (el) el.setAttribute('disabled', 'disabled');. Proste, ale w prawdziwych projektach bardzo przydatne.
W manipulacji elementami DOM łatwo pomylić metody, bo nazwy są do siebie podobne i wszystkie dotyczą atrybutów albo zawartości elementu. getAttribute() służy jednak do odczytu wartości atrybutu, a nie do jej zmiany. Przykładowo element.getAttribute('href') zwróci aktualny adres zapisany w atrybucie href, ale sam niczego nie przestawi. To częsty błąd myślowy: skoro metoda ma w nazwie attribute, to wydaje się, że nada się do każdej operacji na atrybutach. W praktyce get oznacza pobranie, a set oznacza ustawienie, i ta konwencja występuje w wielu API, nie tylko w JavaScripcie. Pomysł z polem attribute też jest nieprecyzyjny. W DOM istnieje kolekcja attributes, czyli zbiór atrybutów elementu, ale nie korzysta się z pola attribute w taki sposób, że podaje się nazwę atrybutu i magicznie zmienia jego wartość. Można operować na element.attributes, ale jest to mniej wygodne i rzadziej używane w podstawowych zadaniach. Do normalnego ustawiania wartości lepsze i czytelniejsze jest setAttribute(). Z kolei innerHTML dotyczy zawartości wewnątrz elementu, czyli tekstu i znaczników znajdujących się między znacznikiem otwierającym i zamykającym. Nie zmienia ono atrybutów takich jak src, href, alt czy title. Co więcej, nadużywanie innerHTML bywa ryzykowne, bo przy wstawianiu danych od użytkownika można przypadkiem otworzyć drogę do ataków XSS. Z mojego doświadczenia najlepiej zapamiętać to tak: getAttribute() czyta, setAttribute() ustawia, innerHTML zmienia wnętrze elementu, a nie jego parametry. To proste rozróżnienie bardzo pomaga przy pisaniu czystego i bezpieczniejszego kodu JavaScript.