Das Document Object Model oder "DOM" ist eine Programmierschnittstelle für den Zugriff auf Elemente von Webseiten. Grundsätzlich handelt es sich um eine Seiten-API, mit der Sie den Inhalt, die Struktur und die Stile einer Seite lesen und bearbeiten können. Mal sehen, wie es funktioniert und wie es funktioniert.

Wie ist eine Webseite aufgebaut?

Das Konvertieren eines HTML-Quelldokuments in eine gerenderte stilisierte und interaktive Seite wird als "Kritischer Renderpfad" bezeichnet. Obwohl dieser Prozess in mehrere Schritte unterteilt werden kann, wie ich unter Grundlegendes zum kritischen Rendering-Pfad beschrieben habe, können diese Schritte grob in zwei Schritte unterteilt werden. Im ersten Fall analysiert der Browser das Dokument, um zu bestimmen, was letztendlich auf der Seite angezeigt wird, und im zweiten Fall rendert der Browser.

Das Ergebnis des ersten Schritts ist ein sogenannter „Renderbaum“. Baum rendern Ist eine Darstellung der HTML-Elemente, die auf der Seite angezeigt werden, und der zugehörigen Stile. Um diesen Baum zu erstellen, benötigt der Browser zwei Dinge:

1. CSSOM, Präsentation von Stilen, die mit Elementen verknüpft sind
2. DOM, Elementdarstellung

Woraus besteht das DOM?

DOM ist die Objektdarstellung des ursprünglichen HTML-Dokuments. Es gibt einige Unterschiede, wie wir weiter unten sehen werden, aber es ist im Wesentlichen ein Versuch, die Struktur und den Inhalt eines HTML-Dokuments in ein Objektmodell umzuwandeln, das von verschiedenen Programmen verwendet werden kann.

Die Struktur von DOM-Objekten wird durch einen sogenannten "Baum von Knoten" dargestellt. Es wird so genannt, weil es als ein Baum mit einem einzigen Elternteil betrachtet werden kann, der sich in mehrere untergeordnete Zweige verzweigt, von denen jeder Blätter haben kann. In diesem Fall ist das übergeordnete "Element" das Stammelement, die untergeordneten "Zweige" sind die verschachtelten Elemente und die "Blätter" sind der Inhalt innerhalb der Elemente.

Nehmen wir dieses HTML-Dokument als Beispiel:

Hallo Welt!

Wie gehts?

Dieses Dokument kann als folgender Knotenbaum dargestellt werden:

• html
  • kopf
    • titel
      • Meine erste Webseite
  • körper
    • h1
      • Hallo Welt!
    • p
      • Wie gehts?

Was das DOM nicht ist

Im obigen Beispiel scheint das DOM eine 1: 1-Zuordnung des ursprünglichen HTML-Dokuments zu sein. Wie gesagt, es gibt jedoch Unterschiede. Um vollständig zu verstehen, was das DOM ist, müssen wir uns ansehen, was es nicht ist.

DOM ist keine Kopie des ursprünglichen HTML-Codes

Obwohl das DOM aus einem HTML-Dokument erstellt wird, ist es nicht immer genau dasselbe. Es gibt zwei Fälle, in denen das DOM vom ursprünglichen HTML-Code abweichen kann.

1. Wenn HTML Markup-Fehler enthält

Das DOM ist die Schnittstelle für den Zugriff auf die tatsächlichen (d. H. Bereits gerenderten) Elemente eines HTML-Dokuments. Beim Erstellen des DOM kann der Browser selbst einige Fehler im HTML-Code korrigieren.

Betrachten Sie dieses HTML-Dokument als Beispiel:

Hallo Welt!

Dem Dokument fehlen Elemente und Das ist ein Muss für HTML. Wenn wir uns jedoch den resultierenden DOM-Baum ansehen, können wir sehen, dass dies behoben wurde:

