Czym jest DOM?

Treść strony napisana za pomocą języka HTML jest reprezentowana w postaci tekstu. DOM (Document Object Model) jest obiektową reprezentacją tego tekstu, jego abstrakcją. Stanowi API dla kodu HTML/XML. DOM odgrywa dwie kluczowe role:

  1. Zapewnia reprezentacje struktury dokumentu.
  2. Określa w jaki sposób odnosić się do elementów z poziomu skryptu.

Dzięki niemu strona zostaje zaprezentowana jako struktura zgrupowanych węzłów, na podstawie której możemy przeprowadzać operacje dodawania, usuwania i edycji poszczególnych elementów.

Znaczenie DOM dla języka JavaScript

DOM nie jest sam w sobie językiem programowania, ale bez niego, JavaScript nie miałby żadnego odniesienia do stron i dokumentów HTML/XML. Manipulowanie poszczególnymi elementami na stronie byłoby wręcz niemożliwe. Można powiedzieć, że DOM jest integralną częścią JavaScriptu, ale czy tylko tego języka? Otóż nie. DOM można zaimplementować niemalże w każdym języku, zarówno w Pythonie, C# i Javie.

Jak korzystać z DOM?

Aby zacząć korzystać z DOM nie potrzebujemy niczego szczególnego. Przeglądarki różnią się implementacją DOM. Dla przykładu:

document.querySelector('#example').classList.add('exampleClass1 exampleClass2');

Powyższy kod w przeglądarkach Firefox i Chrome spowoduje dodanie 2 klas: exampleClass1 i exampleClass2 do treści elementu example. Ten sam kod wywołany w przeglądarce IE11 spowoduje dodanie tylko pierwszej z dwóch klas.

Różnice w implementacji DOM, mimo nałożonej standaryzacji W3C, może się drastycznie różnić w przeglądarkach. Jak rozwiązać ten problem? Można być omnibusem, znać najdrobniejsze szczegóły każdej przeglądarki i poświecić setki godzin na napisanie kodu, który wszędzie będzie działać jednakowo. Można, ale mija się to z celem. Możemy skorzystać z darmowych frameworków dostarczanych przez inne firmy. Jednym z najbardziej popularnych jest nam wszystkim bardzo dobrze znane jQuery. Ta biblioteka dostarcza nam bardzo przyjazny interfejs do edycji strony. Możemy w łatwy sposób manipulować wszystkimi elementami na stronie, klonować je, przenosić, dodawać w różne miejsca, a przy tym mamy pewność, że kod zadziała identycznie w każdej przeglądarce.

Dane w formacie JSON w dokumencie HTML – Template

Bibliotek jQuery sprawdza się dobrze dla prostych aplikacji gdzie nie jest wymagane parsowanie danych w formacie JSON. Oczywiście można zaimplementować odpowiedni kod, niestety jego ilość będzie bardzo duża, przy czym napisanie testów dla takiej aplikacji będzie bardzo trudne, a wręcz niemożliwe. Ponadto ilość zagłębień oraz przeszukiwanie skomplikowanego drzewa DOM może być bardzo pamięciożerne. Na szczęście w takiej sytuacji przychodzą z pomocą rożne systemy templatek, które również operują na obiektowej reprezentacji dokumentu. Jednymi z bardziej popularnych są: mustache i nunjucks. Dzięki nim jesteśmy w stanie stworzyć szablon, który w odpowiednie miejsca wstawi dane otrzymane ze sparsowanej wiadomości JSON. Następnie wygenerowany szablon zostanie wstawiony w wyznaczone miejsce na stronie. Dzięki takiemu rozwiązaniu pozbywamy się setek linii kodu z logiką wstawiania, usuwania i edycji elementów, a operacje przeszukiwania struktury DOM zostają znacznie uproszczone.

Podany wyżej rozwiązane jest dobre, lecz nie sprawdzi się w sytuacji gdy nasza aplikacja jest aplikacją czasu rzeczywistego, a dane na naszej stronie zmieniają się w trybie rzeczywistym. Każda operacja wstawiania na stronie powoduję proces ponownego wlewania (re-kalkulacji pozycji elementów na stronie – o tym w innym rozdziale). Ilość tych operacji może znacznie spowolnić działanie naszej aplikacji i spowodować, że korzystanie z naszej aplikacji może stać się trochę skomplikowane. Na szczęście ktoś już rozwiązał ten problem dzięki zastosowaniu Virtual DOM, ale dla tej technologii poświęcę następny osobny rozdział.

STATSCORE_RekrutacjaIT_EN_600x400