Model DOM

DOM (Document Object Model) to struktura reprezentująca dokument HTML w postaci hierarchii obiektów. Mówiąc prościej, przeglądarka tworzy z kodu HTML drzewo elementów (węzłów), do których możemy dostać się za pomocą JavaScript. Każdy element HTML (znacznik) staje się obiektem, który ma swoje właściwości (np. innerHTML, textContent, style, itp.) i może być odszukany oraz zmodyfikowany.

Główny obiekt

document to główny obiekt odpowiadający całej załadowanej stronie. Z niego możemy korzystać, by wyszukiwać konkretne elementy na stronie.

Wybieranie elementów

Najczęściej korzysta się z następujących metod:

• document.getElementById("idElementu") – znajdzie element o podanym atrybucie id. Zwraca bezpośrednio ten element (lub null, jeśli nie znaleziono).
• document.querySelector("selektor") – zwróci pierwszy element pasujący do podanego selektora CSS (np. selektor może być nazwą tagu, klasą z kropką, id z #, itp.). Jeśli nic nie pasuje, zwróci null.

Przykład

Załóżmy, że w HTML mamy:

<h1 id="naglowek">Witaj!</h1>
<p class="opis">Paragraf opisu.</p>

Teraz w JavaScript możemy pobrać te elementy i coś z nimi zrobić:

let tytul = document.getElementById("naglowek");
console.log(tytul.textContent);    // wypisze bieżący tekst nagłówka, np. "Witaj!"
tytul.textContent = "Nowy tytuł";   // zmieni tekst nagłówka na nowy

let paragraf = document.querySelector(".opis");
paragraf.innerHTML = "<b>Treść</b> opisu."; // zmiana zawartości paragrafu (dodajemy pogrubienie)

W powyższym kodzie najpierw pobieramy element <h1> po id i odczytujemy jego tekst (właściwość textContent). Następnie zmieniamy ten tekst. Potem przy pomocy querySelector wybieramy paragraf o klasie "opis" i ustawiamy jego zawartość HTML (właściwość innerHTML). Po tych operacjach w dokumencie zamiast oryginalnych treści pojawią się nasze zmiany.

Inne metody

Oprócz powyższych istnieją też inne metody, np.:

• getElementsByClassName – zwraca listę elementów o danej klasie;
• querySelectorAll – zwraca listę wszystkich pasujących elementów;
• getElementsByTagName – wyszukuje po nazwie tagu.

Na początek jednak getElementById i querySelector w zupełności wystarczą do podstawowych manipulacji DOM.

Ćwiczenia

1. W dokumencie HTML umieść element, np. <h2 id="nag">Hello</h2>. Następnie w skrypcie pobierz ten element używając document.getElementById("nag") i przypisz go do zmiennej. Sprawdź (np. console.log), jaką wartość ma jego właściwość textContent. Następnie zmień tę właściwość na dowolny inny tekst i zobacz efekt na stronie.
2. Dodaj do strony paragraf z klasą np. "opis" zawierający jakiś tekst. Spróbuj pobrać go za pomocą document.querySelector(".opis") i zmienić jego zawartość (np. dopisując dodatkowe zdanie). Upewnij się, że zmiana jest widoczna w przeglądarce.
3. (Do samodzielnego rozważenia) Kiedy querySelector("#jakisId") może być wygodniejszy niż getElementById("jakisId"), a kiedy nie ma to znaczenia? Spróbuj poszukać w dokumentacji różnicy w działaniu tych metod.
4. (Ciekawostka) Wypróbuj document.querySelectorAll na kolekcji elementów, np. document.querySelectorAll("p") dla wszystkich paragrafów na stronie. Zwróć uwagę, co otrzymujesz (tzw. NodeList) i spróbuj przeiterować po niej pętlą aby wypisać teksty wszystkich paragrafów. (To zadanie wykracza nieco poza materiał bieżącej lekcji, ale może Cię zainteresować).