• html
  • kopf
  • körper
    • Hallo Welt!

  2. Wenn das DOM durch Javascript geändert wird

  Das DOM selbst ist nicht nur eine Schnittstelle zum Anzeigen des Inhalts eines HTML-Dokuments, sondern kann auch geändert werden.

  Wir können zum Beispiel mit Javascript zusätzliche Knoten für das DOM erstellen.

  Var newParagraph \u003d document.createElement ("p"); varagraphContent \u003d document.createTextNode ("Ich bin neu!"); newParagraph.appendChild (AbsatzContent); document.body.appendChild (newParagraph);

  Dieser Code ändert das DOM, die Änderungen werden jedoch nicht im HTML-Dokument angezeigt.

  Das DOM ist nicht das, was Sie im Browser sehen (d. H. Der Renderbaum).

  Im Browser-Ansichtsfenster sehen Sie den Renderbaum, der, wie gesagt, eine Kombination aus DOM und CSSOM ist. Der Unterschied zwischen dem DOM und dem Renderbaum besteht darin, dass letzterer nur aus dem besteht, was letztendlich auf dem Bildschirm angezeigt wird.

  Da sich der Renderbaum nur mit dem befasst, was angezeigt wird, werden Elemente ausgeschlossen, die visuell ausgeblendet sind. Zum Beispiel Elemente, die Stile mit haben anzeige: keine.

  Hallo Welt!

  Wie gehts?

  DOM enthält das Element

  • html
    • kopf
    • körper
      • h1
        • Hallo Welt!
      • p
        • Wie gehts?

  Der Renderbaum und damit das, was im Ansichtsfenster angezeigt wird, werden in diesem Element jedoch nicht berücksichtigt.

  • html
    • körper
      • h1
        • Hallo Welt!

  Das DOM ist nicht das, was in DevTools angezeigt wird

  Dieser Unterschied ist geringfügig geringer, da der DevTools-Elementinspektor dem DOM in einem Browser am nächsten kommt. Der DevTools-Inspektor enthält jedoch zusätzliche Informationen, die sich nicht im DOM befinden.

  Das beste Beispiel hierfür sind CSS-Pseudoelemente. Mit Selektoren erstellte Pseudoelemente :: Vor und :: nach demsind Teil des CSSOM und des Renderbaums, aber technisch nicht Teil des DOM. Dies liegt daran, dass das DOM nur aus dem ursprünglichen HTML-Dokument generiert wird, ohne die auf das Element angewendeten Stile.

  Obwohl Pseudoelemente nicht Teil des DOM sind, befinden sie sich in unserem devtools-Elementinspektor.

  
  

  Zusammenfassung

  Das DOM ist die Schnittstelle zu einem HTML-Dokument. Es wird von Browsern als erster Schritt verwendet, um zu bestimmen, was im Ansichtsfenster gerendert werden soll, und von Javascript-Code, um den Inhalt, die Struktur oder den Stil der Seite zu ändern.

Das DOM wird häufig als DOM-Baum bezeichnet, da es aus einem Baum von Objekten besteht, die als Knoten bezeichnet werden. Nachdem Sie gelernt haben, was das Document Object Model (DOM) ist, wie Sie auf das Dokumentobjekt zugreifen und seine Eigenschaften über die Konsole ändern können, haben wir auch den Unterschied zwischen HTML- und DOM-Quellcode kennengelernt.

In diesem Lernprogramm finden Sie die HTML-Terminologie, die Sie für die Arbeit mit JavaScript und dem DOM benötigen, lernen, was ein Baum und DOM-Knoten sind und wie Sie die häufigsten Knotentypen identifizieren. Sie können auch ein JavaScript-Programm in der Konsole erstellen, um das DOM interaktiv zu ändern.

HTML-Terminologie

Das Verständnis der Begriffe HTML und JavaScript ist für die Arbeit mit dem DOM von entscheidender Bedeutung. Werfen wir einen kurzen Blick auf die Grundbegriffe.

Schauen Sie sich dieses HTML-Element an:

Zuhause

Es enthält einen Anker, der ein Link zu index.html ist.

• eine Markierung
• href - Attribut
• html - Attributwert
• Home - Text.

Alles zwischen dem öffnenden und dem schließenden Tag bildet ein HTML-Element.

Kehren wir zur Datei index.html aus dem vorherigen Tutorial zurück:

Dokumentobjektmodell

