HTML DOM

Aby dokument HTML był bardziej dynamiczny i interaktywny, JavaScript jest wymagany do uzyskania dostępu do zawartości dokumentu i zidentyfikowania interakcji użytkownika. JavaScript osiąga to poprzez interakcję z przeglądarką za pomocą HTML DOM (Model Object Document Model), jego właściwości, zdarzeń i metod.

W tym zapisie omówi HTML DOM, jego znaczenie i jego struktura. Porozmawiamy również o właściwościach i metodach modelu obiektu dokumentów i poziomach DOM.

HTML DOM

Model obiektu Dokument HTML lub HTML DOM to interfejs programowania XML i HTML. Model obiektu dokumentu tworzy logiczną strukturę dokumentu i definiuje metodę ich dostępu i modyfikacji. Ponieważ HTML DOM nie identyfikuje żadnych relacji obiektowych, jest to określane jako struktura logiczna.

HTML DOM jest również znany z reprezentowania stron internetowych w sposób hierarchiczny i zorganizowany, aby użytkownicy i programistowie JavaScript mogli łatwo poruszać się po dokumencie. HTML DOM zezwala na dostęp i manipulowanie elementami HTML, klas, znaczników, atrybutów i identyfikatorów, wykorzystując oferowane metody i polecenia.

Dlaczego potrzebujesz html dom

JavaScript jest wykorzystywany do dodawania powiązanych funkcji, jeśli używasz HTML do struktury stron internetowych. Kiedy dokument HTML zostanie załadowany do przeglądarki, JavaScript nie może go zrozumieć bezpośrednio. Dlatego tworzony jest odpowiedni model obiektu dokumentu. Wygenerowany DOM reprezentuje ten sam dokument HTML inaczej za pomocą obiektów. Następnie JavaScript może łatwo interpretować HTML DOM.

Na przykład w dokumencie HTML JavaScript nie może bezpośrednio zrozumieć tagów (

ustęp

); Może jednak zrozumieć obiekt „P”W modelu Dokument Object. Dzięki tej możliwości JavaScript może użyć kilku metod, aby uzyskać dostęp do dodanych obiektów dokumentów HTML.

Struktura HTML DOM

HTML DOM lub Model obiektu Dokument ma strukturę przypominającą drzewo, w której drzewo definiuje model struktury dokumentu. W modelu struktury HTML DOM „Izomorfizm strukturalny”Jest niezbędną właściwością, która stwierdza, że ​​jeśli zastosujesz dwie implementacje DOM do konstruowania reprezentacji lub modelu tego samego dokumentu HTML, wytworzą one te same modele strukturalne oparte na tych samych obiektach i ich relacjach.

Dlaczego nazywamy modelem dokumentu HTML DOM

Obiekty HTML są używane do modelowania dokumentów. Model ten obejmuje strukturę dokumentu, obiekty i ich zachowanie, takie jak elementy znaczników HTML o swoich atrybutach.

Właściwości HTML DOM

Teraz sprawdźmy właściwości obiektu dokumentu, które mogą odzyskać i zmienić obiekt dokumentu:

• Obiekt okna: Zawsze zobaczysz „obiekt okna” u góry hierarchii DOM.
• Obiekt dokumentu: Po załadowaniu dokumentu HTML w przeglądarce jest on konwertowany na obiekt dokumentu.
• Obiekt kotwicy: Tagi HREF są wykorzystywane do reprezentowania obiektów kotwicznych.
• Obiekt formularzy: Tagi formularzy są wykorzystywane do reprezentowania obiektów formularza.
• Obiekt linku: Tagi linków są wykorzystywane do reprezentowania obiektów łącza.
• Forma elementów sterowania: Formularze mogą również zawierać inne elementy sterujące, takie jak przyciski, reset, przyciski radiowe, textArea, pola wyboru.

HTML Dokument Metody obiektowe

Oto kilka przydatnych metod obiektów dokumentów HTML, których można użyć zgodnie z Twoimi wymaganiami:

