Na skróty

Jak to się dzieje, że programista pisze linijki kodu, a następnie przeglądarka stron przekształca go w atrakcyjnie wyglądającą witrynę? Jedną z odpowiedzi na to pytanie jest DOM, czyli Document Object Model. Co to jest i dlaczego ma tak duże znaczenie?

DOM – co to jest?

DOM, czyli Obiektowy Model Dokumentu, jest jednym z podstawowych elementów, które odpowiadają za renderowanie strony na ekranie. Kiedy otwierasz witrynę w przeglądarce, dochodzi do tworzenia tzw. obiektowego modelu dokumentu HTML. DOM to logiczna struktura dokumentu HTML i XML w postaci drzewa, którego każda gałąź prowadzi do węzła, mającego inny obiekt danych HTML.

Aby lepiej zrozumieć DOM, spójrz na poniższy przykładowy kod:

Źródło: https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

Dokument nazywany jest węzłem głównym i zawiera jeden węzeł podrzędny, którym jest element <html>. <html> zawiera z kolei dwa elementy podrzędne, którymi są <head> i <body>. Zarówno <head>, jak i <body> mają własne elementy potomne. Lepiej strukturę pokazuje poniższa grafika:

Źródło: https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

Głównym elementem drzewa jest korzeń. Dalej węzeł prowadzi do obiektu o nazwie Document. Następnie na standardowej stronie poszczególne gałęzie węzła rozchodzą się na linki, kotwice czy formularze, a dalej na – obiekty textarea, checkbox, radio, select, reset i inne

Zobacz: Strategia firmy od A do Z – Poradnik

Całe drzewo jest strukturą dokumentu HTML, a gałęzie to węzły. Wykorzystywane są w nim obiekty, które tworzą m.in. tagi i atrybuty HTML.

Jak działa DOM na podstawie systemu WordPress

Gdy użytkownik otwiera stronę opartą na systemie WordPress, serwer generuje dokument HTML, który obrazuje początkowy stan witryny. Przeglądarka internetowa następnie analizuje dokument HTML i konstruuje DOM, tworząc drzewiastą strukturę elementów. Każdy element staje się węzłem w drzewie. JavaScript może wchodzić w interakcje z tą strukturą drzewa, aby modyfikować zawartość i zachowanie strony bez konieczności pełnego jej odświeżania.

DOM a HTML – na czym polega różnica?

Czy zatem DOM to po prostu HTML? Nie są one tym samym. Kod HTML to w pewnym sensie fundament budynku. Znajduje się w pliku i obejmuje m.in. strukturę witryny i tagi. Jeśli skorzystasz w przeglądarce z opcji sprawdzenia źródła witryny, to zapewne zobaczysz kod HTML. Natomiast DOM to coś więcej. Document Object Model powstaje w momencie, kiedy przeglądarka czyta kod HTML witryny. To po prostu szkielet strony, na którym JavaScript może manipulować, szkielet interaktywny. Upraszczając, HTML to statyczny kod, a DOM jest dynamicznym modelem tej struktury zmienionym poprzez ewentualne działanie JavaScript.

Aby lepiej zobrazować, jak to działa, włącz konsolę w przeglądarce. Przykładowo, w Chrome wystarczy, że skorzystasz z kombinacji klawiszy Ctrl + Shift + J w tym samym czasie. W panelu Elementy nie widzisz wtedy oryginalnego kodu HTML, tylko wizualną reprezentację DOM. Panel ten pokazuje DOM na dany moment po uwzględnieniu wszystkich zmian, które zostały wprowadzone przez JavaScript po załadowaniu witryny. Zatem korzystanie z widoku Elementy pozwala Ci sprawdzić, jak wygląda kod strony w danym momencie.

Zobacz: Czym jest krytyczna ścieżka renderowania (critical rendering path - CRP) w stronach internetowych?

Źródło: https://semcore.pl/google-bedzie-nagradzal-jakosciowe-tresci-w-kolejnym-update/

DOM – jakie ma znaczenie na stronach WWW?

DOM jest ważny przede wszystkim dla projektantów. Umożliwia dynamiczne wprowadzanie zmian na stronie WWW. Dzięki temu możesz zmieniać strukturę, modyfikować jej zawartość bez konieczności odświeżania witryny. DOM to centralny element tworzenia interaktywnych stron WWW. Więcej pokazuje poniższy film.

Jednym z kluczowych elementów, w których DOM odgrywa ważną rolę, jest ładowanie witryny. Kiedyś strony były statystyczne, a każda zmiana na nich wymagała przeładowania całego contentu. DOM powoduje, że skrypty mogą modyfikować zawartość witryny, kiedy ta jest już załadowana. To jeden z czynników, które mają wpływ na przyspieszenie ładowania serwisów.

Szymon Machniewski

Przedsiębiorca związany z branżą SEO od 2004 roku. Tworzy content o tematyce marketingu online, finansów, nieruchomości i podróży. Rozwija własne serwisy tematyczne.