Der einfachste Weg, mit JavaScript auf ein Element zuzugreifen, ist das Attribut id. Fügen wir den obigen Link zu unserer index.html-Datei mit id \u003d "nav" hinzu.

...

Dokumentobjektmodell

Zuhause

...

Laden (oder aktualisieren) Sie die Seite in einem Browserfenster und überprüfen Sie das DOM, um sicherzustellen, dass der Code aktualisiert wurde.

Verwenden Sie dann die Methode getElementById (), um auf das gesamte Element zuzugreifen. Geben Sie Folgendes in die Konsole ein:

document.getElementById ("nav");
Zuhause

Die Methode getElementById () ruft das gesamte Element ab. Anstatt dieses Objekt und diese Methode jedes Mal eingeben zu müssen, wenn Sie auf den Navigationslink zugreifen müssen, können Sie das Element jetzt in eine Variable einfügen, um die Arbeit zu vereinfachen.

let navLink \u003d document.getElementById ("nav");

Die Variable navLink enthält den Anker. Hier können Sie Attribute und Werte einfach ändern. Um beispielsweise die Position des Links zu ändern, ändern Sie das href-Attribut:

navLink.href \u003d "https://www.wikipedia.org";

Sie können den Text auch ändern, indem Sie die Eigenschaft textContent neu zuweisen:

navLink.textContent \u003d "Zu Wikipedia navigieren";

Wenn Sie dieses Element in der Konsole anzeigen oder das Element-Tag überprüfen, können Sie sehen, wie es aktualisiert wurde.

navLink;
Navigieren Sie zu Wikipedia

Die Änderungen werden auch im Frontend berücksichtigt.

Durch das Aktualisieren der Seite werden alle ursprünglichen Werte zurückgegeben.

An dieser Stelle sollten Sie wissen, wie Sie mit der document-Methode auf ein Element zugreifen, einer Variablen ein Element zuweisen und Eigenschaften und Werte für ein Element ändern.

DOM-Baum und Knoten

Alle Elemente im DOM sind als Knoten definiert. Es gibt viele Arten von Knoten, aber es gibt drei Hauptknoten, mit denen Sie am häufigsten arbeiten:

1. Elementknoten
2. Textknoten
3. Kommentarknoten

Wenn ein HTML-Element ein Element im DOM ist, wird es als Elementknoten bezeichnet. Jeder einzelne Text außerhalb eines Elements ist ein Textknoten, und ein HTML-Kommentar ist ein Kommentarknoten. Neben diesen drei Knotentypen ist das Dokumentobjekt selbst ein Dokumentknoten, der der Stammknoten aller anderen Knoten ist.

Das DOM besteht aus einer Baumstruktur verschachtelter Knoten, die häufig als DOM-Baum bezeichnet wird. Sie wissen wahrscheinlich, was ein Stammbaum ist - eine schematische Darstellung von Familienbanden, die aus Eltern, Kindern und Angehörigen besteht. Knoten im DOM werden aufgrund ihrer Beziehung zu anderen Knoten auch als Eltern und Kind bezeichnet.

Erstellen Sie beispielsweise eine Datei node.html. Fügen Sie einen Textknoten sowie Kommentar- und Elementknoten hinzu.

Ein Elementknoten

Ein Textknoten.

Der HTML-Elementknoten ist der übergeordnete Knoten. Kopf und Körper sind untergeordnete Knoten von HTML. body enthält drei untergeordnete Knoten, die sich alle auf derselben Ebene befinden. Der Knotentyp hat keinen Einfluss auf die Verschachtelungsebene.

Hinweis: Wenn Sie mit HTML-generiertem DOM arbeiten, werden durch Einrücken der HTML-Quelle viele leere Textknoten erstellt, die auf der Registerkarte DevTools Elements nicht sichtbar sind. Mehr dazu unter dem Link.

Knotentyp bestimmen

Jeder Knoten in einem Dokument hat einen Typ, auf den über die Eigenschaft nodeType zugegriffen wird. Das Mozilla Developer Network verfügt über eine aktualisierte Liste aller Knotentypkonstanten. Unten finden Sie eine Tabelle der häufigsten Knotentypen.

