MODUŁ 05

DOM: wyszukiwanie elementów i zmiana treści

PPrezentacja dla nauczyciela

W tym module poznasz Document Object Model (DOM) — most łączący kod JavaScript ze znacznikami strony HTML. Opanujesz precyzyjne odnajdywanie elementów, bezpieczną zmianę ich zawartości tekstowej i kodu HTML oraz odczytywanie wartości z formularzy.

Wyszukiwanie elementów: getElementById oraz querySelector

Document Object Model (DOM) to reprezentacja dokumentu HTML w postaci drzewa obiektów. Każdy znacznik na stronie (np. akapit, przycisk, obrazek) jest węzłem, do którego JavaScript może uzyskać dostęp, odczytać jego stan lub zmienić wygląd.

Dwie podstawowe metody wyszukiwania elementów to:

document.getElementById('nazwa_id') — wyszukuje element na podstawie wartości atrybutu id. Jest to metoda najszybsza i najczęściej stosowana w zadaniach interfejsowych. Zwraca pojedynczy obiekt elementu lub null, jeśli element o podanym identyfikatorze nie istnieje. Pamiętaj: atrybut id w poprawnym dokumencie HTML musi być unikalny!
document.querySelector('selektor_css') — wyszukuje pierwszy element w dokumencie pasujący do podanego selektora CSS (np. '.karta' dla klasy, '#pole' dla id lub 'input[type="number"]' dla atrybutu).
document.querySelectorAll('selektor_css') — wyszukuje wszystkie pasujące elementy i zwraca je w postaci kolekcji (NodeList), po której można iterować np. pętlą forEach().

Zwróconą referencję do elementu zawsze warto zapisać w stałej const, aby nie zmuszać przeglądarki do wielokrotnego przeszukiwania całego drzewa DOM przy każdej operacji.

W poniższym przykładzie odnajdujemy element o identyfikatorze glownaKarta i nadajemy mu klasę wyróżnienia. Zobacz działanie w edytorze kodu:

function wyroznijElementy() {
    const karta = document.getElementById("glownaKarta");
    karta.classList.toggle("wyrozniona");
}

1. Co zwraca metoda document.getElementById, jeżeli w dokumencie nie ma elementu o podanym identyfikatorze?

Zwraca wartość specjalną null oznaczającą brak znalezionego obiektu Zwraca pusty obiekt węzła ze wszystkimi właściwościami ustawionymi na zero Powoduje natychmiastowe zatrzymanie przeglądarki i zgłasza błąd krytyczny Tworzy automatycznie nowy pusty element div na samym końcu sekcji body

2. Jaka jest kluczowa różnica między metodami querySelector oraz querySelectorAll w obiekcie document?

querySelector przyjmuje tylko nazwy klas, a querySelectorAll wyłącznie identyfikatory querySelector zwraca pierwszy pasujący element, a querySelectorAll całą kolekcję querySelector działa tylko dla elementów nagłówka, a querySelectorAll dla formularzy querySelector wymaga podania atrybutu title, a querySelectorAll odczytuje atrybut alt

3. W jaki sposób należy zapisać selektor klasy w argumencie metody document.querySelector?

Poprzedzając nazwę klasy znakiem gwiazdki w cudzysłowie tekstowym Wpisując nazwę klasy w nawiasach kwadratowych z symbolem tyldy Poprzedzając nazwę klasy znakiem kropki, na przykład kropka karta Stosując prefiks słowa class dwukropek przed właściwą nazwą klasy

Modyfikacja zawartości: textContent a innerHTML

Gdy odnajdziemy już element na stronie, najczęstszą operacją jest zmiana wyświetlanej w nim zawartości. Służą do tego dwie właściwości, które różnią się sposobem interpretacji wprowadzanych danych:

element.textContent — odczytuje lub zapisuje czysty tekst. Jeśli przypiszemy do tej właściwości tekst zawierający znaczniki HTML (np. <b>napis</b>), przeglądarka nie zinterpretuje ich jako elementów strony, lecz wyświetli je dosłownie jako zwykły tekst. Jest to właściwość bezpieczna, szybka i zalecana przy wypisywaniu wyników obliczeń, komunikatów czy imion użytkowników.
element.innerHTML — odczytuje lub zapisuje kod HTML. Przeglądarka parsuje przypisany ciąg znaków i tworzy wewnątrz elementu nowe węzły DOM. Używamy jej wtedy, gdy celowo chcemy wstawić sformatowany fragment (np. listę pozycji, tabelę lub pogrubienie), a także gdy chcemy błyskawicznie wyczyścić całą zawartość kontenera za pomocą zapisu kontener.innerHTML = "";.

Jeden przycisk wstawia ten sam ciąg znaków ze znacznikami pogrubienia przez textContent, a drugi przez innerHTML.

Porównaj w edytorze działanie obu właściwości i zobacz różnicę w interpretacji:

function wstawJakoText() {
    const obszar = document.getElementById("obszarPodgladu");
    obszar.textContent = "<strong>Ten tekst nie jest pogrubiony</strong>";
}

