W tej lekcji przyjrzymy się, czym jest DOM, dlaczego jest potrzebny i jak jest zbudowany.

Co to jest DOM?

Przeglądarka, żądając strony i otrzymując jej źródłowy kod HTML w odpowiedzi z serwera, musi ją najpierw przeanalizować. W procesie parsowania i parsowania kodu HTML przeglądarka buduje na jego podstawie drzewo DOM.

Po wykonaniu tej akcji i szeregu innych, przeglądarka przystępuje do renderowania strony. W tym procesie oczywiście używa już stworzonego przez siebie drzewa DOM, a nie oryginalnego kodu HTML.

DOM to obiektowy model dokumentu, który przeglądarka tworzy w pamięci komputera na podstawie kodu HTML, który otrzymuje z serwera.

Mówiąc prościej, kod HTML to tekst strony, a DOM to zestaw powiązanych obiektów tworzonych przez przeglądarkę podczas parsowania jej tekstu.

W przeglądarce Chrome kod źródłowy strony, który otrzymuje przeglądarka, można wyświetlić na karcie „Źródło” w panelu „Narzędzia dla programistów internetowych”.

W Chrome nie ma narzędzia, które można wykorzystać do przeglądania utworzonego drzewa DOM. Ale istnieje reprezentacja tego drzewa DOM w postaci kodu HTML, jest ona dostępna w zakładce "Elementy". Taka reprezentacja DOM jest oczywiście znacznie wygodniejsza dla programisty WWW. Dlatego nie ma narzędzia, które reprezentowałoby DOM w formie struktury drzewiastej.

Obiekty w tym modelu powstają z prawie wszystkiego, co jest w HTML (znaczniki, treść tekstowa, komentarze itp.), w tym z samego dokumentu. Relacje między tymi obiektami w modelu są tworzone na podstawie tego, jak Elementy HTML znajdują się w kodzie względem siebie.

W takim przypadku DOM dokumentu po jego utworzeniu można zmienić. Gdy DOM się zmieni, przeglądarka niemal natychmiast przerysuje obraz strony. W rezultacie mamy renderowanie strony zawsze jest zgodne z DOM.

Aby programowo odczytywać i modyfikować DOM, przeglądarka udostępnia nam DOM API, czyli innymi słowy interfejs programistyczny. W prosty sposób DOM API to zbiór ogromnej liczby różnych obiektów, ich właściwości i metod, które możemy wykorzystać do czytanie i modyfikowanie DOM.

Do pracy z DOM w większości przypadków używany jest JavaScript, ponieważ. do tej pory jest to jedyny język programowania, w którym skrypty mogą być wykonywane w przeglądarce.

Dlaczego potrzebujemy DOM API? Potrzebujemy go, abyśmy mogli używać JavaScript do zmiany strony w locie, tj. uczynić go dynamicznym i interaktywnym.

DOM API zapewnia nam (programistom) duża ilość metody, za pomocą których możemy zmienić wszystko na stronie, a także wchodzić w interakcję z użytkownikiem. Tych. ten interfejs programistyczny pozwala nam tworzyć złożone interfejsy, formularze, przetwarzać działania użytkownika, dodawać i usuwać różne elementy na stronie, zmień ich zawartość, właściwości (atrybuty) i wiele więcej.

Teraz w sieci praktycznie nie ma stron, w których skryptach nie byłoby pracy z DOM.

Jaki jest kod HTML strony?

Przed przystąpieniem do badania modelu obiektowego dokumentu należy najpierw pamiętać, czym jest kod źródłowy strony internetowej (dokument HTML).

Kod źródłowy strony internetowej składa się ze znaczników, atrybutów, komentarzy i tekstu. Tagi to podstawowa składnia HTML. Większość z nich jest w parach. W tym przypadku jeden z nich jest otwierający, a drugi zamykający. Jedna taka para tagów tworzy element HTML. Elementy HTML mogą mieć Dodatkowe opcje- atrybuty.

W dokumencie, aby utworzyć określony znacznik, niektóre elementy znajdują się wewnątrz innych. W rezultacie dokument HTML można traktować jako zestaw zagnieżdżonych elementów HTML.