Auf der Registerkarte "Elemente" in den Entwicklertools stellen Sie möglicherweise fest, dass bei jedem Klicken und Auswählen einer Zeile im DOM der Wert \u003d\u003d $ 0 daneben angezeigt wird. Dies ist eine sehr bequeme Möglichkeit, auf das aktuell aktive Element zuzugreifen.

Klicken Sie in der node.html-Konsole auf das erste Element in body (h1).

Verwenden Sie die Konsole, um den Typ des ausgewählten Knotens mithilfe der Eigenschaft nodeType zu ermitteln.

$ 0.nodeType;
1

Wenn Sie das Element h1 auswählen, wird 1 als Ausgabe angezeigt, die auf ELEMENT_NODE verweist. Machen Sie dasselbe mit den anderen Knoten und sie geben 3 bzw. 8 zurück.

Wenn Sie wissen, wie auf ein Element zugegriffen wird, können Sie den Typ des Knotens anzeigen, ohne die Elemente im DOM hervorzuheben.

document.body.nodeType;
1

Zusätzlich zu nodeType können Sie auch die Eigenschaft nodeValue verwenden, um den Wert eines Text- oder Kommentarknotens zu ermitteln, und nodeName, um das Tag eines Elements abzurufen.

Ändern des DOM mithilfe von Ereignissen

Bisher haben Sie gesehen, wie Sie das DOM in der Konsole ändern, und diese Änderungen sind bekanntermaßen vorübergehend. Jedes Mal, wenn die Seite aktualisiert wird, gehen alle Änderungen verloren. In Sie haben die Hintergrundfarbe der Seite in der Konsole aktualisiert. Kombinieren Sie das, was Sie in diesem Tutorial gelernt haben, mit dem, was Sie bereits wissen, um eine interaktive Schaltfläche zu erstellen, die die Hintergrundfarbe ändert.

Gehen Sie zurück zu Ihrer index.html-Datei und fügen Sie ein Schaltflächenelement mit einer ID hinzu. Sie müssen auch einen Link zur neuen Datei im neuen js-Verzeichnis js / scripts.js hinzufügen.

Dokumentobjektmodell

Ändern Sie die Hintergrundfarbe

Ein Ereignis in JavaScript ist eine Aktion, die ein Benutzer ausführt. Der Benutzer bewegt die Maus über ein Element, klickt darauf oder auf eine bestimmte Taste auf der Tastatur - dies sind alles Ereignisse. In diesem speziellen Fall sollte die Schaltfläche eine Aktion ausführen, wenn der Benutzer darauf klickt. Dazu müssen Sie einen Ereignis-Listener hinzufügen. Erstellen Sie eine scripts.js-Datei und speichern Sie sie in einem neuen js-Verzeichnis. In der Datei müssen Sie ein Schaltflächenelement definieren und einer Variablen zuweisen.

Mit der Methode addEventListener () wartet die Schaltfläche auf Klicks und führt ihre Funktion nach dem Klicken aus.

...
button.addEventListener ("click", () \u003d\u003e (
// Aktion wird hier gehen
});

Innerhalb der Funktion müssen Sie den Code aus dem vorherigen Handbuch eingeben, um die Hintergrundfarbe in Fuchsia zu ändern.

...

So sieht das Skript aus:

let button \u003d document.getElementById ("changeBackground");
button.addEventListener ("click", () \u003d\u003e (
document.body.style.backgroundColor \u003d "fuchsia";
});

Speichern und schließen Sie die Datei. Aktualisieren Sie die Seite index.html in Ihrem Browser. Klicken Sie auf die neue Schaltfläche und die Hintergrundfarbe der Seite ändert sich.

Stichworte:,

In diesem Tutorial sehen wir uns an, was das DOM ist, warum es benötigt wird und wie es aufgebaut ist.

Was ist DOM?

Wenn ein Browser eine Seite anfordert und seine HTML-Quelle als Antwort vom Server erhält, muss er diese zuerst analysieren. Während der Analyse und Analyse von HTML-Code erstellt der Browser einen darauf basierenden DOM-Baum.

