Aplikacje
Strony internetowe
Marketing internetowy
Zastanawialiście się kiedyś, jak napisaną przez programistę linijkę kodu, przeglądarka przekształca w funkcjonalną, estetyczną stronę internetową? Odpowiada za to m.in. Document Object Model, w skrócie DOM. Sprawdź, co to jest, jak działa, jakie ma zastosowanie.
Co to jest Document Object Model?
DOM — Document Object Model, w tłumaczeniu na język polski to Obiektywny Model Dokumentu. Stanowi podstawowy element odpowiadający za renderowanie strony na ekranie. Gdy otwierasz witrynę w przeglądarce, powstaje tzw. DOM HTML. Object model jest logiczną strukturą dokumentu HTML i XML w formie drzewa, którego każda gałąź prowadzi do węzła. Każdy z nich ma inny obiekt danych HTML.
Dokument, o którym tutaj mowa jest nazywany węzłem głównym. Zawiera jeden węzeł podrzędny, którym jest <html>. Ten z kolei posiada dwa elementy podrzędne: <head> i <body>. Oba posiadają elementy potomne.
Najważniejszym elementem drzewa jest korzeń. Węzeł prowadzi do obiektu, którego nazwa to Document. Na stronie internetowej poszczególne gałęzie węzła rozchodzą się na linki, kotwice i formularze, a następnie na obiekty textarea, checkbox, radio, select, reset i pozostałe.
Drzewo jest strukturą dokumentu HTML, a gałęzie to węzły. Znajdują tutaj zastosowanie obiekty, które tworzą np. tagi i atrybuty HTML.
Jak działa model DOM w systemie WordPress?
Wiele stron www w polskim internecie powstaje poprzez system WordPress. Dlatego to na jego przykładzie pokażemy, jak działa model DOM.
Użytkownik, otwierając stronę, która powstała przy wykorzystaniu WP, automatycznie wymusza na serwerze generowanie dokumentu HTML, który pokazuje, jak ona wygląda. Przeglądarka internetowa analizuje dokument i konstruuje DOM. Powstaje drzewiasta struktura elementów.
Przeczytaj również
Każdy element jest węzłem w drzewie. JavaScript ma możliwość wchodzenia w interakcję ze strukturą drzewa, w celu modyfikowania zawartości i zachowania, bez konieczności jej pełnego odświeżania.
W jakich działaniach przydaje się DOM? Przykłady zastosowania
Document Object Model umożliwia tworzenie interaktywnych stron internetowych i aplikacji webowych. Daje również możliwość manipulowania danymi XML. Warto zastosować model DOM do:
- zmiany tekstu elementu na witrynie po kliknięciu przycisku,
- dodania nowych elementów np. wiersza tabeli,
- ukrywania lub wyświetlania sekcji strony, w zależności od działania, jakie wykona internauta,
- parsowania i przetwarzania danych XML.
Różnice między Document Object Model a HTML
Kod HTML jest fundamentem strony internetowej. Zawiera strukturę witryny i tagi. Sprawdzając w przeglądarce źródło strony, zobaczysz właśnie HTML.
Document Object Model powstaje, gdy przeglądarka odczytuje kod HTML strony. Stanowi szkielet witryny, w którym JS może wprowadzać zmiany.
Podsumowując:
- HTML jest statycznym kodem,
- DOM to dynamiczny moduł struktury strony, który może zostać zmieniony poprzez działania JavaScript.
Aby zobaczyć, jak wygląda omawiana struktura, włącz konsolę w przeglądarce. Jeżeli korzystasz z Chrome, zastosuj kombinacji klawiszy Ctrl + Shift + J w tym samym czasie. W panelu Elementy zobaczysz wizualizację Obiektywnego Modelu Dokumentu, zgodną z wszystkimi zmianami, jakie zostały wprowadzone przez JavaScript po załadowaniu strony.
Wpływ DOM na stronę internetową
Document Object Model ma bardzo duże znaczenie dla projektantów stron internetowych. Daje możliwość wprowadzenia dynamicznych zmian w witrynie. Umożliwia:
- zmianę struktury,
- modyfikowanie zawartości, bez odświeżania,
- tworzenie interaktywnych stron internetowych.
Największy wpływ model DOM ma na ładowanie strony. Kiedyś dostępne były wyłącznie statyczne witryny, a każda zmiana wiązała się z odświeżeniem całej zawartości. Odkąd istnieje Obiektywny Model Dokumentu, skrypty mogą modyfikować zawartość strony, kiedy jest ona już załadowana. To automatycznie przyspiesza ładowanie serwerów.
DOM (Document Object Model) daje programistom możliwość stworzenia dynamicznych stron internetowych. Stają się interaktywne i responsywne, a to przekłada się na większą dostępność dla użytkowników.