Jako przykład rozważmy następujący kod HTML:

Tytuł artykułu

W tym kodzie elementem głównym jest html . W nim zagnieżdżone są elementy głowy i ciała. Element head zawiera tytuł, a element body zawiera h1 i div. Z kolei element div zawiera h2 i p .

Przyjrzyjmy się teraz, jak przeglądarka buduje drzewo DOM na podstawie kodu HTML.

Jak zbudowane jest drzewo DOM dokumentu?

Jak już opisano powyżej, przeglądarka buduje drzewo w oparciu o elementy HTML i inne encje. kod źródłowy stron. Podczas wykonywania tego procesu uwzględnia zagnieżdżanie elementów w sobie.

W rezultacie przeglądarka wykorzystuje powstałe drzewo DOM nie tylko w swojej pracy, ale także udostępnia nam API dla wygodna obsługa z nim przez JavaScript.

Podczas budowania DOM przeglądarka tworzy obiekty z elementów HTML, tekstu, komentarzy i innych elementów tego języka ( Węzły DOM-drzewa).

W większości przypadków twórcy stron internetowych są zainteresowani tylko obiektami (węzłami) utworzonymi z elementów HTML.

Jednocześnie przeglądarka nie tylko tworzy obiekty z elementów HTML, ale także łączy je ze sobą za pomocą określonych połączeń, w zależności od tego, jak każdy z nich odnosi się do drugiego w kodzie.

Elementy znajdujące się bezpośrednio w elemencie są jego dziećmi. I jest rodzicem każdego z nich. Ponadto wszystkie te elementy w stosunku do siebie to rodzeństwo (bracia).

Co więcej, w HTML każdy element ma zawsze jednego rodzica (element HTML, w którym się bezpośrednio znajduje). W HTML element nie może mieć wielu rodziców. Jedynym wyjątkiem jest element html. Nie ma rodzica.

Aby uzyskać drzewo DOM w postaci, w jakiej jest ona tworzona przez przeglądarkę, wystarczy „ustawić” wszystkie elementy w zależności od ich wzajemnego związku.

Tworzenie drzewa DOM odbywa się od góry do dołu.

Korzeniem drzewa DOM jest zawsze sam dokument (węzeł dokumentu). Ponadto drzewo jest budowane w zależności od struktury kodu HTML.

Na przykład kod HTML, który omówiliśmy powyżej, miałby następujące drzewo DOM:

Na samym szczycie tego drzewa znajduje się węzeł dokumentu. Ten węzeł jest powiązany z html , jest jego dzieckiem. Węzeł html jest utworzony przez element html ( ...). Węzły głowy ( ...) I ciała ( ...) są rodzicami do html . W stosunku do siebie są rodzeństwem, ponieważ mieć jednego rodzica. Węzeł główny jest powiązany z tytułem (lt;tytuł>...), jest jego dzieckiem. Węzły h1 i div są powiązane z body , dla nich jest to rodzic. Węzeł div jest połączony z h2 (

...

) i p(), są jego dziećmi.

Jak wspomniano powyżej, drzewo zaczyna się od dokumentu obiektu (węzła). To z kolei ma jeden węzeł podrzędny utworzony przez element html ( ...). elementy głowy ( ...) I ciała ( ...) są w html i dlatego są jego dziećmi. Następnie węzeł główny jest rodzicem tytułu (lt;title>...). Elementy h1 i div są zagnieżdżone w body , co oznacza, że ​​są jego dziećmi. div zawiera bezpośrednio elementy h2 (

...

) i p(). Oznacza to, że węzeł div dla każdego z nich jest rodzicem.

Tak po prostu buduje się drzewo DOM w przeglądarce na podstawie kodu HTML.

Dlaczego musisz wiedzieć, jak zbudowane jest drzewo DOM? Po pierwsze to zrozumienie środowiska, w którym chcesz coś zmienić. Po drugie, większość działań podczas pracy z DOM sprowadza się do znalezienia (wyboru) niezbędnych elementów. Bez znajomości struktury drzewa DOM i połączeń między węzłami dość trudno będzie znaleźć w nim konkretny element.

Ćwiczenie

Na podstawie drzewa DOM pokazanego na rysunku utwórz kod HTML.