Nach Abschluss dieser und einiger anderer Aktionen beginnt der Browser mit dem Rendern der Seite. Dabei verwendet er natürlich bereits den von ihm erstellten DOM-Baum, nicht den ursprünglichen HTML-Code.

DOM ist ein Dokumentobjektmodell, das der Browser im Computerspeicher basierend auf dem vom Server empfangenen HTML-Code erstellt.

In einfachen Worten ist HTML der Text der Seite, und das DOM ist eine Reihe verwandter Objekte, die vom Browser beim Parsen des Texts erstellt werden.

In Chrome kann der Quellcode der Seite, die der Browser empfängt, auf der Registerkarte Quelle des Bedienfelds Web Developer Tools angezeigt werden.

Chrome verfügt nicht über ein Tool zum Anzeigen des von ihm erstellten DOM-Baums. Es gibt jedoch eine Darstellung dieses DOM-Baums in Form von HTML-Code, der auf der Registerkarte "Elemente" verfügbar ist. Diese DOM-Darstellung ist für einen Webentwickler natürlich viel bequemer. Daher gibt es kein Werkzeug, das das DOM als Baumstruktur darstellen würde.

Objekte in diesem Modell werden aus fast allem in HTML (Tags, Textinhalt, Kommentare usw.) gebildet, einschließlich des Dokuments selbst. Die Verbindungen zwischen diesen Objekten im Modell werden basierend auf dem Wie hergestellt HTML-Elemente befinden sich im Code relativ zueinander.

In diesem Fall kann das DOM des Dokuments nach seiner Erstellung geändert werden. Wenn sich das DOM ändert, zeichnet der Browser das Seitenbild fast sofort neu. Als Ergebnis haben wir das Rendern von Seiten stimmt immer mit dem DOM überein.

Um das DOM programmgesteuert zu lesen und zu ändern, stellt uns der Browser die DOM-API oder mit anderen Worten die programmatische Schnittstelle zur Verfügung. Auf einfache Weise besteht die DOM-API aus einer Vielzahl verschiedener Objekte, deren Eigenschaften und Methoden, die wir verwenden können dOM liest und ändert.

In den meisten Fällen wird JavaScript verwendet, um mit dem DOM zu arbeiten. Heute ist es die einzige Programmiersprache, die in einem Browser geschrieben werden kann.

Warum brauchen wir die DOM-API? Wir brauchen es, damit wir die Seite im laufenden Betrieb mit JavaScript ändern können, d. H. mach es dynamisch und interaktiv.

Die DOM-API bietet uns (Entwicklern) eine Vielzahl von Methoden, mit denen wir alles auf der Seite ändern und mit dem Benutzer interagieren können. Jene. Mit dieser Programmierschnittstelle können wir komplexe Schnittstellen, Formulare erstellen, Benutzeraktionen verarbeiten, verschiedene Elemente auf der Seite hinzufügen und entfernen, deren Inhalt, Eigenschaften (Attribute) ändern und vieles mehr.

Heutzutage gibt es praktisch keine Websites im Web in Skripten, die mit dem DOM nicht funktionieren würden.

Woraus besteht der HTML-Code der Seite?

Bevor Sie mit dem Studium des Dokumentobjektmodells fortfahren, müssen Sie sich zunächst den Quellcode einer Webseite (HTML-Dokument) merken.

Der Quellcode einer Webseite besteht aus Tags, Attributen, Kommentaren und Text. Tags sind die grundlegende HTML-Syntax. Die meisten von ihnen sind gepaart. In diesem Fall ist einer von ihnen der erste und der andere der schließende. Ein solches Paar von Tags bildet ein HTML-Element. HTML-Elemente können zusätzliche Parameter haben - Attribute.

Um ein bestimmtes Markup in einem Dokument zu erstellen, befinden sich einige Elemente in anderen. Infolgedessen kann ein HTML-Dokument als eine Reihe verschachtelter HTML-Elemente betrachtet werden.

Betrachten Sie als Beispiel den folgenden HTML-Code:

Artikelüberschrift

