Rozgrzewka: DOM z poprzedniej lekcji

1. Jak rozwija się skrót DOM?
2. Co zwraca polecenie document wpisane w konsoli przeglądarki?
3. Co zobaczycie po wpisaniu document.body?

getElementById: jeden element o podanym id

Atrybut id opisuje jeden konkretny element na stronie - w całym dokumencie może wystąpić tylko raz. Metoda document.getElementById("title") znajduje ten element i zwraca go jako obiekt, na którym możecie dalej pracować.

document.getElementById("title")

Jeśli w dokumencie nie ma elementu z takim id, metoda nie zgłasza błędu - zwraca null (pustą wartość, brak elementu).

Ciekawostka z MDN: ta metoda ma pułapkę w pisowni. Poprawnie jest getElementById (małe „d” na końcu) - zapis getElementByID z dużym „ID” wygląda naturalnie, ale nie zadziała.

getElementsByClassName: wszystkie elementy z daną klasą

Tę samą klasę (atrybut class) może mieć naraz wiele elementów. Metoda document.getElementsByClassName("item") zwraca kolekcję - listę wszystkich elementów z klasą item, ile by ich nie było.

document.getElementsByClassName("item")

Ta kolekcja nazywa się HTMLCollection (kolekcja elementów HTML) i jest żywa - sama się aktualizuje. Gdy dodacie albo usuniecie element z klasą item, kolekcja zmieni się automatycznie, bez ponownego wywoływania metody.

id kontra class: jeden element czy wiele?

id jest unikalny - w dokumencie może być tylko jeden element z danym id, jak numer PESEL, który ma tylko jedna osoba. Tę samą class może mieć naraz wiele elementów - jak nazwa klasy szkolnej, do której należy wielu uczniów.

Co dostajemy w zamian: tagName i length?

page.html:

<h1 id="title">Tytuł strony</h1>
<p class="item">Pierwszy element</p>
<p class="item">Drugi element</p>
<p class="item">Trzeci element</p>

script.js:

const heading = document.getElementById("title");
console.log(heading.tagName); // result wg MDN: "H1"

const items = document.getElementsByClassName("item");
console.log(items.length); // result wg MDN: 3

tagName zwraca nazwę znacznika elementu, wielkimi literami ("H1"). length to liczba elementów w kolekcji zwróconej przez getElementsByClassName - tu 3, bo w dokumencie są trzy elementy z klasą item.

Tak pytają na egzaminie

Ćwiczenie: znajdujemy elementy w konsoli

1. Otwórz page.html z poprzednich lekcji. Sprawdź, że masz element z id="title" i kilka elementów z class="item" - jeśli nie, dopisz je.
2. W script.js pobierz element po id: const heading = document.getElementById("title"); i wypisz heading.tagName w konsoli.
3. Pobierz kolekcję po klasie: const items = document.getElementsByClassName("item"); i wypisz items.length w konsoli.
4. Sprawdź w przeglądarce (F12, konsola): otwórz page.html, zobacz wynik obu poleceń.
5. Zapisz oba pliki i odśwież stronę w przeglądarce (Ctrl+R) - sprawdź, że oba wyniki wypisują się ponownie.

A jak to wygląda w produkcji?