Model DOM: znajdowanie elementów i zmiana treści

Do tej pory twoje skrypty rozmawiały z tobą przez konsolę i okienka. Od tej lekcji zaczynają zmieniać stronę: podmieniać tekst akapitu, pogrubiać nagłówki, wpisywać wynik obliczenia pod przyciskiem. Pośrednikiem jest DOM (Document Object Model) – obiektowy model dokumentu, czyli HTML strony widziany przez JavaScript jako drzewo obiektów. Każde zadanie praktyczne INF.03 z JavaScriptem zaczyna się od znalezienia elementu w tym drzewie, a w testach pisemnych DOM to najczęstszy temat „kliencki”.

Drzewo DOM

Gdy przeglądarka wczytuje HTML, buduje z niego drzewo: każdy znacznik staje się węzłem elementu (element node), a tekst wewnątrz – węzłem tekstowym (text node). Korzeniem jest obiekt document, pod nim <html>, dalej <head> i <body> i tak w głąb. Element wewnątrz innego to jego dziecko (child), element nad nim – rodzic (parent), elementy obok – rodzeństwo (siblings).

Odpowiada mu taki HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Sklep</title>
</head>
<body>
  <h1>Oferta</h1>
  <p id="opis">Dziś promocja</p>
  <ul class="lista">
    <li>Chleb</li>
    <li>Masło</li>
    <li>Mleko</li>
  </ul>
  <button id="kup">Kup</button>
</body>
</html>

JavaScript nie pracuje na pliku .html – pracuje na tym drzewie. Zmiana węzła natychmiast zmienia to, co widać na ekranie, a plik na dysku zostaje nietknięty.

Obiekt document ma gotowe skróty do najważniejszych węzłów:

<h1>Oferta</h1>
<p id="opis">Dziś promocja</p>
<p id="info"></p>

console.log(document.title);                 // tytuł z <title> (tu pusty – plac zabaw nie ma <head>)
console.log(document.body.children.length);  // liczba elementów bezpośrednio w <body>
console.log(document.documentElement.tagName); // HTML

document.title = 'Sklep – promocje';         // zmiana tytułu karty
document.getElementById('info').textContent =
  'Na stronie są ' + document.body.children.length + ' elementy.';

Kiedy skrypt widzi elementy

Przeglądarka czyta HTML od góry. Skrypt umieszczony w <head> uruchamia się, zanim powstanie <body> – getElementById zwraca wtedy null, a próba odczytu .value kończy się błędem TypeError: Cannot read properties of null z poprzedniej lekcji. Masz trzy bezpieczne opcje:

<!-- 1. skrypt na końcu <body> – elementy już istnieją (najprostsze, wystarczy na egzaminie) -->
<body>
  <p id="opis">…</p>
  <script src="skrypt.js"></script>
</body>

<!-- 2. atrybut defer – skrypt z <head> czeka na zbudowanie drzewa -->
<head>
  <script src="skrypt.js" defer></script>
</head>

<!-- 3. kod w funkcji uruchamianej dopiero kliknięciem – w chwili kliknięcia strona dawno jest gotowa -->
<button onclick="pokaz()">Pokaż</button>

W placu zabaw kod JS jest zawsze wstawiany na końcu <body>, więc elementy są gotowe.

getElementById – jeden element po identyfikatorze

Najważniejsza metoda egzaminu: document.getElementById('nazwa') zwraca element o atrybucie id="nazwa" albo null, gdy takiego nie ma. id musi być unikalne na stronie – dlatego metoda zwraca pojedynczy element, nie listę. Działa tylko na document (nie na innych elementach).

<h2 id="tytul">Dzisiejsza oferta</h2>
<p id="opis">Jeszcze nic nie wiadomo.</p>
<button id="pokaz">Pokaż ofertę</button>

const tytul = document.getElementById('tytul');   // element zapisany w zmiennej
const opis = document.getElementById('opis');

console.log(tytul.tagName);     // H2
console.log(opis.textContent);  // Jeszcze nic nie wiadomo.

document.getElementById('pokaz').addEventListener('click', () => {
  tytul.textContent = 'Promocja -20%';
  opis.textContent = 'Wszystkie zeszyty 20% taniej do piątku.';
});

console.log(document.getElementById('cennik'));  // null – nie ma takiego id

Element zapisuj w zmiennej o znaczącej nazwie (const opis = …) zamiast powtarzać document.getElementById('opis') w pięciu linijkach – kod jest krótszy, a egzaminator widzi kryterium „znaczące nazewnictwo”.