Odniesienie zawiera opis wszystkich właściwości i metod standardowych wbudowanych obiektów JavaScript.

Obiektowy model dokumentu

Obiektowy model dokumentu(Document Object Model, DOM) to interfejs programowania aplikacji (API) dla XML, który został rozszerzony o pracę z HTML.

W DOM cała zawartość strony (elementy i tekst) jest reprezentowana jako hierarchia węzłów. Rozważ następujący kod:

Witaj świecie!

Ten kod można przedstawić za pomocą DOM jako hierarchii węzłów:

Reprezentując dokument jako drzewo węzłów, DOM API daje programistom pełną kontrolę nad zawartością i strukturą strony internetowej.

Opisując strukturę drzewa DOM, używa się terminologii zapożyczonej z drzew genealogicznych.

Zatem węzeł znajdujący się bezpośrednio nad danym węzłem nazywany jest węzłem nadrzędnym danego węzła. Węzły znajdujące się jeden poziom poniżej tego węzła nazywane są dziećmi tego węzła. Węzły znajdujące się na tym samym poziomie i mające tego samego rodzica nazywane są rodzeństwem lub rodzeństwem. Węzły znajdujące się o dowolną liczbę poziomów poniżej danego węzła nazywane są jego potomkami. Rodzice, dziadkowie i wszelkie inne węzły znajdujące się na dowolnej liczbie poziomów nad danym węzłem nazywani są jego przodkami.

Odwołanie DOM zawiera opis obiektów Document, Element, Event i NodeList, w tym opis ich metod i właściwości:

Katalog BOM

BOM (Browser Object Model w tłumaczeniu z języka angielskiego - Browser Object Model) zapewnia dostęp do okna przeglądarki i pozwala manipulować nim i jego elementami.

Obiekty BOM zapewniają dostęp do funkcjonalności przeglądarki niezależnie od zawartości strony internetowej. Temat BOM jest jednocześnie ciekawy i złożony, ponieważ ze względu na długi brak specyfikacji producenci przeglądarek swobodnie rozszerzali BOM według własnego uznania. Wiele elementów podobnych do różne przeglądarki, stały się de facto standardami przestrzeganymi do dziś ze względu na wzajemną kompatybilność. Aby ujednolicić te podstawowe aspekty JavaScript, W3C zdefiniowało podstawowe elementy BOM w specyfikacji HTML5.

Praca z modelem DOM

Każdy obiekt Window ma właściwość dokument A, który odwołuje się do obiektu Document. Ten obiekt Document nie jest samodzielnym obiektem. Jest to centralny obiekt bogatego API znanego jako Document Object Model (DOM), który definiuje sposób dostępu do treści dokumentu.

Przegląd DOM

Obiektowy model dokumentu (DOM) to podstawowy interfejs programowania aplikacji, który zapewnia możliwość pracy z zawartość HTML oraz dokumenty XML. Interfejs programowania aplikacji DOM (API) nie jest szczególnie skomplikowany, ale istnieje wiele funkcji architektonicznych, o których powinieneś wiedzieć.

Przede wszystkim należy rozumieć, że zagnieżdżone elementy dokumentów HTML lub XML są reprezentowane jako drzewo obiektów DOM. Widok drzewa dokumentu HTML zawiera węzły reprezentujące elementy lub znaczniki, takie jak oraz

Oraz węzły reprezentujące wiersze tekstu. Dokument HTML może również zawierać węzły reprezentujące komentarze HTML. Rozważ następujący prosty dokument HTML:

To jest dokument HTML

Przykład prosty tekst.

Reprezentację DOM tego dokumentu pokazano na poniższym diagramie:

Dla tych, którzy nie są jeszcze zaznajomieni ze strukturami drzewiastymi w programowaniu komputerowym, warto wiedzieć, że terminologia do ich opisu została zapożyczona z drzew genealogicznych. Węzeł bezpośrednio nad danym węzłem nazywa się rodzicielski w odniesieniu do tego węzła. Węzły znajdujące się jeden poziom poniżej innego węzła są spółki zależne w odniesieniu do tego węzła. Węzły znajdujące się na tym samym poziomie i mające tego samego rodzica są nazywane siostrzany. Węzły znajdujące się na dowolnej liczbie poziomów poniżej innego węzła są jego dziećmi. Rodzic, dziadek i wszelkie inne węzły powyżej tego węzła są jego przodkami.

