Zmiana zawartości i stylów elementów (DOM)

Kontynuujemy pracę z DOM – teraz nauczymy się zmieniać zawartość elementów oraz ich styl (wygląd) za pomocą JavaScript.

textContent vs innerHTML

Każdy element DOM posiada właściwości pozwalające odczytać lub zmienić jego zawartość tekstową:

• element.textContent – zawiera czysty tekst wewnątrz elementu (bez składni HTML). Modyfikując textContent, ustawiamy tekst dokładnie taki, jak podamy (tagi HTML zostaną potraktowane jako zwykły tekst, a nie jako znaczniki).
• element.innerHTML – zawiera kod HTML wewnątrz elementu. Możemy odczytać lub przypisać fragment HTML jako string, a przeglądarka go zinterpretuje. Jeśli w innerHTML wstawimy np. "<b>pogrubiony</b>", to element w rzeczywistości otrzyma pogrubiony tekst.

Uwaga: innerHTML jest potężne, ale trzeba z nim uważać – pozwala wstrzyknąć dowolny kod HTML, co może być niebezpieczne, jeśli pochodzi od niezaufanego użytkownika (możliwe ataki XSS). Przy zwykłym użyciu we własnym kodzie jest jednak bardzo przydatne.

Przykład użycia

<div id="kontener">Stan początkowy <em>HTML</em>.</div>

let kontener = document.getElementById("kontener");
console.log(kontener.textContent); // "Stan początkowy HTML." (bez znacznika em)
console.log(kontener.innerHTML);   // "Stan początkowy <em>HTML</em>." (z oryginalnym HTML)

kontener.textContent = "Nowy <strong>tekst</strong>";
// div na stronie teraz wyświetli dosłownie: Nowy <strong>tekst</strong> (bez pogrubienia, bo traktuje jako tekst)

kontener.innerHTML = "Nowy <strong>tekst</strong>";
// teraz w divie pojawi się pogrubiony tekst "Nowy tekst" (znacznik strong zinterpretowany)

Modyfikowanie stylów (CSS)

Każdy element DOM posiada właściwość style, przez którą możemy zmieniać jego styl za pomocą JavaScript. Przykład:

let naglowek = document.querySelector("h1");
naglowek.style.color = "blue";             // zmiana koloru tekstu nagłówka na niebieski
naglowek.style.fontSize = "36px";          // zmiana rozmiaru czcionki
naglowek.style.backgroundColor = "yellow"; // ustawienie koloru tła na żółty

Zwróć uwagę, że nazwy właściwości CSS w JavaScript zapisujemy w notacji camelCase (bez myślników). Np. background-color w CSS staje się backgroundColor w JS. W ten sposób możemy dynamicznie nadawać style elementom. Powyższe właściwości .style zmieniają tzw. styl inline elementu (bezpośrednio w nim). Jeśli chcemy masowo zarządzać stylami, często lepiej jest dodawać/usuwać klasy CSS – ale to temat na później.

Przykład: zmiana koloru po kliknięciu

Połączmy wiedzę o zdarzeniach i stylach. Załóżmy, że mamy paragraf i przycisk. Chcemy, by kliknięcie w przycisk zmieniało kolor tekstu paragrafu na czerwony:

<p id="tekst">Tekst</p>
<button id="kolorBtn">Zmień kolor</button>

let tekst = document.getElementById("tekst");
let btn = document.getElementById("kolorBtn");
btn.addEventListener("click", function() {
    tekst.style.color = "red";
});

Po wykonaniu tego kodu, wciśnięcie przycisku spowoduje ustawienie stylu color paragrafu na czerwony, dzięki czemu jego treść zmieni kolor. W podobny sposób możemy zmieniać inne style lub nawet kilka na raz (kolejne linie kodu wewnątrz funkcji).

Ćwiczenia

1. Przygotuj element (np. <div id="demo"></div>) z jakimś początkowym tekstem zawierającym znacznik HTML (np. część tekstu w <strong></strong>). Za pomocą textContent i innerHTML sprawdź w konsoli różnice: co zwraca każde z nich dla Twojego elementu. Poeksperymentuj następnie z przypisywaniem nowych wartości używając tych właściwości i obserwuj, jak zmienia się zawartość na stronie.
2. Wybierz dowolny element strony i za pomocą JavaScript zmień kilka jego stylów – np. kolor tekstu, tło, rozmiar czcionki, obramowanie itp. Możesz to zrobić w konsoli na żywo (np. document.body.style.backgroundColor = "black";) albo w skrypcie po załadowaniu strony. Poeksperymentuj z różnymi właściwościami style.
3. Zrealizuj opisany przykład zmiany koloru po kliknięciu: dodaj do strony element tekstowy i przycisk, a następnie napisz skrypt, który w reakcji na kliknięcie przycisku zmieni np. kolor tekstu tego elementu (lub inny styl, który wybierzesz). Możesz spróbować dodać warunek, aby kolejne kliknięcie zmieniało kolor z powrotem do poprzedniego (czyli przełączać np. między czerwonym a czarnym).