DOM (Document Object Model) to ustrukturyzowana, obiektowa reprezentacja dokumentu HTML lub XML, którą przeglądarka buduje w pamieci i udostepnia jako drzewo węzłów. Dzieki niej JavaScript może odczytywać oraz modyfikować treść, strukture i style strony już po jej załadowaniu. DOM nie jest tym samym co kod HTML zapisany w pliku — to jego żywa interpretacja, na której operuje przeglądarka.
- Co to jest: drzewiasta struktura obiektów reprezentująca dokument WWW.
- Do czego służy: pozwala skryptom dynamicznie zmieniać treść i wygląd strony.
- Dlaczego istotny dla SEO: Google renderuje DOM, a nie surowy HTML, więc to jego finalna wersja trafia do indeksu.
Jak DOM działa w praktyce
DOM powstaje w momencie, gdy przeglądarka parsuje kod HTML i zamienia każdy element — znaczniki, atrybuty, tekst — na obiekty połączone relacjami rodzic–dziecko. Efektem jest drzewo, w którym element <html> jest korzeniem, a kolejne znaczniki tworzą gałęzie i liście. Programista może odwołać się do dowolnego węzła i go zmienić, na przykład metodą document.getElementById() czy querySelector().
Z jakich elementów zbudowane jest drzewo DOM?
Drzewo DOM składa się z węzłów (nodes) różnych typów, a każdy z nich reprezentuje konkretny fragment dokumentu. Najczęściej spotykane to węzły elementów (np. <div>), węzły tekstowe oraz węzły atrybutów.
- Document — obiekt najwyższego poziomu, punkt wejścia do całego drzewa.
- Element node — pojedynczy znacznik HTML, np.
<p>lub<img>. - Text node — tekst zawarty wewnątrz elementu.
- Attribute node — atrybuty przypisane do elementu, np.
classczysrc.
Czym różni się DOM od kodu źródłowego HTML?
Kod źródłowy HTML to statyczny plik wysyłany przez serwer, a DOM to jego dynamiczna, przetworzona wersja żyjąca w przeglądarce. Różnica bywa ogromna: JavaScript może po załadowaniu dodać setki nowych elementów, usunąć istniejące albo podmienić treść, przez co finalny DOM nie przypomina już pierwotnego HTML-a.
| Cecha | Kod źródłowy HTML | DOM |
|---|---|---|
| Charakter | Statyczny plik | Żywa struktura w pamięci |
| Modyfikacja | Wymaga zmiany pliku | Zmienia się w czasie rzeczywistym przez JS |
| Podgląd | Ctrl+U (widok źródła) | Zakładka Elements w DevTools |
| Co widzi Google | Wersja przed renderowaniem | Wersja po wykonaniu JavaScriptu |
Jak podejrzeć DOM strony?
Najprościej podejrzeć DOM w narzędziach deweloperskich przeglądarki (F12 lub Ctrl+Shift+I), w zakładce Elements. Widoczne tam drzewo to aktualny stan dokumentu — jeśli strona korzysta z JavaScriptu, zobaczysz elementy, których nie ma w widoku źródła (Ctrl+U). Porównanie obu widoków to szybki sposób na sprawdzenie, ile treści dokłada skrypt.
Znaczenie dla SEO i widoczności
Dla SEO DOM ma fundamentalne znaczenie, ponieważ Googlebot indeksuje finalną, wyrenderowaną wersję strony — czyli właśnie DOM, a nie surowy HTML. Jeśli istotna treść pojawia się dopiero po wykonaniu JavaScriptu, robot musi doczekać etapu renderowania, by ją zobaczyć. W praktyce oznacza to, że źle zbudowany DOM może opóźnić lub całkowicie zablokować indeksację treści.
Problem dotyczy szczególnie stron opartych o frameworki JavaScript (React, Vue, Angular), gdzie w pierwotnym HTML-u bywa niemal pusty <div id="root">, a cała zawartość dobudowywana jest po stronie klienta. Google radzi sobie z renderowaniem JS, ale robi to w drugiej fali i z opóźnieniem. Rozwiązaniem jest server-side rendering (SSR) lub prerendering, dzięki którym treść trafia do DOM od razu.
DOM wpływa też na Core Web Vitals. Zbyt rozbudowane drzewo — Google zaleca poniżej 1500 węzłów, maksymalną głębokość 32 poziomów i nie więcej niż 60 dzieci na element — spowalnia renderowanie i pogarsza wskaźniki takie jak INP czy LCP. W trakcie audytu SEO regularnie sprawdzamy właśnie te parametry.
FAQ
Czy DOM to to samo co HTML?
Nie, choć są ściśle powiązane. HTML to statyczny kod dostarczany przez serwer, natomiast DOM to jego obiektowa reprezentacja stworzona przez przeglądarkę, którą można dynamicznie modyfikować za pomocą JavaScriptu. Finalny DOM często różni się od pierwotnego HTML-a.
Jak duży wpływ ma rozmiar DOM na szybkość strony?
Rozmiar DOM ma bezpośredni wpływ na wydajność, bo przeglądarka musi przetworzyć każdy węzeł podczas renderowania i przy każdej zmianie układu. Google zaleca utrzymanie drzewa poniżej 1500 węzłów — przekroczenie tej wartości zwykle pogarsza czas interakcji i obciąża pamięć urządzenia użytkownika.
Czy Google widzi treść dodawaną przez JavaScript do DOM?
Tak, Googlebot renderuje JavaScript i widzi treść dobudowaną do DOM, ale robi to w osobnym, opóźnionym etapie. Dla stron zależnych od JS bezpieczniejsze jest server-side rendering lub prerendering, które udostępniają pełną treść już w pierwszej odpowiedzi serwera.
Jak sprawdzić DOM konkretnej strony?
Otwórz narzędzia deweloperskie przeglądarki klawiszem F12 i przejdź do zakładki Elements — zobaczysz aktualne drzewo DOM. Aby porównać je z surowym kodem, użyj skrótu Ctrl+U, który pokazuje HTML wysłany przez serwer przed wykonaniem skryptów.
DOM jako fundament, na którym Google buduje indeks
DOM to punkt styku między tym, co pisze programista, a tym, co ostatecznie widzi użytkownik i robot wyszukiwarki. Kontrola nad jego strukturą i rozmiarem przekłada się wprost na szybkość, indeksację i widoczność w wynikach. Jeśli chcesz mieć pewność, że Google widzi całą treść Twojej strony, sprawdź naszą ofertę pozycjonowania stron lub pozycjonowania sklepów internetowych.
