JavaScript w przeglądarce · Moduł 05

DOM: wyszukiwanie elementów i zmiana treści

Metody getElementById i querySelector, różnice między textContent a innerHTML oraz manipulacja wartościami value.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minWyszukiwanie elementów: getElementById oraz querySelector document.getElementById('nazwa_id') — wyszukuje element na podstawie wartości atrybutu id .
12 minModyfikacja zawartości: textContent a innerHTML element.textContent — odczytuje lub zapisuje czysty tekst .
12 minOdczyt i zapis właściwości formularza: value Odczyt: const kod = pole.value.trim(); — pobiera aktualnie wpisany przez użytkownika…
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

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.

document.getElementById('nazwa_id') — wyszukuje element na podstawie wartości atrybutu id . Jest to metoda najszybsza i najczęściej stosowana w zadaniach interfejsowych.
document.querySelector('selektor_css') — wyszukuje pierwszy element w dokumencie pasujący do podanego selektora CSS (np. '.karta' dla klasy, '#pole' dla id lub…
document.querySelectorAll('selektor_css') — wyszukuje wszystkie pasujące elementy i zwraca je w postaci kolekcji (NodeList), po której można iterować np.
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.

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

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…
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.
Jeden przycisk wstawia ten sam ciąg znaków ze znacznikami pogrubienia przez textContent , a drugi przez innerHTML .

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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>";
}

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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>";
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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 .

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).
Kluczowe operacje na właściwości value :

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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.";
}

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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.";
}

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

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…
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> )…
Odczyt: const kod = pole.value.trim(); — pobiera aktualnie wpisany przez użytkownika tekst (warto od razu wyczyścić spacje krańcowe za pomocą trim() ).

Bilet wyjściowy: Która właściwość określa stan zaznaczenia dla kontrolki typu checkbox lub radio?
Odpowiedź: a) Właściwość logiczna checked przyjmująca wartość true lub false