Zmiana treści: innerHTML, textContent, innerText

document.getElementById('p1').innerHTML = 'Cena: <b>20 zł</b>';
document.getElementById('p2').textContent = 'Cena: <b>20 zł</b>';

Trzy właściwości czytają i ustawiają zawartość elementu:

<p id="p1">—</p>
<p id="p2">—</p>
<p id="p3">Pierwszy <b>pogrubiony</b> <span style="display:none">ukryty</span> akapit</p>
<button id="zmien">Zmień</button>

document.getElementById('zmien').addEventListener('click', () => {
  document.getElementById('p1').innerHTML = 'Cena: <b>20 zł</b>';
  document.getElementById('p2').textContent = 'Cena: <b>20 zł</b>';
});

const p3 = document.getElementById('p3');
console.log(p3.innerHTML);    // Pierwszy <b>pogrubiony</b> <span style="display:none">ukryty</span> akapit
console.log(p3.textContent);  // Pierwszy pogrubiony ukryty akapit
console.log(p3.innerText);    // Pierwszy pogrubiony akapit  (ukryty pominięty)

Którą wybrać?

• Wynik obliczenia, komunikat, imię użytkownika → textContent. Jest szybsze i bezpieczne: jeśli ktoś wpisze w pole <img src=x onerror=…>, zobaczy tekst, a nie uruchomi kodu.
• Potrzebujesz znaczników (łamanie linii <br>, pogrubienie, lista zbudowana w pętli) → innerHTML.

W arkuszach CKE wszędzie występuje innerHTML – jest w tabeli pomocniczej i w pytaniach testowych. Możesz go używać do wyniku; textContent nie da ci ani punktu więcej, ani mniej. Dopisywanie na końcu działa dla obu: wynik.innerHTML += '<br>kolejna linia'.

Kolekcje: getElementsByClassName i getElementsByTagName

id jest jedno, ale klasę ma wiele elementów. document.getElementsByClassName('nazwa') zwraca kolekcję (HTMLCollection) wszystkich elementów z tą klasą, a getElementsByTagName('p') – wszystkie elementy danego znacznika. Kolekcja działa jak tablica: ma .length, elementy wybierasz przez [i]. Nie jest jednak prawdziwą tablicą – nie ma metod push, forEach ani map.

var elementy = document.getElementsByClassName('wazne');
for (var i = 0; i < elementy.length; i++) {
elementy[i].style.fontWeight = 'bold';
}

<p class="wazne">Termin oddania: piątek.</p>
<p>Zwykły akapit.</p>
<p class="wazne">Przynieś legitymację.</p>
<ul>
  <li class="wazne">Pierwszy punkt</li>
  <li>Drugi punkt</li>
</ul>
<button id="pogrub">Pogrub ważne</button>

const wazne = document.getElementsByClassName('wazne');
console.log(wazne.length);           // 3 – dwa akapity i jeden li
console.log(wazne[0].textContent);   // Termin oddania: piątek.

document.getElementById('pogrub').addEventListener('click', () => {
  for (let i = 0; i < wazne.length; i++) {
    wazne[i].style.fontWeight = 'bold';     // pojedynczy element ma style
    wazne[i].style.color = 'darkred';
  }
});

const akapity = document.getElementsByTagName('p');
console.log('Akapitów: ' + akapity.length);  // 3

Kolekcja z getElementsBy… jest żywa (live): jeśli później dodasz na stronę nowy element z klasą wazne, kolekcja sama go „zobaczy” i length wzrośnie. To bywa zaskakujące w pętlach, które dodają elementy – wrócisz do tego w lekcji Tworzenie i usuwanie elementów.

querySelector i querySelectorAll – selektory CSS

Nowocześniejsza para metod przyjmuje dowolny selektor CSS, taki jak w arkuszu stylów:

• document.querySelector(selektor) – pierwszy pasujący element albo null;
• document.querySelectorAll(selektor) – wszystkie pasujące jako NodeList (statyczna lista z .length, [i] i metodą forEach).

<h2>Zamówienie</h2>
<p id="opis">Wybierz dodatki:</p>
<ul class="dodatki">
  <li>Ser</li>
  <li>Szynka</li>
  <li class="ostre">Jalapeño</li>
</ul>
<input type="radio" name="rozmiar" value="maly"> mały
<input type="radio" name="rozmiar" value="duzy" checked> duży
<p id="wynik"></p>

