Model DOM — wybieranie i modyfikowanie elementów

Po co się tego uczymy?

To jest właściwy "silnik" interaktywności strony — dzięki DOM Twój kod JavaScript może realnie ZMIENIĆ to, co widzi użytkownik: podmienić tekst, dodać klasę CSS, ukryć element — wszystko bez przeładowania strony.

Teoria

DOM (Document Object Model) to sposób, w jaki przeglądarka reprezentuje dokument HTML w pamięci — jako drzewo obiektów, które JavaScript może odczytywać I MODYFIKOWAĆ na żywo, bez przeładowania strony.

Wybieranie elementów:
document.getElementById("id") — jeden element po id.
document.querySelector("selektor-css") — pierwszy pasujący element (można używać dokładnie tych samych selektorów co w CSS: .klasa, #id, tag).
document.querySelectorAll("selektor-css") — WSZYSTKIE pasujące elementy (zwraca listę, po której można iterować pętlą for...of).

Odczyt i zmiana treści:
element.textContent — zwykły tekst wewnątrz elementu.
element.innerHTML — treść jako HTML (pozwala wstawić znaczniki, ale ostrożnie z niezaufanymi danymi — ryzyko wstrzyknięcia złośliwego kodu).

Zmiana wyglądu:
element.style.color = "red"; — bezpośrednia zmiana pojedynczej właściwości CSS.
element.classList.add("klasa") / .remove("klasa") / .toggle("klasa") — dodawanie/usuwanie/przełączanie klasy CSS (lepsza praktyka niż zmiana style bezpośrednio, bo style zostają w CSS, nie w JS).

Schemat

Dokument HTML                      Model DOM (drzewo obiektów w pamięci)
<body>                                        document
  <div id="katalog">                             |
    <h2>Filmy</h2>                             body
    <p>Podróż w czasie</p>          ┌────────────┴────────────┐
  </div>                          div#katalog
</body>                          ┌──────┴──────┐
                                h2            p
                          "Filmy"      "Podróż w czasie"

Przykład z życia

Kiedy klikasz "Pokaż więcej" i lista rozwija się bez przeładowania strony, albo licznik produktów w koszyku aktualizuje się natychmiast po kliknięciu — to wszystko odczyt i modyfikacja modelu DOM.

Kod (JavaScript)

<h2 id="tytul">Katalog filmów</h2>
<button id="przyciskZmien">Zmień kolor tytułu</button>

<script>
    const tytul = document.getElementById("tytul");
    const przycisk = document.getElementById("przyciskZmien");

    przycisk.addEventListener("click", function () {
        // zmiana treści
        tytul.textContent = "Katalog filmów (odświeżony)";

        // zmiana klasy CSS zamiast bezpośredniego stylu
        tytul.classList.toggle("wyroznione");
    });

    // wybranie WSZYSTKICH elementów pasujących do selektora
    const wszystkieKarty = document.querySelectorAll(".karta-filmu");
    for (const karta of wszystkieKarty) {
        karta.style.border = "1px solid green";
    }
</script>

Komentarz i wyjaśnienie kodu

querySelectorAll(".karta-filmu") zwraca listę WSZYSTKICH elementów z klasą karta-filmu, po której można iterować dokładnie tak samo jak po zwykłej tablicy (pętla for...of z Lekcji 3). Użycie classList.toggle() zamiast bezpośredniej zmiany style jest lepszą praktyką — wygląd (kolor, obramowanie) zostaje zdefiniowany w jednym miejscu, w pliku CSS, a JavaScript tylko WŁĄCZA lub WYŁĄCZA gotową klasę.

Ćwiczenie samodzielne

Wybierz element po id i zmień jego treść tekstową po kliknięciu przycisku.

Zadania do pracy własnej

Napisz skrypt, który po kliknięciu przycisku ukrywa dowolny element (element.style.display = "none";).
Wybierz wszystkie elementy z określoną klasą (querySelectorAll) i zmień kolor tła każdego z nich w pętli.
Zbuduj katalog filmów (kilka kart z klasą karta-filmu) z przyciskiem "Podświetl drogie filmy", który przechodzi po wszystkich kartach, odczytuje cenę zapisaną w atrybucie data-cena każdej karty i dodaje klasę drogi (zmieniającą tło na żółto w CSS) tym z ceną powyżej 10 zł.

Typowe błędy

Częsty błąd to mylenie textContent z innerHTML — jeśli wstawiasz zwykły tekst pochodzący od użytkownika, zawsze używaj textContent (bezpieczne), bo innerHTML potraktuje ten tekst jako kod HTML, co przy niezaufanych danych jest realnym zagrożeniem bezpieczeństwa (podobnie jak SQL injection w PHP, Lekcja 19). Drugi błąd: próba wywołania metody DOM na wyniku querySelectorAll tak, jakby to był pojedynczy element — to LISTA elementów, trzeba po niej iterować. Trzeci: literówka w nazwie klasy lub id między HTML a JavaScript — querySelector po prostu zwróci null bez żadnego wyraźnego błędu.

Nawiązanie do egzaminu zawodowego

To bezpośrednia realizacja efektu INF.03.5.3.6 z podstawy programowej: "korzysta z funkcji modelu DOM" — jeden z kluczowych, technicznie najbardziej konkretnych efektów całej jednostki programowania po stronie klienta.