Poznanie pojęcia DOM jest kluczowe aby w pełni rozumieć zasady jakie obowiązują w pisaniu kodu HTML, programowaniu JavaScript czy szeroko-pojętej optymalizacji stron internetowych. DOM to fundament działania stron i aplikacji internetowych bez znajomości którego nawet tak proste czynności jak stylowanie dokumentu HTML pisanie drobnych modyfikacji JS czy pisanie wtyczek do popularnych przeglądarek mogą być znacznie utrudnione.
DOM (ang. Document Object Model) czyli w tłumaczeniu obiektowy model dokumentu to sposób reprezentacji dokumentów XML i HTML w postaci znanej z obiektowych języków programowania czyli modelu obiektowego. Obiekt jakim jest DOM wraz z wszystkimi elementami podrzędnymi jest budowany w pamięci przeglądarki podczas interpretowania kodu HTML i JS.
Możemy sprawdzić jak wygląda HTML DOM aktualnie wyświetlanej strony w każdej przeglądarce. W Google Chrome wystarczy wcisnąć klawisz F12 i wybrać zakładkę Elements:
Kod HTML DOM (czyli reprezentacja DOM w kodzie HTML) wcale nie musi się pokrywać z kodem źródłowym HTML, który można podejrzeć za pomocą kombinacji Ctrl+U. To co widzimy w elementach to sparsowany i zinterpretowany kod HTML, który dodatkowo ulega pewnym modyfikacjom w zależności od aktualnie obowiązującej specyfikacji HTML, konkretnej przeglądarki a nawet włączonym w przeglądarce wtyczkom.
Można to zauważyć w przypadku niektórych błędów syntaktycznych – przeglądarka zamyka tagi zgodnie z zasadami HTML5 a wtyczki do blokowania reklam po prostu usuną lub dodadzą klasę aby ukryć elementy odpowiedzialne za wyświetlanie się reklam. Zmiany wprowadzane w zakładce Elementy są od razu widoczne w polu roboczym przeglądarki co kiedyś prezentowałem przy okazji wpisu o podmianie tekstu w JavaScript. Warto w tym momencie zapamiętać, że każda modyfikacja w obrębie DOM zmusza przeglądarkę do ponownego zrenderowania strony.
Obiektowy Model Dokumentu to także interfejs pozwalający nam na wybieranie elementów za pomocą query selektora, wykonywanie manipulacji lub nasłuchiwanie zdarzeń za pomocą addEventListener. Kiedy w JavaScript wybieramy elementy za pomocą querySelector(’#my-div’) aby wykonać pożądane przez nas operacje (odpowiednik jQuery: $(’my-div’) obowiązuje nas hierarchia i kolejność z perspektywy DOM. To samo dotyczy kodu CSS.
To jak działa DOM i jak powinien być implementowany przez przeglądarki ustala nieformalna grupa robocza WHATWG. Standard DOM jest uaktualniany co rocznie a postępy nad jego pracą i aktualizację można śledzić w oficjalnej dokumentacji: https://dom.spec.whatwg.org/
Wybieranie elementów DOM za pomocą JavaScript
Elementy DOM można wybierać na wiele sposobów. W nowszych wersjach JavaScript istnieją metody:
- querySelector która pozwala wybierać pojedyncze obiekty,
- querySelectorAll, która umożliwia wybierać wszystkie elementy występujące w dokumencie.
Wybieranie działa bardzo podobnie do sposobu w jaki wybieramy elementy w jQuery co jest sporym ułatwieniem dla osób, które znają wybieranie elementów w CSS / jQuery i chcą programować w Vanilla JavaScript. Oczywiście nadal można korzystać z tradycyjnych metod getElementById, getElementsByClassName czy getElementsByName.
let myElement = querySelector('#top-header nav .shopping-bag');
Manipulacje w DOM za pomocą JavaScript
Jednym z przykładów manipulacji w drzewie DOM może być zmiana zawartości wybranego elementu:
myElement.innerHTML = '('+itemsCount+')';
Czy też dodanie nowej lub usunięcie obecnej klasy za pomocą classList.add(’nazwa-klasy’); i classList.remove(’nazwa-klasy’);
Przeglądarka zmieni zawartość DOM, ponownie wyrenderuje stronę i efekt będzie taki jakby wprowadzone zmiany oryginalnie znajdowały się w początkowo załadowanym dokumencie HTML. Sposoby wybierania elementów DOM, operacji i zdarzeń jakie możemy w nim wykonać poznaje się przy okazji nauki programowania JavaScript.
Jeżeli chcesz poznać więcej metod umożliwiających wybieranie i manipulowanie elementami DOM, zapoznaj się z kursem JavaScript – DOM.
Co to jest Shadow DOM?
Kiedy do naszej strony dodamy element <video> z atrybutem src wskazującym na istniejący plik z materiałem video wszyscy spodziewamy się standardowego odtwarzacza z paskiem postępu, przyciskiem play, regulacją głośności i małym menu służącym do pobrania tego pliku.
Chcąc podejrzeć zawartość DOM nie zobaczymy tych elementów tylko tag <video>, który na intuicję powinien zawierać elementy potomne związane z przyciskiem regulatorem głośności czy paskiem postępu. Jak to działa? Odtwarzacz video jest przykładem Web Componentu czyli stworzonym przez przeglądarkę za pomocą Shadow DOM.
Domyślnie, przeglądarki nie prezentują Shadow DOM w narzędziach dla programistów, ale po zmianie ustawienia „Show user agent Shadow DOM” można go podejrzeć w specjalnym elemencie #shadow-root:
Shadow DOM pozwala stworzyć pod-drzewo DOM z dodatkowymi elementami DOM określanymi jako custom components albo Web Components. Zaletą wykorzystywania Shadow DOM i tworzenia za jego pomocą własnych komponentów jest niezależność i izolacja komponentów od klasycznego DOM. W praktyce daje nam to niezależność od dodanego stylu CSS czy wykonywanego kodu JS w ramach strony internetowej.
Co to jest Virtual DOM?
Na początku artykułu wspomniałem, że jakakolwiek zmiana w drzewie DOM powoduje ponowne renderowanie strony, która jest stosunkowo kosztowna z punktu widzenia CPU, który obsługuje przeglądarkę. Współczesne strony internetowe zawierają sporo ciężkiego kodu, który odpowiada za animacje, zdarzenia i procesy wykonywane w tle. Wykonywanie wszystkich tych operacji bezpośrednio na DOM jest więc mocno ograniczające.
Virtual DOM to zatem abstrakcyjna / wirtualna wersja DOM, na której można wykonywać operacje związane z UI bez aktualizowania właściwego DOM i synchronizować go tylko wtedy, kiedy jest to wymagane. Zaletą stosowania Virtual DOM jest zatem radykalne zwiększenie wydajności działania aplikacji w przypadku intensywnych i złożonych operacji, które programista chciałby wykonać bezpośrednio we właściwym DOM.
Rozwiązanie Virtual DOM jest implementowane przez nowoczesne frameworki Front-Endowe typu Angular, React i Vue. Nic też nie stoi na przeszkodzie aby stworzyć prosty Virtual DOM samodzielnie według tego poradnika: https://dev.to/ycmjason/building-a-simple-virtual-dom-from-scratch-3d05
Podsumowanie
Każdy kto chce tworzyć strony internetowe za pomocą kodu HTML, CSS i JS musi rozumieć czym jest DOM i jak działa. Choć jego działanie jest stopniowo poznawane w trakcie budowania kolejnych projektów warto wiedzieć, że istnieje dokumentacja gdzie jest szczegółowo opisana jego najnowsza wersja implementowana w nowoczesnych przeglądarkach.
Odpowiedz lub skomentuj