Zrozumienie modelu obiektu dokumentu (DOM) w szczegółach

Wszyscy słyszeliśmy o DOM, lub Model obiektu dokumentu, które są wymieniane od czasu do czasu, związane z JavaScriptem. DOM jest bardzo ważną koncepcją w tworzeniu stron internetowych. Bez tego nie bylibyśmy w stanie dynamicznie modyfikuj strony HTML w przeglądarce.

Poznanie i zrozumienie wyników DOM w lepszy sposób dostęp, zmiana i monitorowanie różne elementy strony HTML. Pomaga nam również Model Obiektu Dokumentu zmniejszyć niepotrzebne zwiększenie czasu wykonywania skryptu.

Drzewa struktury danych

Zanim zacznę mówić o tym, czym jest DOM, jak powstaje, jak istnieje i co się w nim dzieje, chcę, żebyś wiedział o drzewach. Nie iglastych i liściastych, ale o drzewo struktury danych.

O wiele łatwiej jest zrozumieć koncepcję struktur danych, jeśli uprościmy ich definicję. Powiedziałbym, że chodzi o strukturę danych organizowanie danych. Tak, po prostu stary układ, ponieważ meble w domu lub książki układasz na półce lub we wszystkich grupach żywności, które masz na talerzu na talerzu, aby spraw, by to miało dla ciebie znaczenie.

Oczywiście, to nie wszystko, co dotyczy struktury danych, ale w zasadzie to wszystko się zaczyna. To “układ” jest sercem tego wszystkiego. Jest to również bardzo ważne w DOM. Ale nie mówimy jeszcze o DOM, więc pozwól, że poprowadzę cię w stronę a struktura danych, którą możesz znać: tablice.

Tablice i drzewa

Tablice mają indeksy i długość, oni mogą być wielowymiarowy, i mają znacznie więcej cech. Równie ważne jest poznanie tych rzeczy na temat tablic, nie przejmujmy się tym teraz. Dla nas tablica jest dość prosta. To kiedy ty układaj różne rzeczy w linii.

Podobnie, gdy myślimy o drzewach, powiedzmy, że chodzi o kładąc rzeczy pod sobą, zaczynając od tylko jednej rzeczy na górze.

Teraz możesz wziąć kaczki z pojedynczą linią wcześniej, obróć go w pionie, i powiedz mi to “teraz każda kaczka jest pod inną kaczką”. Czy to jest wtedy drzewo? To jest.

W zależności od tego, jakie są twoje dane lub jak będziesz z nich korzystać, najwyższe dane w twoim drzewie (nazywane korzeń) może być czymś, co jest wielkie znaczenie lub coś, co tylko tam jest zamknij inne elementy pod nim.

Tak czy inaczej, najwyższy element w strukturze danych drzewa robi coś bardzo ważnego. Zapewnia miejsce zacznij szukać wszelkich informacji, które chcemy wyodrębnić z drzewa.

Znaczenie DOM

DOM oznacza Model obiektu dokumentu. Dokument wskazuje na dokument HTML (XML) który jest reprezentowane jako obiekt. (W JavaScript wszystko może być zawsze reprezentowane tylko jako obiekt!)

Model jest utworzone przez przeglądarkę pobiera dokument HTML i tworzy obiekt, który go reprezentuje. Możemy uzyskać dostęp do tego obiektu za pomocą JavaScript. A ponieważ używamy tego obiektu do manipulowania dokumentem HTML i budowania własnych aplikacji, DOM jest w zasadzie an API.

Drzewo DOM

W kodzie JavaScript jest dokument HTML reprezentowane jako obiekt. Wszystkie dane odczytane z tego dokumentu są również zapisane jako obiekty, zagnieżdżone jeden pod drugim (bo jak powiedziałem wcześniej, w JavaScript wszystko może być zawsze reprezentowane tylko jako obiekty).

Jest to w zasadzie fizyczne rozmieszczenie danych DOM w kodzie: wszystko jest ułożone jako obiekty. Logicznie jednak, to drzewo.

Parser DOM

Każde oprogramowanie przeglądarki ma program o nazwie Parser DOM który jest odpowiedzialny za parsowanie dokumentu HTML do DOM.

Przeglądarki odczytują stronę HTML i przekształcają jej dane w obiekty tworzące DOM. Informacje obecne w tych obiektach DOM JavaScript są logicznie rozmieszczone jako drzewo struktury danych znane jako drzewo DOM.

Przetwarzanie danych z HTML do drzewa DOM

Weź prosty plik HTML. Ma element główny . Jego podelementy są i , każdy ma wiele własnych elementów potomnych.

