HTML DOM (Document Object Model) ist eine hierarchische Darstellung von HTML-Dokumenten. Es definiert die Struktur und Eigenschaften von Elementen auf einer Webseite und ermöglicht JavaScript den dynamischen Zugriff auf, die Bearbeitung und die Aktualisierung von Inhalten, wodurch die Interaktivität und Funktionalität verbessert wird.
Notiz : Es wird als logische Struktur bezeichnet, da DOM keine Beziehung zwischen Objekten angibt.
Kein Flip-Flop
Inhaltsverzeichnis
- Warum ist DOM erforderlich?
- Struktur von DOM
- Eigenschaften von DOM
- Methoden des Dokumentobjektmodells
- Welches DOM ist das nicht?
- DOM-Ebenen:
Was ist DOM?
DOM , oder Dokumentobjektmodell ist eine Programmierschnittstelle, die strukturierte Dokumente wie z. B. darstellt HTML Und XML als Baum von Objekten. Es definiert, wie mit Skriptsprachen wie JavaScript auf Dokumentelemente zugegriffen, sie bearbeitet und geändert wird.
Im Grunde ist das Dokumentobjektmodell also ein API das HTML- oder XML-Dokumente darstellt und mit ihnen interagiert.
Das DOM ist ein W3C (World Wide Web Konsortium) Standard und es definiert einen Standard für den Zugriff auf Dokumente.
Der W3C-Dom-Standard ist in drei verschiedene Teile unterteilt:
- Kern-DOM – Standardmodell für alle Dokumenttypen
- XML-DOM – Standardmodell für XML-Dokumente
- HTML-DOM – Standardmodell für HTML-Dokumente
HTML-DOM
HTML DOM ist ein Standard Objektmodell und Programmierschnittstelle für HTML-Dokumente. HTML-DOM ist eine Möglichkeit, die Webseite in einem darzustellen strukturierte hierarchische Art und Weise Dadurch wird es für Programmierer und Benutzer einfacher, durch das Dokument zu gleiten.
Mit HTML DOM können wir mithilfe von Befehlen oder Methoden, die vom Dokumentobjekt bereitgestellt werden, problemlos auf Tags, IDs, Klassen, Attribute oder Elemente von HTML zugreifen und diese bearbeiten.
Mithilfe von DOM-JavaScript erhalten wir Zugriff auf HTML sowie CSS der Webseite und können auch das Verhalten der HTML-Elemente ändern.
Warum ist DOM erforderlich?
HTML ist gewohnt Struktur die Webseiten und Javascript wird zum Hinzufügen verwendet Verhalten zu unseren Webseiten. Wenn eine HTML-Datei in den Browser geladen wird, kann das JavaScript das HTML-Dokument nicht direkt verstehen. Es interpretiert also das Document Object Model (DOM), das vom Browser auf Basis des HTML-Dokuments erstellt wird, und interagiert mit diesem.
DOM ist im Grunde die Darstellung desselben HTML-Dokuments, jedoch in einer baumartigen Struktur, die aus Objekten besteht. JavaScript kann die Tags() im HTML-Dokument nicht verstehen, kann aber das Objekt h1 im DOM verstehen.
JavaScript interpretiert DOM problemlos und nutzt es als Brücke für den Zugriff auf die Elemente und deren Bearbeitung. DOM-Javascript ermöglicht den Zugriff auf jedes der Objekte (h1, p usw.) mithilfe verschiedener Funktionen.
Das Document Object Model (DOM) ist aus mehreren Gründen für die Webentwicklung unerlässlich:
- Dynamische Webseiten: Es ermöglicht Ihnen, dynamische Webseiten zu erstellen. Dadurch kann JavaScript dynamisch auf Seiteninhalte, -struktur und -stil zugreifen und diese bearbeiten, was zu interaktiven und reaktionsfähigen Weberlebnissen führt, z. B. zum Aktualisieren von Inhalten, ohne die gesamte Seite neu laden zu müssen, oder zum sofortigen Reagieren auf Benutzeraktionen.
- Interaktivität: Mit dem DOM können Sie auf Benutzeraktionen (wie Klicks, Eingaben oder Scrollen) reagieren und die Webseite entsprechend ändern.
- Inhaltsaktualisierungen: Wenn Sie den Inhalt aktualisieren möchten, ohne die gesamte Seite zu aktualisieren, ermöglicht das DOM gezielte Änderungen, wodurch die Webanwendungen effizienter und benutzerfreundlicher werden.
- Cross-Browser-Kompatibilität: Verschiedene Browser rendern HTML und CSS möglicherweise auf unterschiedliche Weise. Das DOM bietet eine standardisierte Möglichkeit zur Interaktion mit Seitenelementen.
- Single-Page-Anwendungen (SPAs): Anwendungen, die mit Frameworks wie React oder Angular erstellt wurden, verlassen sich stark auf das DOM, um Inhalte innerhalb einer einzelnen HTML-Seite effizient darzustellen und zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.
Struktur von DOM
DOM kann als Baum oder Wald (mehr als ein Baum) betrachtet werden. Der Begriff Strukturmodell wird manchmal verwendet, um die baumartige Darstellung eines Dokuments zu beschreiben.
Jeder Zweig des Baums endet in einem Knoten und jeder Knoten enthält Objekte. Ereignis-Listener können zu Knoten hinzugefügt und beim Auftreten eines bestimmten Ereignisses ausgelöst werden. Eine wichtige Eigenschaft von DOM-Strukturmodellen ist Strukturisomorphismus : Wenn zwei beliebige DOM-Implementierungen verwendet werden, um eine Darstellung desselben Dokuments zu erstellen, erstellen sie dasselbe Strukturmodell mit genau denselben Objekten und Beziehungen.
Warum wird DOM als Objektmodell bezeichnet?
Dokumente werden mithilfe von Objekten modelliert, und das Modell umfasst nicht nur die Struktur eines Dokuments, sondern auch das Verhalten eines Dokuments und der Objekte, aus denen es besteht, wie Tag-Elemente mit Attributen in HTML.
Eigenschaften von DOM
Sehen wir uns die Eigenschaften des Dokumentobjekts an, auf die das Dokumentobjekt zugreifen und die es ändern kann.
Darstellung des DOM
- Fensterobjekt : Fensterobjekt ist ein Objekt des Browsers, das immer an der Spitze der Hierarchie steht. Es ist wie eine API, die zum Festlegen und Zugreifen auf alle Eigenschaften und Methoden des Browsers verwendet wird. Es wird automatisch vom Browser erstellt.
- Dokumentobjekt: Wenn ein HTML-Dokument in ein Fenster geladen wird, wird es zu einem Dokumentobjekt. Das Objekt „Dokument“ verfügt über verschiedene Eigenschaften, die auf andere Objekte verweisen, die den Zugriff auf den Inhalt der Webseite und dessen Änderung ermöglichen. Wenn auf ein Element einer HTML-Seite zugegriffen werden muss, beginnen wir immer mit dem Zugriff auf das Objekt „Dokument“. Das Dokumentobjekt ist Eigentum des Fensterobjekts.
- Formularobjekt: Es wird vertreten durch bilden Stichworte.
- Objekt verknüpfen : Es wird vertreten durch Verknüpfung Stichworte.
- Ankerobjekt : Es wird vertreten durch ein href Stichworte.
- Formularsteuerelemente: Formulare können viele Steuerelemente wie Textfelder, Schaltflächen, Optionsfelder, Kontrollkästchen usw. enthalten.
Methoden des Dokumentobjekts
DOM stellt verschiedene Methoden bereit, mit denen Benutzer mit dem Dokument interagieren und es bearbeiten können. Einige häufig verwendete DOM-Methoden sind:
| Methode | Beschreibung |
|---|---|
| schreiben (Zeichenfolge) | Schreibt die angegebene Zeichenfolge in das Dokument. |
| getElementById() | Gibt das Element mit dem angegebenen ID-Wert zurück. |
| getElementsByName() | Gibt alle Elemente mit dem angegebenen Namenswert zurück. |
| getElementsByTagName() | Gibt alle Elemente mit dem angegebenen Tag-Namen zurück. |
| getElementsByClassName() | Gibt alle Elemente mit dem angegebenen Klassennamen zurück. |
Beispiel: In diesem Beispiel verwenden wir die HTML-Element-ID, um das DOM-HTML-Element zu finden.
HTML techcodeview.comh2>
Ein Informatikportal für Geeks. p>
Dieses Beispiel veranschaulicht das getElementByIdb>-Methode. p>
p>