const opis = document.querySelector('#opis');            // po id – z krzyżykiem
const pierwszyLi = document.querySelector('.dodatki li'); // pierwszy li w .dodatki
const ostre = document.querySelector('.ostre');          // po klasie – z kropką
console.log(pierwszyLi.textContent, '|', ostre.textContent);  // Ser | Jalapeño

const wszystkieLi = document.querySelectorAll('.dodatki li');  // NodeList
console.log(wszystkieLi.length);                              // 3
wszystkieLi.forEach((li) => console.log('-', li.textContent)); // NodeList ma forEach

const zaznaczone = document.querySelector('input[name="rozmiar"]:checked');
document.getElementById('wynik').textContent =
  'Rozmiar: ' + zaznaczone.value + ', dodatków: ' + wszystkieLi.length;

Selektory, które przydają się najczęściej:

Którą metodę wybrać? getElementById jest najkrótsze dla pojedynczego id i pojawia się w każdej tabeli pomocniczej CKE. querySelectorAll jest najwygodniejsze dla grup (ma forEach i przyjmuje złożone selektory). Obie rodziny możesz mieszać w jednym skrypcie.

Co właściwie zmieniasz: innerHTML, value, src, style

Pytania testowe sprawdzają, czy wiesz, która właściwość odpowiada za co. Każda zmienia inną rzecz w tym samym elemencie:

Zapis document.getElementById(id).style.<właściwość> = wartość to najczęstszy szablon w testach pisemnych; w pytaniu z czerwca 2022 (EE.09) należało wskazać właśnie .style. jako brakujący fragment, a dystraktory pomijały style albo wstawiały innerHTML.

<img id="foto" src="https://placehold.co/120x60/ddd/333?text=1" alt="obraz 1">
<p id="opis">Obraz numer 1</p>
<input id="numer" type="number" value="2" min="1" max="3">
<button id="zmien">Zmień obraz</button>

document.getElementById('zmien').addEventListener('click', () => {
  const numer = document.getElementById('numer').value;                 // value – pole
  document.getElementById('foto').src =
    'https://placehold.co/120x60/ddd/333?text=' + numer;                // src – obraz
  document.getElementById('opis').textContent = 'Obraz numer ' + numer; // treść
  document.getElementById('opis').style.color = 'steelblue';           // CSS
});

Poruszanie się po drzewie

Czasem masz element i potrzebujesz jego sąsiada albo rodzica – np. przycisk „Wykonane” ma przekreślić swój li. Służą do tego właściwości nawigacyjne:

<ul id="lista">
  <li>Kupić chleb</li>
  <li id="srodek">Oddać książkę</li>
  <li>Zadzwonić do babci</li>
</ul>
<p id="info"></p>

const srodek = document.getElementById('srodek');
const lista = document.getElementById('lista');

console.log(srodek.parentElement.id);                    // lista
console.log(srodek.previousElementSibling.textContent);  // Kupić chleb
console.log(srodek.nextElementSibling.textContent);      // Zadzwonić do babci
console.log(lista.children.length);                      // 3
console.log(lista.firstElementChild.textContent);        // Kupić chleb
console.log(lista.lastElementChild.textContent);         // Zadzwonić do babci

// querySelector działa też na elemencie – szuka tylko w jego wnętrzu
console.log(lista.querySelectorAll('li').length);        // 3
console.log(srodek.closest('ul').id);                    // lista – najbliższy przodek pasujący do selektora

document.getElementById('info').textContent = 'Lista ma ' + lista.children.length + ' zadania.';

Używaj wersji z Element w nazwie (parentElement, children, nextElementSibling). Starsze parentNode, childNodes, nextSibling zwracają też węzły tekstowe – białe znaki między znacznikami – i łatwo się na tym przejechać.

Tabela DOM z arkusza egzaminacyjnego

Każdy arkusz z JavaScriptem ma tabelę „Wybrane pola i metody modelu DOM języka JavaScript” – jedyną ściągę na stanowisku bez internetu. Nazwy są bez opisu, więc musisz je rozumieć wcześniej. Skład tabeli różni się między arkuszami – poniżej nazwy, które się w niej pojawiają, uzupełnione o kilka pokrewnych, i gdzie w kursie je znajdziesz:

Sygnał dla ciebie: jeśli w tabeli pojawia się createElement, autor zadania spodziewa się tworzenia elementów; jeśli tylko getElementById i innerHTML – to klasyczny kalkulator.

Na egzaminie

Ściąga

Zadania

<p id="a1">Pierwszy akapit</p>
<p id="a2">Drugi akapit</p>
<p id="a3">Trzeci akapit</p>
<button onclick="zmien()">Zmień</button>