Więc zasadniczo przeglądarka odczytuje dane w dokumencie HTML, coś podobnego do tego:

I, układa je w drzewo DOM lubię to:

Reprezentacja każdego elementu HTML (i jego przynależnej zawartości) w drzewie DOM jest znana jako a Węzeł. The Węzeł główny jest węzłem .

The Interfejs DOM w JavaScript jest nazywany dokument (ponieważ jest to reprezentacja dokumentu HTML). W ten sposób uzyskujemy dostęp do drzewa DOM dokumentu HTML przez dokument berło w JavaScript.

Nie możemy tylko uzyskać dostępu, ale także manipuluj dokumentem HTML przez DOM. Możemy dodawać elementy do strony internetowej, usuwać je i aktualizować. Za każdym razem, gdy zmieniamy lub aktualizujemy dowolne węzły w drzewie DOM, to odzwierciedla na stronie internetowej.

Jak projektowane są węzły

Wspomniałem wcześniej, że każdy fragment danych z dokumentu HTML jest zapisany jako obiekt w JavaScript. Jak więc dane zapisane jako obiekt mogą być logicznie ułożone jako drzewo?

Węzły drzewa DOM mają pewne cechy lub właściwości. Prawie każdy węzeł w drzewie ma węzeł nadrzędny (węzeł tuż nad nim), węzły potomne (węzły poniżej) i rodzeństwo (inne węzły należące do tego samego rodzica). Mając to rodzina powyżej, poniżej i wokół węzła, co kwalifikuje go jako część drzewa.

Ta informacja rodzinna każdego węzła jest zapisane jako właściwości w obiekcie reprezentującym ten węzeł. Na przykład, dzieci jest właściwością węzła, który przenosi listę elementów potomnych tego węzła, logicznie rozmieszczając jego elementy podrzędne w węźle.

Unikaj przesadnej manipulacji DOM

Tak długo, jak możemy uznać, że aktualizacja DOM jest użyteczna (w celu modyfikacji strony internetowej), istnieje coś takiego przesadzam.

Powiedz, że chcesz zaktualizować kolor a

na stronie internetowej za pomocą JavaScript. Co musisz zrobić, to dostęp do odpowiedniego obiektu węzła DOM i zaktualizuj właściwość koloru. Nie powinno to mieć wpływu na resztę drzewa (pozostałe węzły w drzewie).

Ale co, jeśli chcesz usuń węzeł z drzewa lub dodaj do niego? Całe drzewo być może trzeba będzie zmienić układ, z usuniętym węzłem lub dodanym do drzewa. To kosztowna praca. Potrzeba czasu i zasobów przeglądarki, aby wykonać tę pracę.

Na przykład powiedzmy, że chcesz dodaj pięć dodatkowych wierszy do tabeli. Dla każdego wiersza, gdy jego nowe węzły są tworzone i dodawane do DOM, drzewo jest aktualizowane za każdym razem, łącznie do pięciu aktualizacji.

Możemy tego uniknąć, używając Fragment dokumentu berło. Pomyśl o tym jak o pudełku, które mogłoby przytrzymaj wszystkie pięć rzędów i być dodane do drzewa. W ten sposób pięć rzędów jest dodany jako jeden pojedynczy element danych a nie pojedynczo, co prowadzi do tylko jednej aktualizacji w drzewie.

Dzieje się tak nie tylko wtedy, gdy usuwamy lub dodajemy elementy, ale zmiana rozmiaru elementu może również wpływać na inne węzły, ponieważ zmieniany rozmiar elementu może wymagać innych elementów do niego dostosuj ich rozmiar. Odpowiednie węzły wszystkich innych elementów będą musiały zostać zaktualizowane, a elementy HTML ponownie renderowane zgodnie z nowymi regułami.

Podobnie, gdy dotyczy to układu strony internetowej jako całości, część lub całość strony internetowej może być ponownie renderowana. Jest to proces znany jako Przepływ. W celu unikać nadmiernego przepływu upewnij się, że nie zmieniasz zbytnio DOM. Zmiany w DOM nie są jedyną rzeczą, która może spowodować przepływ na stronie internetowej. W zależności od przeglądarki mogą się do tego przyczynić inne czynniki.

Zawijanie

Zapakowanie rzeczy w DOM jest wizualizowany jako drzewo składa się ze wszystkich elementów znalezionych w dokumencie HTML. Fizycznie (tak fizycznie, jak wszystko, co cyfrowe), jest to zestaw zagnieżdżonych obiektów JavaScript z których właściwości i metody zawierają informacje, które umożliwiają logicznie rozmieść je w drzewo.