HTML DOM: Verwendung des Dokumentobjektmodells



Dieser Artikel vermittelt Ihnen detaillierte und umfassende Kenntnisse über HTML DOM, Document Object Model mit Beispielen.

Ein Dokumentobjekt repräsentiert das Dokument, das in diesem Fenster angezeigt wird. Das Dokumentobjekt verfügt über verschiedene Eigenschaften, die sich auf andere Objekte beziehen, die den Zugriff auf und die Änderung von Dokumentinhalten ermöglichen. In diesem Artikel werden wir HTML DOM verstehen.

HTML-DOM-Konzept

Die Art und Weise, wie auf einen dokumentierten Inhalt zugegriffen und dieser geändert wird, wird als bezeichnet Dokumentobjektmodell oder DOM. Die Objekte sind in einer Hierarchie organisiert. Diese hierarchische Struktur gilt für die Organisation von Objekten in einem Webdokument.





  • Fensterobjekt & minus Oben in der Hierarchie. Es ist das äußerste Element der Objekthierarchie.
  • Dokumentobjekt & minus Jedes HTML-Dokument, das in ein Fenster geladen wird, wird zu einem Dokumentobjekt. Das Dokument enthält den Inhalt der Seite.
  • Formularobjekt & minus Alles, was in den Tags… enthalten ist, legt das Formularobjekt fest.
  • Formularsteuerelemente & Minus Das Formularobjekt enthält alle für dieses Objekt definierten Elemente wie Textfelder, Schaltflächen, Optionsfelder und Kontrollkästchen.

Was ist das HTML-DOM?

Das Dokumentobjektmodell ist eine Programmier-API für Dokumente. Das Objektmodell selbst ähnelt stark der Struktur der von ihm modellierten Dokumente. Betrachten Sie beispielsweise diese Tabelle aus einem HTML-Dokument:

 
Schattiges Waldstück äolisch
Über den Fluss, Charlie Dorian

Was das HTML-DOM NICHT ist

Dieser Abschnitt soll ein genaueres Verständnis des Dokumentobjektmodells vermitteln, indem es von anderen Systemen unterschieden wird, die möglicherweise so aussehen.



Obwohl das Dokumentobjektmodell stark von dynamischem HTML beeinflusst wurde, implementiert es in Ebene 1 nicht das gesamte dynamische HTML. Insbesondere wurden Ereignisse noch nicht definiert. Level 1 soll eine solide Grundlage für diese Art von Funktionalität schaffen, indem ein robustes, flexibles Modell des Dokuments selbst bereitgestellt wird.

Das Dokumentobjektmodell ist keine binäre Spezifikation. In derselben Sprache geschriebene Programme für das Dokumentobjektmodell sind plattformübergreifend mit dem Quellcode kompatibel, das Dokumentobjektmodell definiert jedoch keine Form der binären Interoperabilität.

Lookup-Transformation im Informatica-Beispiel

Das Dokumentobjektmodell ist keine Möglichkeit, Objekte in XML oder HTML zu speichern. Anstatt anzugeben, wie Objekte in XML dargestellt werden dürfen, gibt das Dokumentobjektmodell an, wie XML- und HTML-Dokumente als Objekte dargestellt werden, damit sie in objektorientierten Programmen verwendet werden können.



HTML DOM ist NICHT

Das Dokumentobjektmodell ist kein Satz von Datenstrukturen, sondern ein Objektmodell, das Schnittstellen angibt. Obwohl dieses Dokument Diagramme enthält, die Eltern-Kind-Beziehungen zeigen, handelt es sich um logische Beziehungen, die von den Programmierschnittstellen definiert werden, und nicht um Darstellungen bestimmter interner Datenstrukturen.

Das Dokumentobjektmodell definiert nicht die „wahre innere Semantik“ von XML oder HTML. Die Semantik dieser Sprachen wird durch die Sprachen selbst definiert.

Das Dokumentobjektmodell ist ein Programmiermodell, das diese Semantik berücksichtigt. Das Dokumentobjektmodell hat keine Auswirkungen auf die Art und Weise, wie Sie XML- und HTML-Dokumente schreiben. Dokumente, die in diesen Sprachen geschrieben werden können, können im Dokumentobjektmodell dargestellt werden.