In diesem Code ist das Stammelement HTML. Es hat verschachtelte Kopf- und Körperelemente. Das head-Element enthält den Titel und der body enthält h1 und div. Das div-Element enthält wiederum h2 und p.

Schauen wir uns nun an, wie ein Browser einen DOM-Baum basierend auf HTML-Code erstellt.

Wie wird der DOM-Baum eines Dokuments erstellt?

Wie oben beschrieben, erstellt der Browser einen Baum, der auf HTML-Elementen und anderen Entitäten des Quellcodes der Seite basiert. Bei diesem Vorgang wird die Verschachtelung von Elementen ineinander berücksichtigt.

Infolgedessen verwendet der Browser den resultierenden DOM-Baum nicht nur für seine Arbeit, sondern stellt uns auch eine API zur Verfügung, mit der wir bequem über JavaScript damit arbeiten können.

Beim Erstellen des DOM erstellt der Browser Objekte (Knoten des DOM-Baums) aus HTML-Elementen, Text, Kommentaren und anderen Entitäten dieser Sprache.

In den meisten Fällen interessieren sich Webentwickler nur für Objekte (Knoten), die aus HTML-Elementen bestehen.

Gleichzeitig erstellt der Browser nicht nur Objekte aus HTML-Elementen, sondern verbindet sie auch mit bestimmten Links miteinander, je nachdem, wie sie sich im Code auf die anderen beziehen.

Elemente, die sich direkt in einem Element befinden, sind Kinder in Bezug darauf. Und er ist ein Elternteil für jeden von ihnen. Darüber hinaus sind alle diese Elemente in Bezug zueinander Geschwister (Brüder).

Darüber hinaus hat in HTML jedes Element immer ein übergeordnetes Element (das HTML-Element, in dem es sich direkt befindet). In HTML kann ein Element nicht mehrere übergeordnete Elemente haben. Die einzige Ausnahme ist das HTML-Element. Er hat keine Eltern.

Um den DOM-Baum beim Erstellen durch den Browser zu erhalten, müssen Sie lediglich alle Elemente in Abhängigkeit von ihrer Beziehung zueinander "ausrichten".

Die Erstellung des DOM-Baums erfolgt von oben nach unten.

In diesem Fall ist der Stamm des DOM-Baums immer das Dokument selbst (der Dokumentknoten). Außerdem wird der Baum abhängig von der Struktur des HTML-Codes erstellt.

Der oben betrachtete HTML-Code hat beispielsweise den folgenden DOM-Baum:

Ganz oben in diesem Baum befindet sich der Dokumentknoten. Dieser Knoten ist mit HTML verwandt, er ist sein Kind. Der HTML-Knoten wird durch das HTML-Element gebildet ( ...). Kopfknoten ( ...) und Körper ( ...) haben einen übergeordneten Link zu HTML. Im Verhältnis zueinander sind sie Geschwister, weil habe einen Elternteil. Der Kopfknoten ist dem Titel zugeordnet (lt; title\u003e ...), er ist sein Kind. Die Knoten h1 und div sind dem Körper zugeordnet, für den er der übergeordnete Knoten ist. Der div-Knoten ist mit h2 verbunden (

...

) und p (), sie sind seine Kinder.

Der Baum beginnt, wie oben erwähnt, mit dem Dokumentobjekt (Knoten). Es hat wiederum einen untergeordneten Knoten, der vom HTML-Element ( ...). Kopfelemente ( ...) und Körper ( ...) sind in HTML und sind daher seine Kinder. Ferner ist der Kopfknoten das übergeordnete Element des Titels (lt; title\u003e ...). Die Elemente h1 und div sind im Körper verschachtelt, also sind sie seine Kinder. Das div enthält direkt h2 Elemente (

...

) und P (). Dies bedeutet, dass der div-Knoten für jeden von ihnen der übergeordnete Knoten ist.

So einfach ist es, einen DOM-Baum in einem Browser zu erstellen, der auf HTML-Code basiert.