<p id="a1">Pierwszy akapit</p>
<p id="a2">Drugi akapit</p>
<p id="a3">Trzeci akapit</p>
<button onclick="zmien()">Zmień</button>

function zmien() {
  const godzina = new Date().toLocaleTimeString();
  document.getElementById('a2').innerHTML = 'Zmieniono o: ' + godzina;

  const liczbaAkapitow = document.getElementsByTagName('p').length;  // kolekcja → length
  document.getElementById('a3').innerHTML = 'Akapitów: ' + liczbaAkapitow;
}

<p class="wazne">Sprawdzian w czwartek.</p>
<p>Zwykła informacja.</p>
<ul>
  <li class="wazne">Przynieść strój</li>
  <li>Opcjonalnie: kalkulator</li>
  <li class="wazne">Podpis rodzica</li>
</ul>
<button id="pogrub">Pogrub ważne</button>
<button id="policz">Policz</button>
<p id="raport"></p>

// wersja 1: kolekcja + pętla z indeksem (dialekt egzaminacyjny)
document.getElementById('pogrub').addEventListener('click', () => {
  const wazne = document.getElementsByClassName('wazne');
  for (let i = 0; i < wazne.length; i++) {
    wazne[i].style.fontWeight = 'bold';
  }
});

// wersja 2: querySelectorAll + forEach
document.getElementById('policz').addEventListener('click', () => {
  const wazne = document.querySelectorAll('.wazne');
  const wszystkie = document.querySelectorAll('p, li');   // p i li – selektor z przecinkiem
  wazne.forEach((el) => (el.style.fontWeight = 'bold'));  // to samo, krócej
  document.getElementById('raport').textContent =
    'Ważnych: ' + wazne.length + ' z ' + wszystkie.length + ' elementów';
});

Serwer: localhost
Tytuł strony: Moja strona
Obrazów na stronie: 2

<h1>Moja strona</h1>
<img src="1.jpg" alt="Zdjęcie 1">
<img src="2.jpg" alt="Zdjęcie 2">
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<button onclick="pokazInformacje()">Pokaż informacje</button>
<p id="informacje"></p>

<h1>Moja strona</h1>
<img src="https://placehold.co/60x40" alt="Zdjęcie 1">
<img src="https://placehold.co/60x40" alt="Zdjęcie 2">
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<button onclick="pokazInformacje()">Pokaż informacje</button>
<p id="informacje"></p>

document.title = 'Moja strona'; // w pliku HTML ustawia to <title>; plac zabaw nie ma <head>

function pokazInformacje() {
  const serwer = location.hostname;                              // kryterium 2
  const tytul = document.title;                                  // kryterium 3
  const liczbaObrazow = document.getElementsByTagName('img').length; // kryterium 4

  document.getElementById('informacje').innerHTML =              // kryterium 5
    'Serwer: ' + serwer + '<br>' +
    'Tytuł strony: ' + tytul + '<br>' +
    'Obrazów na stronie: ' + liczbaObrazow;
}

<p id="licznik"></p>
<ul id="spis"></ul>
<article>
  <h2>Wstęp</h2>
  <p>Krótki opis problemu.</p>
  <h2>Przygotowanie</h2>
  <p>Czego potrzebujesz.</p>
  <h2>Realizacja</h2>
  <p>Krok po kroku.</p>
  <h2>Podsumowanie</h2>
  <p>Co dalej.</p>
</article>

#spis a { color: steelblue; }

const naglowki = document.querySelectorAll('article h2');  // NodeList wszystkich h2
let listaHtml = '';

naglowki.forEach((naglowek, indeks) => {
  const numer = indeks + 1;                     // indeksy od 0, numeracja od 1
  naglowek.id = 'sekcja-' + numer;              // nowy atrybut id
  naglowek.textContent = numer + '. ' + naglowek.textContent;
  listaHtml += '<li><a href="#' + naglowek.id + '">' + naglowek.textContent + '</a></li>';
});

document.getElementById('spis').innerHTML = listaHtml;     // jeden zapis zamiast czterech
document.getElementById('licznik').textContent = 'Sekcji: ' + naglowki.length;

Test powtórkowy

var elementy = document.getElementsByClassName('styl1');
for (var i = 0; i < elementy.length; i++) {
elementy[i].style.fontWeight = 'bolder';
}

document.getElementById('naglowek').........color = 'red';

var el = document.getElementById('cennik');
console.log(el);

var h = location.hostname;
document.getElementById('adres').innerHTML = h;

var info = document.getElementsByClassName('info');