Każdy prostokąt na tym diagramie jest węzłem dokumentu, który jest reprezentowany przez obiekt węzeł. Należy pamiętać, że rysunek pokazuje trzy różne rodzaje węzły. Korzeniem drzewa jest węzeł Dokument, który reprezentuje cały dokument. Węzły reprezentujące elementy HTML są węzłami typu Element, a węzły reprezentujące tekst są węzłami typu Text. Document, Element i Text są podklasami klasy Node. Document i Element to dwie najważniejsze klasy w DOM.

Typ Node i jego podtypy tworzą hierarchię typów pokazaną na poniższym diagramie. Zwróć uwagę na formalne różnice między ogólnymi typami Document i Element oraz typami HTMLDocument i HTMLElement. Typ Document reprezentuje dokument HTML i XML, a klasa Element reprezentuje element tego dokumentu. Podklasy HTMLDocument i HTMLElement reprezentują w szczególności dokument HTML i jego elementy:

Na tym diagramie warto również zwrócić uwagę na dużą liczbę podtypów klasy HTMLElement, które reprezentują określone typy elementów HTML. Każdy z nich definiuje właściwości JavaScript, które odzwierciedlają atrybuty HTML konkretnego elementu lub grupy elementów. Niektóre z tych konkretnych klas definiują dodatkowe właściwości lub metody, które nie odzwierciedlają składni języka znaczników HTML.

Wybieranie elementów dokumentu

Większość prac programy klienckie na JavaScript w jakiś sposób związane z manipulacją elementami dokumentu. Podczas wykonywania programy te mogą używać zmiennej globalnej dokumentu, która odwołuje się do obiektu Document. Jednak, aby wykonać jakąkolwiek manipulację na elementach dokumentu, program musi w jakiś sposób uzyskać lub wybrać obiekty Element, które odwołują się do tych elementów dokumentu. DOM definiuje kilka sposobów wybierania elementów. Możesz wybrać element lub elementy dokumentu:

o wartość atrybutu id;

o wartość atrybutu name;

według nazwy znacznika;

pod nazwą klasy lub klas CSS;

pasujące do określonego selektora CSS.

Wszystkie te techniki wyboru pierwiastków zostały opisane w kolejnych podrozdziałach.

Wybieranie elementów według wartości atrybutu id

Wszystkie elementy HTML mają atrybuty id. Wartość tego atrybutu musi być unikalna w obrębie dokumentu — żadne dwa elementy w tym samym dokumencie nie mogą mieć tej samej wartości atrybutu id. Możesz wybrać element według unikalnej wartości atrybutu id za pomocą metody pobierzElementById() Obiekt dokumentu:

Var sekcja1 = document.getElementById("sekcja1");

To najłatwiejszy i najczęstszy sposób wybierania elementów. Jeśli skrypt ma mieć możliwość manipulowania określonym zestawem elementów dokumentu, przypisz wartości do atrybutów id tych elementów i skorzystaj z możliwości ich wyszukiwania według tych wartości.

Wersje Internet Explorer poniżej IE8 metoda getElementById() wyszukuje wartości atrybutu id bez rozróżniania wielkości liter, a także zwraca elementy pasujące do wartości atrybutu name.

Wybieranie elementów według wartości atrybutu nazwy

Atrybut nazwy HTML był pierwotnie przeznaczony do nazywania elementów formularza, a wartość atrybutu była używana podczas przesyłania danych formularza na serwer. Podobnie jak atrybut id, atrybut name przypisuje nazwę do elementu. Jednak w przeciwieństwie do id, wartość atrybutu name nie musi być unikalna: wiele elementów może mieć tę samą nazwę na raz, co jest dość powszechne, gdy jest używane w przyciskach radiowych i formularzach pól wyboru. Ponadto, w przeciwieństwie do id, atrybut name może być określony tylko w niektórych elementach HTML, w tym formularzach, elementach formularzy i elementach.