Html dom

Um ein HTML -Dokument dynamischer und interaktiver zu gestalten, muss JavaScript auf den Dokumentinhalt zugreifen und den Benutzer identifizieren, der mit ihm interagiert. JavaScript führt dies durch die Interaktion mit dem Browser mit Hilfe des HTML DOM (Dokumentobjektmodell), seiner Eigenschaften, Ereignisse und Methoden durch.

In dieser Beschreibung wird HTML DOM, seine Bedeutung und seine Struktur erörtert. Wir werden auch über die Eigenschaften und Methoden des Dokumentobjektmodells und der DOM -Ebene sprechen.

Html dom

Das HTML -Dokumentobjektmodell oder das HTML -DOM ist eine XML- und HTML -Programmierschnittstelle. Das Dokumentobjektmodell erstellt eine logische Dokumentstruktur und definiert die Methode zum Zugriff und zu ändern. Da HTML DOM keine Objektbeziehungen identifiziert, wird es als logische Struktur bezeichnet.

HTML DOM ist auch dafür bekannt. HTML DOM ermöglicht es Ihnen, auf HTML -Elemente, Klassen, Tags, Attribute und IDs zuzugreifen und zu manipulieren, indem Sie die angebotenen Methoden und Befehle verwenden.

Warum brauchen Sie HTML DOM?

JavaScript wird verwendet, um verwandte Funktionen hinzuzufügen, wenn Sie HTML verwenden, um Ihre Webseiten zu strukturieren. Wenn ein HTML -Dokument im Browser geladen wird, kann JavaScript es nicht direkt verstehen. Daher wird ein entsprechendes Dokumentobjektmodell erstellt. Das generierte DOM repräsentiert das gleiche HTML -Dokument mit Hilfe der Objekte unterschiedlich. Danach kann JavaScript die HTML DOM leicht interpretieren.

Zum Beispiel kann JavaScript in einem HTML -Dokument die Tags nicht direkt verstehen (

Absatz

); Es kann jedoch das Objekt verstehen “P”Im Dokumentobjektmodell. Mit dieser Fähigkeit kann JavaScript verschiedene Methoden verwenden, um auf die zusätzlichen Objekte von HTML -Dokumenten zuzugreifen.

Struktur von HTML DOM

Das HTML-DOM- oder Dokumentobjektmodell verfügt über eine baumähnliche Struktur, wobei der Baum das Strukturmodell des Dokuments definiert. Im HTML -Dom -Struktur -Modell “,“struktureller Isomorphismus”Ist eine wesentliche Eigenschaft, die besagt, dass, wenn Sie zwei DOM -Implementierungen zum Erstellen einer Darstellung oder Modell desselben HTML.

Warum nennen wir HTML DOM ein Dokumentmodell?

HTML -Objekte werden zum Modellieren von Dokumenten verwendet. Dieses Modell umfasst die Dokumentstruktur, die Objekte und ihr Verhalten, wie die HTML -Tagelemente mit ihren Attributen.

HTML DOM -Eigenschaften

Schauen wir uns nun die Eigenschaften des Dokumentobjekts an, mit denen das Dokumentobjekt abgerufen und geändert werden kann:

• Fensterobjekt: Sie werden immer das „Fensterobjekt“ oben in der DOM -Hierarchie sehen.
• Dokumentobjekt: Wenn Sie ein HTML -Dokument in einem Browser laden, wird es in ein Dokumentobjekt konvertiert.
• Ankerobjekt: HREF -Tags werden zur Darstellung der Ankerobjekte verwendet.
• Formobjekt: Formular -Tags werden zur Darstellung der Formularobjekte verwendet.
• Linkobjekt: Link -Tags werden zur Darstellung der Link -Objekte verwendet.
• Formsteuerelemente: Formulare können auch andere Steuerelemente wie Schaltflächen, Zurücksetzen, Optionszahlen, TextArea und Kontrollkästchen haben.

HTML -Dokumentobjektmethoden

Hier finden Sie einige nützliche HTML -Dokumentobjektmethoden, die Sie entsprechend Ihren Anforderungen verwenden können:

