JavaScript · lekcja 22

DOM 3/6: zmieniamy tekst i wygląd elementu

Plan tematu (6 godzin):

Godzina 1: DOM (obiektowy model dokumentu) - strona jako drzewo obiektów
Godzina 2: znajdujemy element na stronie
Godzina 3 (dziś): zmieniamy tekst i wygląd elementu
Godzina 4: podmieniamy atrybut - src, class
Godzina 5: dodajemy nowy element na stronę
Godzina 6: powtórka - łączymy wyszukiwanie, zmianę i tworzenie

Rozgrzewka · 3 minuty

Rozgrzewka: szukanie elementu z poprzedniej lekcji

Co zwraca document.getElementById("title"), jeśli w dokumencie nie ma elementu o takim id?
Ile elementów może zwrócić document.getElementsByClassName("item")?
Jak nazywa się kolekcja, którą zwraca getElementsByClassName?

Część 1 · Zmieniamy treść: innerHTML

`innerHTML`: czytamy i podmieniamy zawartość elementu

DOM (ang. Document Object Model, obiektowy model dokumentu) to drzewo obiektów, które przeglądarka buduje ze strony - na poprzednich lekcjach szukaliście w nim elementu po id i po class. Teraz zmienicie to, co znaleziony element pokazuje.

Uzupełnienie: do samego tekstu (bez znaczników HTML) bezpieczniejszą alternatywą jest textContent - nie interpretuje wpisanego tekstu jako HTML.

Ciekawostka z Wikipedii: właściwość innerHTML nie była od początku standardem sieci. Wprowadził ją Internet Explorer 5 w 1999 roku, a inne przeglądarki skopiowały ją tylko dla zgodności ze stronami. Częścią oficjalnego standardu HTML5 stała się dopiero około 15 lat później.

MDN, Web/API/Element/innerHTML: „The innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.” - „Właściwość innerHTML interfejsu Element pobiera lub ustawia znaczniki HTML albo XML zawarte wewnątrz elementu, w obu przypadkach pomijając wszelkie drzewa cienia (shadow roots).” (tłum. własne) · „Setting the property accepts either a TrustedHTML object or a string. It parses this value as HTML and replaces all the element's descendants with the result.” - „Ustawienie tej właściwości przyjmuje obiekt TrustedHTML albo ciąg znaków. Ta wartość jest parsowana jako HTML i zastępuje wszystkich potomków elementu wynikiem.” (tłum. własne) · o textContent: MDN, Web/API/Node/textContent: „We advise against using innerHTML to get or set text inside an element because it deals with raw HTML rather than plain text and can be susceptible to XSS attacks.” - „Odradzamy używanie innerHTML do odczytu lub ustawiania samego tekstu wewnątrz elementu, bo operuje ono na surowym HTML, a nie na zwykłym tekście, i może być podatne na ataki XSS.” (tłum. własne)

Część 2 · Zmieniamy wygląd: style

`element.style`: jedna właściwość CSS na raz

Właściwość style zwraca żywy obiekt reprezentujący styl wbudowany (ang. inline) elementu - ten obiekt służy do odczytu i zmiany pojedynczych właściwości CSS, bez dotykania pozostałych.

MDN, Web/API/HTMLElement/style: „The read-only style property of the HTMLElement interface returns the inline style of an element in the form of a live CSSStyleProperties object. This object can be used to get and set the inline styles of an element.” - „Właściwość style (tylko do odczytu) interfejsu HTMLElement zwraca styl wbudowany (inline) elementu w postaci żywego obiektu CSSStyleProperties. Ten obiekt służy do odczytu i ustawiania stylów wbudowanych elementu.” (tłum. własne)

Część 3 · Łączymy przycisk ze zmianą

Atrybut `onclick`: wywołanie funkcji po kliknięciu

Atrybut onclick w znaczniku HTML podaje nazwę funkcji JavaScript, która ma się wykonać po kliknięciu przycisku. Funkcję piszecie osobno, w pliku script.js - onclick tylko ją wywołuje.