function wstawJakoHtml() {
    const obszar = document.getElementById("obszarPodgladu");
    obszar.innerHTML = "<strong style=\"color:#15803d\">Ten tekst jest pogrubiony jako HTML!</strong>";
}

4. Co stanie się po przypisaniu do właściwości textContent napisu zawierającego znaczniki pogrubienia b?

Znaczniki b zostaną zinterpretowane i tekst wyświetli się jako pogrubiony Przeglądarka usunie znaczniki i wyświetli sam tekst bez żadnych liter b Zostanie zgłoszony błąd bezpieczeństwa uniemożliwiający zmianę zawartości Znaczniki zostaną potraktowane dosłownie i pojawią się jako zwykły tekst

5. Kiedy programista powinien zastosować właściwość innerHTML zamiast właściwości textContent?

Gdy zamierza wstawić do elementu sformatowany kod HTML lub wyczyścić kontener Gdy wstawia do akapitu wyłącznie wynik liczbowy bez formatowania stylami Gdy odczytuje hasło wprowadzone przez użytkownika w formularzu logowania Gdy pobiera wartość atrybutu src przypisanego do wyświetlanego zdjęcia

6. W jaki sposób można najszybciej usunąć wszystkie elementy potomne z wnętrza kontenera o identyfikatorze lista?

Ustawiając właściwość hidden kontenera na wartość logiczną true w skrypcie Przypisując pusty ciąg znaków do właściwości innerHTML tego kontenera Wywołując metodę removeChild bez podawania jakichkolwiek parametrów węzła Zmieniając wartość atrybutu class kontenera na słowo kluczowe delete

Odczyt i zapis właściwości formularza: value

Elementy formularza, takie jak pola jednoliniowe (<input type="text">, <input type="number">), pola wieloliniowe (<textarea>) oraz listy wyboru (<select>), przechowują swoją aktualną zawartość we właściwości .value.

Kluczowe operacje na właściwości value:

Odczyt: const kod = pole.value.trim(); — pobiera aktualnie wpisany przez użytkownika tekst (warto od razu wyczyścić spacje krańcowe za pomocą trim()).
Zapis / podmiana: pole.value = "nowa wartość"; — programowo zmienia tekst wyświetlany wewnątrz kontrolki formularza.
Czyszczenie: pole.value = ""; — resetuje zawartość pola tekstowego do pustego ciągu (np. po pomyślnym dodaniu komentarza lub wysłaniu wiadomości na czacie).

Warto pamiętać: dla pól tekstowych i liczbowych stosujemy właściwość value, natomiast dla pól wyboru (checkboxów i przycisków radiowych) sprawdzamy właściwość logiczną checked.

W poniższym przykładzie sprawdzamy wprowadzony kod rabatowy i wyświetlamy potwierdzenie, a drugi przycisk czyści pole tekstowe przez przypisanie pustego łańcucha znaków. Przetestuj działanie programu:

function zastosujKod() {
    const pole = document.getElementById("poleKodu");
    const kod = pole.value.trim().toLowerCase();
    const komunikat = document.getElementById("komunikatKodu");

    if (kod === "lato2026") {
        komunikat.textContent = "Kod zaakceptowany: zniżka 15% została naliczona!";
        komunikat.style.color = "#15803d";
    } else {
        komunikat.textContent = "Nieprawidłowy kod promocyjny.";
        komunikat.style.color = "#b91c1c";
    }
}

function wyczyscKod() {
    document.getElementById("poleKodu").value = "";
    document.getElementById("komunikatKodu").textContent = "Pole zostało wyczyszczone.";
}

7. Za pomocą której właściwości odczytujemy tekst wpisany przez użytkownika w polu input formularza?

Za pomocą właściwości innerText reprezentującej tekst wewnątrz znacznika Za pomocą właściwości textContent odczytującej zawartość węzłów potomnych Za pomocą właściwości value przechowującej aktualną wartość kontrolki Za pomocą właściwości content zwracającej obiekt danych wejściowych pola

8. W jaki sposób programowo wyczyścić pole tekstowe formularza o pobranej referencji poleImie?

Wywołując na obiekcie kontrolki metodę clearInput bez argumentów Zmieniając typ kontrolki z typu tekstowego na typ ukryty hidden Ustawiając właściwość display kontrolki na wartość none w arkuszu Przypisując pusty ciąg znaków do właściwości value tej kontrolki

9. Która właściwość określa stan zaznaczenia dla kontrolki typu checkbox lub radio?

Właściwość logiczna checked przyjmująca wartość true lub false Właściwość selected przechowująca liczbę kliknięć użytkownika Właściwość active informująca o obecności kursora myszy na polu Właściwość enabled określająca dostępność elementu na stronie

DOM: wyszukiwanie elementów i zmiana treści

Wyszukiwanie elementów: getElementById oraz querySelector

Modyfikacja zawartości: textContent a innerHTML

Odczyt i zapis właściwości formularza: value

Ćwiczenia