• GetElementByClassName (): Die Methode GetElementByClassName () wird zum Abrufen von Elementen mit dem angegebenen Klassennamen verwendet.
• GetElementByTagName (): Die Methode GetElementByTagName () wird zum Abrufen von Elementen mit dem hinzugefügten Tag -Namen verwendet.
• GetElementByName (): Die Methode von GetelementByName () wird zum Abrufen von Elementen mit dem angegebenen Namenswert verwendet.
• GetElementById (): Die Methode von GetElementById () wird zum Abrufen von Elementen mit dem angegebenen ID -Wert verwendet.
• schreiben(): Die Methode write () wird zum Schreiben der angegebenen Zeichenfolge im Dokument verwendet.

Beispiel 1: Finden und erhalten Sie HTML -Element durch ID in JavaScript

Im folgenden Beispiel haben wir die GetElementById () -Methode verwendet, um die HTML-DOM mit der ID zu findenP1”:

Dies ist LinuxHint.com

Finden und holen Sie sich HTML -DOM -Elemente nach ID

Dies ist ein JavaScript -Programm, das die Methode "getElements byid" verwendet

Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:

Die Ausführung des oben gegebenen JavaScript-Programms zeigt die folgende Ausgabe an:

Beispiel 2: HTML -DOM -Elemente -Darstellung

Das folgende Beispiel zeigt die Darstellung von HTML -Elementen in DOM (Dokumentobjektmodell):

Fahrrad	Flugzeug
LKW	Bus

Hier ist die Darstellung der oben gegebenen Elemente in einer baumartigen Struktur:

HTML DOM -Ebene

HTML DOM besteht aus vier Ebenen: Stufe 0, Stufe 1, Stufe 2 und Stufe 3.

DOM Level 0

Diese Ebene bietet einen Schnittstellensatz auf niedriger Ebene.

DOM Level 1

DOM Level 1 umfasst Html Und KERN Teile. HTML liefert hochgradige Schnittstellen, die verwendet werden können, um HTML-Dokumente darzustellen, und der Kernteil wird verwendet, um das strukturierte Dokument darzustellen.

DOM Level 2

DOM Level 2 basiert auf sechs Spezifikationen: Bereich, Traversal, Stil, Ereignisse und Core2.

• BEREICH: Es ermöglicht HTML -Programme, um einen Inhaltsbereich im Dokument dynamisch zuzuweisen.
• Durchqueren: Es ermöglicht HTML -Programmen, das Dokument dynamisch zu durchqueren.
• STIL: Es ermöglicht Programmen zum Abrufen und Festlegen der Inhalte der Stilblätter.
• VERANSTALTUNGEN: Wenn ein Benutzer mit einer Webseite interagiert, sind Ereignisse die Skripte, die als Ergebnis davon ausgeführt werden.
• Ansichten: Es ermöglicht HTML -Programme, um den Inhalt des Dokuments abzurufen und festzulegen.

DOM Level 3

DOM Level 3 basiert auf fünf Spezifikationen: XPATH, Ereignisse, Validierung, Speichern, Laden und Core3.

• XPath: Es ist eine Pfadsprache, die zum Zugriff auf die Baumstruktur von DOM verwendet wird.
• VERANSTALTUNGEN: Es verbessert die Funktionalität von DOM Level 2 -Ereignissen.
• VALIDIERUNG: Es ermöglicht das HTML -Programm, um die Struktur und den Inhalt des Dokuments zu ändern und gleichzeitig sicherzustellen.
• SPEICHERN Und BELASTUNG: Das HTML -Programm ermöglicht das dynamische Laden und Speichern des XML -Dokumentinhalts in einem DOM -Dokument.
• Core3: Es verbessert die Funktionalität des DOM -Level -2 -Kerns.

Abschluss

HTML DOM oder das Dokumentobjektmodell sind entscheidend für die Entwicklung interaktiver Websites. Es handelt sich um eine Benutzeroberfläche, mit der eine Programmiersprache den Stil, die Struktur und den Inhalt der Website ändern kann. HTML DOM fungiert auch als Schnittstelle zwischen HTML und JavaScript. In dieser Beschreibung wurde HTML DOM, seine Bedeutung und seine Struktur besprochen. Wir haben auch über die Eigenschaften und Methoden des Dokumentobjektmodells und der DOM -Ebene gesprochen.