Wzorzec onclick na przycisku wywołujący funkcję: CKE, EE.09, czerwiec 2026, zadanie 39 (ten sam zapis - przycisk z onclick zmieniającym style.color akapitu)

Część 4 · Cały przykład razem

Kod: `changeText` i `paintRed`

page.html:

<p id="info">Stary tekst</p>
<button type="button" onclick="changeText()">Zmień tekst</button>
<button type="button" onclick="paintRed()">Pomaluj na czerwono</button>

script.js:

function changeText() {
  const paragraph = document.getElementById("info");
  paragraph.innerHTML = "Nowy tekst";
}

function paintRed() {
  const paragraph = document.getElementById("info");
  paragraph.style.color = "red";
}

Kod zgodny ze składnią innerHTML i style (slajdy 3-4), wzorzec onclick jak w zadaniu CKE EE.09 czerwiec 2026 zad. 39 (slajd 5)

Egzamin EE.09

Tak pytają na egzaminie

1.

W kodzie JavaScript pobrano element za pomocą metody getElementById. Aby zmodyfikować zawartość (treść) elementu można użyć właściwości

Body
HTML
innerBody
innerHTML

2.

<p id="p1" style="color:blue;">test kolorów</p> <button type="button" onclick="document.getElementById('p1').style.color='red'">test</button> Co można powiedzieć o wyświetlonym przez witrynę tekście „test kolorów”?

Po wciśnięciu przycisku test kolor tekstu jest niebieski.
Po wciśnięciu przycisku test kolor tekstu jest czerwony.
Zaraz po załadowaniu witryny kolor tekstu jest czerwony.
Wciskanie przycisku test sprawia, że kolor tekstu jest na przemian niebieski i czerwony.

CKE, EE.09, styczeń 2021, zadanie 35 · CKE, EE.09, czerwiec 2026, zadanie 39

Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: zmieniamy tekst i kolor po kliknięciu

Otwórz page.html z poprzednich lekcji. Dodaj akapit <p id="info">Stary tekst</p> i dwa przyciski: „Zmień tekst” z onclick="changeText()" oraz „Pomaluj na czerwono” z onclick="paintRed()".
W script.js napisz funkcję changeText() - pobiera element po id="info" i ustawia jego innerHTML na nowy tekst.
W tym samym pliku napisz funkcję paintRed() - pobiera ten sam element i ustawia style.color na "red".
Sprawdź w przeglądarce: otwórz page.html, kliknij oba przyciski, sprawdź, że tekst i kolor się zmieniają.
Zapisz oba pliki - na następnej lekcji dopiszecie do nich podmianę atrybutu.

Na koniec

Sprawdź się

Co robi innerHTML, gdy przypiszecie mu nowy tekst?
Czym różni się zmiana przez innerHTML od zmiany przez style.color - co dokładnie zmienia każda z nich?
Jak w HTML podpiąć funkcję JavaScript pod kliknięcie przycisku?

To tyle na dziś - kolejny temat: podmieniamy atrybut elementu.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`innerHTML` do podmiany treści	Wstawianie przez `innerHTML` tekstu wpisanego przez użytkownika grozi atakiem XSS - do samego tekstu używa się `textContent`, HTML sanitizuje się osobno	unikane (dla danych od użytkownika)
`style.color` ustawiane bezpośrednio w JS	Zamiast wielu linii `style.właściwość = ...` częściej dodaje/zdejmuje się gotową klasę CSS (`classList.toggle`)	zastępowane
Atrybut `onclick` wpisany w HTML	`addEventListener()` w osobnym pliku JS - oddziela znaczniki HTML od logiki, łatwiej utrzymać	zastępowane
Jedna właściwość na raz (`style.color`)	Frameworki (React, Vue) same przerysowują cały wygląd elementu na podstawie stanu aplikacji	rozszerzane

MDN, Web/API/Element/innerHTML i Web/API/Node/textContent (ryzyko XSS przy innerHTML)