DOM (Document Object Model) w HTML to obiektowy model struktury dokumentu, który jest podstawą do manipulowania zawartością, strukturą i wyglądem stron internetowych za pomocą języków programowania, takich jak JavaScript.
Co to jest DOM?
DOM, czyli obiektowy model dokumentu, jest wewnętrzną strukturą dokumentu HTML (lub XML), tworzoną przez przeglądarkę w momencie ładowania strony. Przekształca on kod HTML w drzewo obiektów, gdzie każdy element, atrybut czy tekst w dokumencie staje się osobnym węzłem (node) umieszczonym w hierarchicznej strukturze. Głównym węzłem jest dokument, od którego odchodzą węzły potomne odpowiadające za <html>, <head>, <body>, a te z kolei mają swoje własne dzieci, reprezentujące tagi, atrybuty i teksty zawarte w tych elementach.
Przykład uproszczonego drzewa DOM
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<title>Przykład DOM</title>
</head>
<body>
<h1>Witaj!</h1>
<p>To jest poradnik o DOM.</p>
</body>
</html>
Hierarchia DOM dla powyższego kodu:
- Document,
- html,
- head,
- title,
- body,
- h1,
- p.
- html,
Różnica między HTML a DOM
- HTML – to język znaczników, w którym zapisujesz strukturę strony;
- DOM – to dynamiczny model obiektowy, powstały na podstawie HTML, umożliwiający programom (np. JavaScriptowi) odczytywanie, modyfikowanie lub usuwanie elementów w trakcie działania strony.
DOM jest tym, co „widzi” przeglądarka po przetworzaniu kodu HTML — mogą zostać do niego dodane nowe elementy (np. przez JavaScript), mogą się zmieniać treści, a więc DOM może znacząco różnić się od pierwotnego HTML.
Najważniejsze cechy i zastosowania DOM
- Praca na strukturze strony – programiści mogą odwoływać się do dowolnego elementu, zmieniać jego treść, atrybuty czy styl bez konieczności przeładowania strony;
- Umożliwia to dynamiczne aktualizowanie interfejsu użytkownika oraz reagowanie na działania użytkownika w czasie rzeczywistym.
Manipulacja treścią i atrybutami – przykład: dynamiczna zmiana treści nagłówka za pomocą JavaScript:
document.getElementById("tytul").textContent = "Nowy tytuł poradnika!";
Dodawanie i usuwanie elementów – przykład: tworzenie nowego elementu i dodanie go do dokumentu:
const par = document.createElement("p");
par.textContent = "To jest nowy akapit!";
document.body.appendChild(par);
Obsługa zdarzeń – możesz przypisać funkcje do różnych zdarzeń na stronie, np. kliknięcie przycisku:
document.getElementById("przycisk").addEventListener("click", function() {
alert("Kliknięto przycisk!");
});
Dynamiczna zmiana klas i styli – przykład: zmiana koloru tła elementu:
document.getElementById("sekcja").style.backgroundColor = "lightblue";
Przykłady praktycznego zastosowania DOM
- Tworzenie interaktywnych formularzy – np. sprawdzanie poprawności danych bez przeładowania strony;
- Wstawianie nowych treści po kliknięciu przycisku – np. rozbudowywanie listy komentarzy;
- Dynamiczne filtrowanie lub sortowanie danych – np. produkty w sklepie internetowym;
- Realizowanie efektów animacji czy podświetlania elementów podczas interakcji użytkownika.
Drzewo DOM – fundamentalna koncepcja
DOM ze względu na swoją drzewiastą strukturę pozwala na wygodne przeszukiwanie i modyfikowanie poszczególnych gałęzi (np. wszystkich elementów <li> w liście, wszystkich akapitów <p> w sekcji). Każdy element, węzeł tekstowy czy atrybut można zmieniać na różne sposoby — zarówno pojedyncze, jak i całą grupę naraz.
Podsumowanie
DOM w HTML to uniwersalne narzędzie programistyczne. Dzięki niemu strony internetowe stają się dynamiczne, interaktywne i adaptacyjne do potrzeb użytkownika. Zarówno domowe skrypty, jak i zaawansowane aplikacje internetowe intensywnie wykorzystują funkcjonalność DOM do tworzenia płynnych, nowoczesnych doświadczeń online.