Warum müssen Sie wissen, wie ein DOM-Baum erstellt wird? Erstens ist es ein Verständnis der Umgebung, in der Sie etwas ändern möchten. Zweitens laufen die meisten Aktionen bei der Arbeit mit dem DOM darauf hinaus, die erforderlichen Elemente zu finden (auszuwählen). Wenn Sie nicht wissen, wie der DOM-Baum funktioniert und welche Verbindungen zwischen Knoten bestehen, ist es ziemlich schwierig, ein bestimmtes Element darin zu finden.

Die Aufgabe

Erstellen Sie anhand des in der Abbildung gezeigten DOM-Baums HTML-Code.

Das Thema ist sehr komplex. Aber wie sie sagen, ist der Teufel nicht so schrecklich, wie er gemalt ist. Hier kommt die harte Nuss zu mir: Eine Art Superaufgabe des „Malens“ ist so leicht verdaulich wie möglich, aber nicht ganz primitiv. Bisher sind alle Materialien, die ich gelesen habe, entweder zaum oder primitiv.

Was ist DOM?

Abkürzung DOM steht für Dokumentobjektmodell (Dokumentobjektmodell).

DOM ist eine Programmierschnittstelle für den Zugriff auf HTML-, XHTML- und XML-Dokumente, dh die Darstellung von HTML-, XHTML- und XML-Tags und -Attributen sowie von CSS-Stilen als Programmierobjekte. Sowohl JavaScript als auch andere Webprogrammiersprachen funktionieren mit diesem Modell.

Ein bisschen Geschichte

Es gibt 4 Ebenen DOM (0, 1, 2 und 3).

Stufe 0(1996) enthalten Modelle DOMDies waren hauptsächlich Sammlungen: document.images, document.forms, document.layers und document.all. Diese Modelle sind keine formalen Spezifikationen. DOMveröffentlicht W3C... Sie liefern vielmehr Informationen darüber, was vor Beginn des Standardisierungsprozesses existierte.

Level 1 (1997) enthielten auch grundlegende Funktionen für die Verarbeitung von XML-Dokumenten: mehrere Möglichkeiten, mit einzelnen Knoten zu arbeiten, mit XML-Verarbeitungsanweisungen zu arbeiten usw.

Außerdem, DOM Level 1 enthält eine Reihe spezieller Schnittstellen, die einzelne HTML-Elemente verarbeiten können. Sie können beispielsweise mit HTML-Tabellen, Formularen, Auswahllisten und mehr arbeiten.

IM DOM Level 2 (2002) haben mehrere neue Funktionen hinzugefügt.

Wenn in DOM Stufe 1 fehlte die Namespace-Unterstützung, die Schnittstellen DOM Stufe 2 enthält Methoden zum Verwalten von Namespaces, die mit den Anforderungen zum Erstellen und Verarbeiten von XML-Dokumenten verbunden sind.

Außerdem, DOM Level 2 unterstützt Ereignisse.

Stufe 2 ist die aktuelle Spezifikationsstufe DOM, Jedoch W3C empfiehlt einige Abschnitte der Level 3-Spezifikation.

DOM Level 3 ist ein Arbeitsentwurf einer Spezifikation, die die Funktionalität erweitert DOM Stufe 2. Eine der wichtigsten Funktionen dieser Version der Spezifikation ist die Fähigkeit, mit mehreren Erweiterungen zu arbeiten DOM.

Was bedeutet Software-Schnittstelle?

englisches Wort schnittstelle kann als "Kontaktbereich" übersetzt werden. Ein Computer versteht grob gesagt nur zwei Dinge: ein leeres und ein gefülltes Bit. Die von einem Computer gesprochene Sprache kann als endlose Folge von Nullen und Einsen betrachtet werden, die eine unendliche Anzahl verschiedener Kombinationen ergeben.

Jeder Programmcode ist für die Programmiererinterpretation dieser "Nullen und Einsen", mit denen der Computer arbeitet, verständlich. Somit ist jede Programmiersprache eine Mensch-Maschine-Schnittstelle.

