Wprowadzenie do DOM

Niezależnie od działania na stronie HTML, takich jak zmiana elementu, zmiana atrybutów elementu lub zmiana stylu elementu za pomocą języka skryptu, jest wykonywana za pomocą DOM. Wynika to z faktu, że język scenariusza nie może samodzielnie uzyskać dostępu do elementu HTML, dlatego wymaga środkowego interfejsu, który łączy język skryptowy z elementem HTML.

DOM można nazwać strukturą dokumentu, w której dokument może być strona internetowa HTML lub strona XML. W tym poście dowiemy się, czym jest DOM, jak pracować z przeglądanami DOM i jak uzyskać dostęp do elementów z językiem skrypowym.

Co to jest dom?

DOM oznacza model obiektu dokumentu i jest uważany za standard dostępu, zmiany i usuwania elementów z dokumentu. Ten standard jest ustawiony przez W3C (konsorcjum internetowe na całym świecie) I dlatego DOM jest najczęściej określany jako W3C DOM. Konsorcjum internetowe na całym świecie zdefiniowało DOM jako interfejs, który pomaga językom w interakcji z dokumentem, pozostając neutralnym dla języka.

Dokument W DOM oznacza dokument, który może być dokumentem HTML lub dokumentem XML. Obiekt w DOM służy w odniesieniu do elementów lub węzłów dokumentu. Podczas Model w DOM odnosi się do struktury (lub drzewa) dokumentu.

Ponadto DOM działa jak interfejs aplikacji (API) dla języka skryptowego, aby zmienić elementy dokumentu HTML

Struktura dokumentu jest nieco jak drzewo. Zawiera węzeł nadrzędny i węzły dziecięce.

Praca z przeglądanami Live DOM

Niektóre strony internetowe dostarczają nam generatorów DOM na żywo, jeden z takich przeglądarek DOM jest dostarczany w Codepen.io. Rozważ, następujące elementy na stronie internetowej HTML:

Google	Bing
John Doe, Ruski	Kalifornia

Aby wygenerować hierarchię DOM przy użyciu kodu JavaScript na Penu kodowym, skopiuj i wklej te elementy HTML w przeglądarce DOM na Codepen.io

Poniżej tej zakładki HTML „Codepen”, Będziesz mógł zobaczyć hierarchię DOM, jak:

Możesz wyraźnie zobaczyć węzły rodzicielskie, węzły dziecięce i węzły rodzeństwa na podstawie ich wgłębienia w strukturze

Dostęp do elementów HTML z JavaScript

JavaScript zawiera wiele metod łączenia elementów na stronie internetowej HTML poprzez interakcję z DOM. Te metody są mianowicie:

• getElementById ()
• getElementByClassName ()
• GetElementByName ()
• getElementByTagname ()
• getElementBytagns ()

Aby to zademonstrować, utwórz stronę HTML z następującymi wierszami:

Jestem tagiem P w DOM

Dodaj link do pliku skryptu za pomocą następującego wiersza:

W pliku skryptu dodaj następujące wiersze kodu, aby zmienić kolor tła tego T TAG:

var ptag = dokument.getElementById („demo”);
Ptag.styl.tło Color = „żółty”;

Otrzymasz następujący wynik w przeglądarce:

Proszę bardzo, zmieniłeś styl elementu za pomocą języka skryptowego.

Wniosek

DOM jest ustawiony jako standard W3C (World Wide Web Consortium) jako interfejs dla języka skryptowego do interakcji z elementami dokumentu (HTML lub XML). Język scenariuszy (na przykład JavaScript) nie może bezpośrednio uzyskać dostępu do elementów strony internetowej. Dlatego oddziałuje z DOM, a DOM działa jak API i wprowadza zmiany w elementach strony internetowej HTML. Struktura DOM jest jak drzewo, ma węzły macierzyste, węzły dziecięce i węzły rodzeńskie.