Rozgrzewka: tekst i wygląd z poprzedniej lekcji

1. Co robi innerHTML, gdy przypiszecie mu nowy tekst?
2. Czym różni się zmiana przez innerHTML od zmiany przez style.color?
3. Jak w HTML podpiąć funkcję JavaScript pod kliknięcie przycisku?

getAttribute: odczytujemy wartość atrybutu

Znacznik HTML może mieć atrybuty - src (źródło obrazka), class (klasa), id i inne - zapisane wprost w kodzie jako name="value". Metoda element.getAttribute("name") odczytuje aktualną wartość podanego atrybutu z elementu, który już znaleźliście w DOM (np. przez getElementById).

<img id="photo" src="image-a.svg" alt="Ilustracja A">

const picture = document.getElementById("photo");
console.log(picture.getAttribute("src")); // result wg MDN: "image-a.svg"

Jeśli element nie ma podanego atrybutu, getAttribute nie zgłasza błędu - zwraca null (pustą wartość, brak atrybutu).

setAttribute: ustawiamy nową wartość atrybutu

Metoda element.setAttribute("name", "value") ustawia nową wartość atrybutu. Jeśli atrybut już istnieje, zostaje zaktualizowany - jeśli nie istnieje, zostaje dodany.

function swapImage() {
  const picture = document.getElementById("photo");
  picture.setAttribute("src", "image-b.svg");
}

getAttribute("src") kontra element.src

Wartość atrybutu src można odczytać na dwa sposoby: metodą getAttribute("src") albo bezpośrednio przez właściwość element.src. Właściwość src odzwierciedla atrybut src ze znacznika <img>. Dla obrazka wskazanego zwykłą nazwą pliku - tak jak w tym ćwiczeniu - oba zapisy dają ten sam efekt.

setAttribute("class", ...): zmiana etykiety elementu

Atrybut class to etykieta na elemencie - jedna nazwa albo kilka, po których CSS rozpoznaje, jak element ma wyglądać. setAttribute("class", "highlight") podmienia całą etykietę na nową (nie dokleja jej do starej).

Uzupełnienie: wygodniejszym sposobem dodania jednej klasy bez nadpisania pozostałych jest classList (np. classList.add("highlight")). Ta właściwość zawiera listę klas elementu i pozwala dodawać albo usuwać pojedyncze nazwy.

Ciekawostka z MDN: właściwość, przez którą zmieniacie klasę elementu w JavaScript, nie nazywa się class, tylko className. Słowo class jest zastrzeżone w wielu językach programowania używanych do pracy z DOM, więc nie mogło zostać nazwą właściwości - stąd className.

Tak pytają na egzaminie

<img id="image" src="kol1.jpg">
<button id="button">Przycisk</button>
<script>
document.getElementById("image").src = "kol2.jpg";
</script>

Ćwiczenie: podmieniamy obrazek po kliknięciu

1. Przygotuj dwa różne obrazki i nazwij je image-a.svg oraz image-b.svg - zapisz je w tym samym folderze co page.html.
2. W page.html dodaj obrazek <img id="photo" src="image-a.svg"> i przycisk <button onclick="swapImage()">Zamień obrazek</button>.
3. W script.js napisz funkcję swapImage() - pobiera element po id="photo" i ustawia jego atrybut src na "image-b.svg" przez setAttribute.
4. Sprawdź w przeglądarce: otwórz page.html, kliknij przycisk, sprawdź, że obrazek A zmienia się na obrazek B.

A jak to wygląda w produkcji?