Das Dokumentobjektmodell ist trotz seines Namens kein Konkurrent zum Komponentenobjektmodell (COM). COM ist wie CORBA eine sprachunabhängige Methode zum Festlegen von Schnittstellen und Objekten. Das Document Object Model besteht aus einer Reihe von Schnittstellen und Objekten, die zum Verwalten von HTML- und XML-Dokumenten entwickelt wurden. Das DOM kann seinimplementiert mit sprachunabhängigen Systemen wie COM oder CORBA kann es auch mit sprachspezifischen Bindungen wie den in diesem Dokument angegebenen Java- oder ECMAScript-Bindungen implementiert werden.

Woher das Dokumentobjektmodell kam

Das Dokumentobjektmodell wurde als Spezifikation entwickelt, damit JavaScript-Skripte und Java-Programme zwischen Webbrowsern portiert werden können. Dynamisches HTML war der unmittelbare Vorfahr des Dokumentobjektmodells und wurde ursprünglich hauptsächlich in Bezug auf Browser gedacht.

virtuelle c ++ - Funktion = 0

Bei der Bildung der Arbeitsgruppe 'Dokumentobjektmodell' kamen jedoch auch Anbieter in anderen Domänen hinzu, darunter HTML- oder XML-Editoren und Dokumentrepositorys. Einige dieser Anbieter hatten bereits vor der Entwicklung von XML mit SGML zusammengearbeitet. Das Document Object Model wurde von SGML Groves und dem HyTime-Standard beeinflusst. Einige dieser Anbieter hatten auch eigene Objektmodelle für Dokumente entwickelt, um diese bereitzustellenProgrammier-APIs für SGML / XML-Editoren oder Dokumentrepositorys, und diese Objektmodelle haben auch das Dokumentobjektmodell beeinflusst.

Eigenschaften von HTML DOM

Sehen wir uns die Eigenschaften der Dokumentobjekte an, auf die das Dokumentobjekt zugreifen und die es ändern kann.

DOM-Graph
  1. Fensterobjekt: Fensterobjekt steht immer ganz oben in der Hierarchie.
  2. Dokumentobjekt: Wenn ein HTML-Dokument in ein Fenster geladen wird, wird es zu einem Dokumentobjekt.
  3. Formularobjekt: Es wird vertreten durch bilden Stichworte.
  4. Objekte verknüpfen: Es wird vertreten durch Verknüpfung Stichworte.
  5. Ankerobjekte: Es wird vertreten durch ein href Stichworte.
  6. Formularsteuerungselemente: Das Formular kann viele Steuerelemente wie Textfelder, Schaltflächen, Optionsfelder und Kontrollkästchen usw. enthalten.

Methoden des Dokumentobjekts ::

  1. Schreiben ('Zeichenfolge'): schreibt die angegebene Zeichenfolge in das Dokument.
  2. getElementById (): Gibt das Element mit dem angegebenen ID-Wert zurück.
  3. getElementsByName (): Gibt alle Elemente mit dem angegebenen Namenswert zurück.
  4. getElementsByTagName (): Gibt alle Elemente mit dem angegebenen Tag-Namen zurück.
  5. getElementsByClassName (): Gibt alle Elemente mit dem angegebenen Klassennamen zurück.

HTML-Elemente finden

Wenn Sie mit JavaScript auf HTML-Elemente zugreifen möchten, müssen Sie zuerst die Elemente finden.

Es gibt verschiedene Möglichkeiten, dies zu tun:

  • Suchen von HTML-Elementen anhand der ID
  • Suchen von HTML-Elementen anhand des Tag-Namens
  • Suchen von HTML-Elementen anhand des Klassennamens

HTML-Element anhand der ID finden

Der einfachste Weg, ein HTML-Element im DOM zu finden, ist die Verwendung der Element-ID.

Beispiel

Suchen von HTML-Elementen anhand des Tag-Namens

In diesem Beispiel wird das Element mit id = 'main' gefunden und anschließend alle gefunden

Elemente innerhalb von 'main':

Damit sind wir am Ende dieses HTML-DOM-Artikels angelangt. Ich hoffe, Sie haben die verschiedenen Aspekte des HTML-DOM, des Dokumentobjektmodells, verstanden.

String in Date Java konvertieren

Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.

Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „HTML Images“ und wir werden uns bei Ihnen melden.