Browser funktionieren genauso wie andere Computeranwendungen. Sie interpretieren HTML, XML, CSS, JavaScript, PHP, Perl usw. in "Nullen und Einsen". Um mit dieser Mehrsprachigkeit arbeiten zu können, benötigen Sie eine gemeinsame Plattform. Diese Plattform ist DOM - eine Spezifikation, die unabhängig von einer bestimmten Programmiersprache oder einem bestimmten Markup ist. Es ist eine Schnittstelle, die in vielen gängigen Programmiersprachen für die Erstellung von Webseiten verwendet werden kann und Objekte verstehen und interpretieren kann. DOM.

DOM und Browser

DOM und JavaScript

In JavaScript die Spitze der hierarchischen Leiter von Objekten DOMEine Art "Leiter" zu dieser Schnittstelle ist das Objekt dokumentund Objekte DOM werden seine Eigenschaften, Eigenschaften seiner Eigenschaften usw. Sie werden auch genannt dOM-Knoten.

DOM-Knoten

IM DOM Stufe 2 hat 12 Arten von Knoten. Hinter jedem Knotentyp DOM feste Konstante mit eindeutigem Namen. Die meisten Knoten sind für die Arbeit ausgelegt XML... In der Montage HTML - JavaScriptDamit haben wir es zu tun, es können nur 5 Typen verwendet werden. Aber selbst diese „Spitze des Eisbergs“ ist ein sehr „sich ausbreitender Baum“, der nicht in ein oder zwei Sitzungen abgedeckt werden kann.

Vollständiger Satz von Knotentypkonstanten, die in der Spezifikation definiert sind W3C DOM (Knoten verfügbar für HTML - JavaScript):

Konstanter Name	Wert	Beschreibung
Node.ELEMENT_NODE		Elementknoten (gibt das Stammelement des Dokuments zurück, bei HTML-Dokumenten ist dies das HTML-Element)
Node.ATTRIBUTE_NODE		Attributknoten (gibt ein Attribut eines Elements in einem XML- oder HTML-Dokument zurück)
		Textknoten (#text)
Node.CDATA_SECTION_NODE		CDATA-Abschnittsknoten (XML: Alternative Syntax zum Anzeigen von Zeichendaten)
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE		Abschnittsknoten
Node.PROCESSING_INSTRUCTION_NODE		XML-Direktivenknoten
Node.COMMENT_NODE		Kommentarknoten
Node.DOCUMENT_NODE		Dokumentknoten (die Basis für den Zugriff auf den Inhalt des Dokuments und die Erstellung seiner Komponenten)
Node.DOCUMENT_TYPE_NODE		Dokumenttypknoten (gibt den Typ des angegebenen Dokuments zurück, d. H. Den Wert des DOCTYPE-Tags)
Node.DOCUMENT_FRAGMENT_NODE		Dokumentfragmentknoten (Extrahieren eines Teils des Dokumentbaums, Erstellen eines neuen Dokumentfragments, Einfügen eines Fragments als untergeordnetes Element eines Knotens usw.)
Node.NOTATION_NODE		Notationsknoten *

* Notationen sind Namen, die das Format nicht analysierter Abschnitte, das Format von Elementen mit einem Notationsattribut oder die Anwendung angeben, an die eine Direktive gerichtet ist. (Nicht klar? Ich bin auch nicht sehr gut darin.)

Dokumentstruktur im DOM

Alle Dokumentobjekte sind DOM-Knoten. Betrachten Sie ein elementares Dokument:

< title>DOM

"Mitte"\u003e Titel

Absatztext

Hier ist ein Diagramm seines DOM-Baums:

Jeder Knoten kann untergeordnete Knoten haben (Pfeile führen zu ihnen im Diagramm). Das Dokumentobjekt - die Basis des Dokumentbaums - ist ebenfalls ein Knoten, verfügt jedoch nicht über einen übergeordneten Knoten und über eine Reihe von Eigenschaften und Methoden, die andere Knoten nicht haben. Es hat einen untergeordneten Knoten: Element .

Element zwei untergeordnete Knoten: und , für die alle Elemente, die sie enthalten, Kinder werden.

Beachtung!

"Element" und "Tag" sind keine Synonyme. Ein Tag ist ein Markup-Zeichen: Es handelt sich um zwei verschiedene Tags. Ein Element ist ein Objekt, das mit folgenden Tags gekennzeichnet ist:

Absatztext

.

Die Elemente