• getElementByClassName (): Metoda getElementByClassName () jest wykorzystywana do pobierania elementów o określonej nazwie klasy.
• getElementByTagname (): Metoda getElementByTagName () jest wykorzystywana do pobierania elementów o dodanej nazwie tagu.
• GetElementByName (): Metoda getElementByName () jest wykorzystywana do pobierania elementów o określonej wartości nazwy.
• getElementById (): Metoda getElementById () jest wykorzystywana do pobierania elementów o określonej wartości identyfikacyjnej.
• pisać(): Metoda zapisu () jest wykorzystywana do zapisywania określonego ciągu w dokumencie.

Przykład 1: Znajdź i zdobądź element HTML według ID w JavaScript

W poniższym przykładzie zastosowaliśmy metodę getElementById () do znalezienia HTML DOM posiadającego identyfikator „P1”:

To jest Linuxhint.com

Znajdź i zdobądź elementy html DOM według identyfikatora

To jest program JavaScript, który wykorzystuje metodę „getElementSById”

Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:

Wykonanie powyższego programu JavaScript wyświetli następujące dane wyjściowe:

Przykład 2: Reprezentacja elementów DOM HTML

Poniższy przykład ilustruje reprezentację elementów HTML w DOM (Model Object Document):

Rower	Samolot
Ciężarówka	Autobus

Oto reprezentacja powyższych elementów w strukturze przypominającej drzewo:

Poziom HTML DOM

HTML DOM składa się z czterech poziomów: poziom 0, poziom 1, poziom 2 i poziom 3.

DOM Poziom 0

Ten poziom oferuje zestaw interfejsu niskiego poziomu.

DOM Poziom 1

DOM poziom 1 obejmuje Html I RDZEŃ Części. HTML dostarcza interfejsy wysokiego poziomu, które można wykorzystać do reprezentowania dokumentów HTML, a część podstawowa służy do przedstawienia dokumentu strukturalnego.

DOM Poziom 2

DOM Poziom 2 opiera się na sześciu specyfikacjach: zakres, przemieszczanie, styl, zdarzenia i Core2.

• ZAKRES: Umożliwia programy HTML do dynamicznego przydzielania zakresu treści w dokumencie.
• Traversal: Pozwala programom HTML dynamicznie przemierzać dokument.
• STYL: Pozwala programom na pobieranie i ustawianie treści arkuszy stylów.
• Wydarzenia: Gdy użytkownik wchodzi w interakcje ze stroną internetową, zdarzenia są w wyniku wykonanych skryptów.
• WYŚWIETLENIA: Umożliwia programom HTML na pobieranie i ustawienie treści dokumentu.

DOM Poziom 3

DOM Poziom 3 opiera się na pięciu specyfikacjach: XPath, zdarzeniach, sprawdzania poprawności, zapisu, ładowaniu i core3.

• Xpath: Jest to język ścieżki wykorzystywany do dostępu do struktury drzewa DOM.
• Wydarzenia: Zwiększa funkcjonalność zdarzeń DOM poziomu 2.
• WALIDACJA: Umożliwia programowi HTML na modyfikację struktury i treści dokumentu, jednocześnie upewniając się, że dostarczony dokument jest prawidłowy.
• RATOWAĆ I OBCIĄŻENIE: Program HTML pozwala dynamicznie ładować i zapisywać treść dokumentu XML w dokumencie DOM.
• Core3: Zwiększa funkcjonalność rdzenia DOM poziomu 2.

Wniosek

HTML DOM lub model obiektu dokumentu ma kluczowe znaczenie dla opracowywania interaktywnych stron internetowych. Jest to interfejs użytkownika, który pozwala język programowania zmienić styl, strukturę i treść witryny. HTML DOM działa również jako interfejs między HTML i JavaScript. W tym zapisie omówiono HTML DOM, jego znaczenie i jego struktura. Rozmawialiśmy również o właściwościach i metodach modelu obiektu dokumentu i poziomów DOM.