HTML DOM (obiektowy model dokumentu) jest hierarchiczną reprezentacją dokumentów HTML. Definiuje strukturę i właściwości elementów strony internetowej, umożliwiając JavaScriptowi dynamiczny dostęp do zawartości, manipulowanie nią i jej aktualizację, zwiększając interaktywność i funkcjonalność.

Notatka : Nazywa się to strukturą logiczną, ponieważ DOM nie określa żadnych relacji między obiektami.

Spis treści

• Dlaczego DOM jest wymagany?
• Struktura DOM
• Właściwości DOM
• Metody obiektowego modelu dokumentu
• Czym DOM nie jest?
• Poziomy DOM:

Co to jest DOM?

DOM , Lub Model obiektowy dokumentu , to interfejs programistyczny reprezentujący dokumenty strukturalne, takie jak HTML I XML-a jako drzewo obiektów. Definiuje sposób uzyskiwania dostępu, manipulowania i modyfikowania elementów dokumentu przy użyciu języków skryptowych, takich jak JavaScript.

Zasadniczo model obiektowy dokumentu to API który reprezentuje dokumenty HTML lub XML i współdziała z nimi.

Zamień ciąg JavaScript

DOM jest W3C (Konsorcjum w sieci WWW) standard oraz określa standard dostępu do dokumentów.

Standard W3C Dom jest podzielony na trzy różne części:

• Rdzeń DOM – standardowy model dla wszystkich typów dokumentów
• DOM XML – standardowy model dokumentów XML
• DOM HTML – standardowy model dokumentów HTML

DOM HTML

HTML DOM jest standardem model obiektowy i interfejs programistyczny dla Dokumenty HTML. DOM HTML to sposób na reprezentowanie strony internetowej w formacie a zorganizowany, hierarchiczny sposób dzięki czemu programiści i użytkownicy będą mogli łatwiej przeglądać dokument.

Dzięki HTML DOM możemy łatwo uzyskać dostęp do znaczników, identyfikatorów, klas, atrybutów lub elementów HTML i manipulować nimi, korzystając z poleceń lub metod dostarczonych przez obiekt dokumentu.

Za pomocą DOM JavaScript uzyskujemy dostęp do HTML i CSS strony internetowej, a także możemy modyfikować zachowanie elementów HTML.

Dlaczego DOM jest wymagany?

HTML jest do tego przyzwyczajony Struktura strony internetowe i JavaScript służy do dodawania zachowanie do naszych stron internetowych. Kiedy plik HTML jest ładowany do przeglądarki, JavaScript nie może bezpośrednio zrozumieć dokumentu HTML. Zatem interpretuje i współdziała z obiektowym modelem dokumentu (DOM), który jest tworzony przez przeglądarkę na podstawie dokumentu HTML.

DOM jest w zasadzie reprezentacją tego samego dokumentu HTML, ale w strukturze przypominającej drzewo złożonej z obiektów. JavaScript nie rozumie tagów() w dokumencie HTML, ale potrafi zrozumieć obiekt h1 w DOM.

JavaScript z łatwością interpretuje DOM, używając go jako pomostu umożliwiającego dostęp do elementów i manipulowanie nimi. DOM Javascript umożliwia dostęp do każdego z obiektów (h1, p, itp.) za pomocą różnych funkcji.

Model obiektowy dokumentu (DOM) jest niezbędny w tworzeniu stron internetowych z kilku powodów:

• Dynamiczne strony internetowe: Umożliwia tworzenie dynamicznych stron internetowych. Umożliwia JavaScriptowi dynamiczny dostęp do zawartości, struktury i stylu strony oraz manipulowanie nią, co zapewnia interaktywne i responsywne doświadczenia internetowe, takie jak aktualizacja treści bez ponownego ładowania całej strony lub natychmiastowego reagowania na działania użytkownika.
• Interaktywność: Dzięki DOM możesz reagować na działania użytkownika (takie jak kliknięcia, wprowadzanie danych lub przewijanie) i odpowiednio modyfikować stronę internetową.
• Aktualizacje treści: Jeśli chcesz zaktualizować treść bez odświeżania całej strony, DOM umożliwia ukierunkowane zmiany, dzięki czemu aplikacje internetowe są bardziej wydajne i przyjazne dla użytkownika.
• Kompatybilność z różnymi przeglądarkami: Różne przeglądarki mogą renderować HTML i CSS na różne sposoby. DOM zapewnia ustandaryzowany sposób interakcji z elementami strony.
• Aplikacje jednostronicowe (SPA): Aplikacje zbudowane przy użyciu frameworków takich jak React lub Angular w dużym stopniu opierają się na modelu DOM w celu wydajnego renderowania i aktualizowania treści na pojedynczej stronie HTML bez konieczności ponownego ładowania całej strony.

Struktura DOM

DOM można traktować jako drzewo lub las (więcej niż jedno drzewo). Termin model konstrukcji jest czasami używany do opisania drzewiastej reprezentacji dokumentu.

Każda gałąź drzewa kończy się węzłem, a każdy węzeł zawiera obiekty. Do węzłów można dodawać detektory zdarzeń i uruchamiać je po wystąpieniu danego zdarzenia. Jedną z ważnych właściwości modeli struktur DOM jest izomorfizm strukturalny : jeśli dowolne dwie implementacje DOM zostaną użyte do utworzenia reprezentacji tego samego dokumentu, utworzą ten sam model konstrukcji, z dokładnie tymi samymi obiektami i relacjami.

Dlaczego DOM nazywany jest modelem obiektowym?

Dokumenty modeluje się za pomocą obiektów, a model obejmuje nie tylko strukturę dokumentu, ale także zachowanie dokumentu i obiektów, z których się składa, podobnie jak elementy tagów z atrybutami w HTML.

Właściwości DOM

Zobaczmy właściwości obiektu dokumentu, do których obiekt dokumentu może uzyskać dostęp i które można modyfikować.

Reprezentacja DOM

• Obiekt Okno : Obiekt okna to obiekt przeglądarki, który zawsze znajduje się na górze hierarchii. To jest jak API, które służy do ustawiania i uzyskiwania dostępu do wszystkich właściwości i metod przeglądarki. Jest on tworzony automatycznie przez przeglądarkę.
• Obiekt dokumentu: Kiedy dokument HTML jest ładowany do okna, staje się obiektem dokumentu. Obiekt „dokument” ma różne właściwości, które odnoszą się do innych obiektów, które umożliwiają dostęp i modyfikację zawartości strony internetowej. Jeśli istnieje potrzeba uzyskania dostępu do dowolnego elementu strony HTML, zawsze zaczynamy od dostępu do obiektu „dokument”. Obiekt dokumentu jest właściwością obiektu okna.
• Obiekt formularza: Jest reprezentowany przez formularz tagi.
• Obiekt łącza : Jest reprezentowany przez połączyć tagi.
• Obiekt kotwiczny : Jest reprezentowany przez href tagi.
• Elementy sterujące formularza: Formularz może zawierać wiele elementów sterujących, takich jak pola tekstowe, przyciski, przyciski radiowe, pola wyboru itp.

Metody obiektu dokumentu

DOM udostępnia różne metody umożliwiające użytkownikom interakcję z dokumentem i manipulowanie nim. Niektóre powszechnie stosowane metody DOM to:

Przykład: W tym przykładzie używamy identyfikatora elementu HTML, aby znaleźć element HTML DOM.

    
techcodeview.comh2>
Portal informatyczny dla maniaków. p>
Ten przykład ilustruje getElementByIdb>. p>
p>