Anatomie des DOM

Das DOM stellt ein XML- oder HTML-Dokument als Baum dar. Diese Seite fhrt in die Grundstruktur des DOM-Baums ein und beschreibt die verschiedenen Eigenschaften und Methoden, die zur Navigation verwendet werden.

Zu Beginn mssen wir einige Konzepte im Zusammenhang mit Bumen einfhren. Ein Baum ist eine Datenstruktur, die aus Knoten besteht. Jeder Knoten enthlt einige Daten. Die Knoten sind hierarchisch organisiert jeder Knoten hat einen einzelnen Elternknoten (auer dem Wurzelknoten, der keinen Elternteil hat) und eine geordnete Liste von null oder mehr Kindknoten. Nun knnen wir Folgendes definieren:

Ein Knoten ohne Elternteil wird als Wurzel des Baumes bezeichnet.
Ein Knoten ohne Kinder wird als Blatt bezeichnet.
Knoten, die denselben Elternteil haben, werden als Geschwister bezeichnet. Geschwister gehren zur selben Kindknotenliste ihres Elternteils und haben somit eine klar definierte Reihenfolge.
Wenn wir von Knoten A zu Knoten B gelangen knnen, indem wir wiederholt den Eltern-Knoten verfolgen, ist A ein Nachfahre von B und B ein Vorfahre von A.
Knoten in einem Baum werden in Baumreihenfolge aufgelistet, indem zuerst der Knoten selbst aufgelistet wird und dann rekursiv jeder seiner Kindknoten in Reihenfolge (Prorder-, Tiefensuche) aufgelistet wird.

Hier sind einige wichtige Eigenschaften von Bumen:

Jeder Knoten ist mit einem eindeutigen Wurzelknoten verbunden.
Wenn Knoten A der Elternteil von Knoten B ist, dann ist Knoten B ein Kind von Knoten A.
Zyklen sind nicht erlaubt: Kein Knoten kann ein Vorfahre oder Nachfahre seiner selbst sein.

In diesem Artikel

Das Node-Interface und seine Unterklassen
Daten jedes Knotens
Das Element und seine Attribute
Arbeiten mit dem Elementbaum
Vergleichen von Knoten
Zusammenfassung

Das Node-Interface und seine Unterklassen

Alle Knoten im DOM werden durch Objekte dargestellt, die das Node Interface implementieren. Das Node-Interface verkrpert viele der zuvor definierten Konzepte:

Die parentNode Eigenschaft gibt den Elternknoten zurck oder null, wenn der Knoten keinen Elternteil hat.
Die childNodes Eigenschaft gibt einen NodeList der Kindknoten zurck. Die firstChild und lastChild Eigenschaften geben das erste und letzte Element dieser Liste zurck, oder null, wenn keine Kinder vorhanden sind.
Die getRootNode() Methode gibt die Wurzel des Baumes zurck, der den Knoten enthlt, indem sie wiederholt den Elternknoten verfolgt.
Die hasChildNodes() Methode gibt wahr zurck, wenn es Kindknoten hat, d.h. es ist kein Blatt.
Die previousSibling und nextSibling Eigenschaften geben die vorherigen und nchsten Geschwisterknoten zurck oder null, wenn es kein solches Geschwister gibt.
Die contains() Methode gibt wahr zurck, wenn ein gegebener Knoten ein Nachfahre des Knotens ist.
Die compareDocumentPosition() Methode vergleicht zwei Knoten nach Baumreihenfolge. Der Abschnitt Vergleichen von Knoten bespricht diese Methode im Detail.

Sie arbeiten selten mit einfachen Node-Objekten. Stattdessen implementieren alle Objekte im DOM eines der Interfaces, die von Node erben und zustzliche Semantik im Dokument darstellen. Die Knotentypen beschrnken, welche Daten sie enthalten und welche Kindertypen gltig sind. Betrachten Sie, wie das folgende HTML-Dokument im DOM dargestellt wird:

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Es erzeugt den folgenden DOM-Baum:

[Der DOM-Baum des vorherigen HTML-Dokuments]

Die Wurzel dieses DOM-Baumes ist ein Document Knoten, der das gesamte Dokument reprsentiert. Dieser Knoten wird global als die document Variable exponiert. Dieser Knoten hat zwei wichtige Kindknoten:

Einen optionalen DocumentType Knoten, der die doctype Deklaration darstellt. In unserem Fall gibt es einen. Dieser Knoten ist auch ber die doctype Eigenschaft des Document-Knotens zugnglich.
Einen optionalen Element Knoten, der das Wurzelelement darstellt. Fr HTML-Dokumente (wie in unserem Fall) ist dies typischerweise das HTMLHtmlElement. Fr SVG-Dokumente ist dies typischerweise das SVGSVGElement. Dieser Knoten ist auch ber die documentElement Eigenschaft des Document-Knotens zugnglich.

Der DocumentType-Knoten ist immer ein Blattknoten. Der Element-Knoten ist dort, wo der Hauptinhalt des Dokuments dargestellt wird. Jedes darunterliegende Element, wie zum Beispiel <head>, <body> und <p>, wird ebenfalls durch einen Element-Knoten reprsentiert. Tatschlich ist jeder eine Unterklasse von Element, die spezifisch fr diesen Tag-Namen ist, wie im HTML-Spezifikation definiert, wie HTMLHeadElement und HTMLBodyElement, mit zustzlichen Eigenschaften und Methoden, die die Semantik dieses Elements darstellen, aber hier konzentrieren wir uns auf die gemeinsamen Verhaltensweisen des DOM. Die Element-Knoten knnen andere Element-Knoten als Kinder haben, die verschachtelte Elemente darstellen. Zum Beispiel hat das <head>-Element drei Kinder: zwei <meta>-Elemente und ein <title>-Element. Zustzlich knnen Elemente auch Text Knoten und CDATASection Knoten als Kinder haben, die Textinhalte darstellen. Zum Beispiel hat das <p>-Element ein einzelnes Kind, einen Text-Knoten, der die Zeichenkette "Dies ist ein Absatz." enthlt. Text-Knoten und CDATASection-Knoten sind immer Blattknoten.

Alle Knoten, die Kinder haben knnen (Document, DocumentFragment und Element), erlauben zwei Arten von Kindern: Comment und ProcessingInstruction Knoten. Diese Knoten sind immer Blattknoten.

Jedes Element kann, zustzlich zu den Kindknoten, auch Attribute haben, die als Attr Knoten dargestellt werden. Attr erweitert das Node-Interface, aber sie sind nicht Teil der Hauptbaumstruktur, da sie kein Kind eines Knotens sind und ihr Elternknoten null ist. Stattdessen werden sie in einem separaten benannten Knoten-Map gespeichert, die ber die attributes Eigenschaft des Element-Knotens zugnglich ist.

Das Node-Interface definiert eine nodeType Eigenschaft, die den Typ des Knotens angibt. Zusammengefasst haben wir die folgenden Knotentypen eingefhrt:

Knotentyp	`nodeType`-Wert	Gltige Kinder (auer `Comment` und `ProcessingInstruction`)
`Document`	`Node.DOCUMENT_NODE` (9)	`DocumentType`, `Element`
`DocumentType`	`Node.DOCUMENT_TYPE_NODE` (10)	Keine
`Element`	`Node.ELEMENT_NODE` (1)	`Element`, `Text`, `CDATASection`
`Text`	`Node.TEXT_NODE` (3)	Keine
`CDATASection`	`Node.CDATA_SECTION_NODE` (4)	Keine
`Comment`	`Node.COMMENT_NODE` (8)	Keine
`ProcessingInstruction`	`Node.PROCESSING_INSTRUCTION_NODE` (7)	Keine
`Attr`	`Node.ATTRIBUTE_NODE` (2)	Keine

Hinweis: Sie werden bemerken, dass wir hier einige Knotentypen bersprungen haben. Die Node.ENTITY_REFERENCE_NODE (5), Node.ENTITY_NODE (6) und Node.NOTATION_NODE (12) Werte werden nicht mehr verwendet, whrend der Node.DOCUMENT_FRAGMENT_NODE (11) Wert im Erstellen und Aktualisieren des DOM-Baums eingefhrt wird.

Daten jedes Knotens

Jeder Knotentyp hat seine eigene Art, die Daten darzustellen, die er hlt. Die Node-Schnittstelle selbst definiert drei Eigenschaften, die mit Daten zu tun haben, die in der folgenden Tabelle zusammengefasst sind:

Knotentyp	`nodeName`	`nodeValue`	`textContent`
`Document`	`"#document"`	`null`	`null`
`DocumentType`	Sein `name` (z.B., `"html"`)	`null`	`null`
`Element`	Sein `tagName` (z.B., `"HTML"`, `"BODY"`)	`null`	Verkettung aller seiner Textknoten-Nachfahren in Baumreihenfolge
`Text`	`"#text"`	Sein `data`	Sein `data`
`CDATASection`	`"#cdata-section"`	Sein `data`	Sein `data`
`Comment`	`"#comment"`	Sein `data`	Sein `data`
`ProcessingInstruction`	Sein `target`	Sein `data`	Sein `data`
`Attr`	Sein `name`	Sein `value`	Sein `value`

Dokument

Der Document-Knoten enthlt selbst keine Daten, sodass seine nodeValue und textContent immer null sind. Sein nodeName ist immer "#document".

Das Document definiert einige Metadaten ber das Dokument, die aus der Umgebung stammen (zum Beispiel die HTTP-Antwort, die das Dokument ausgeliefert hat):

Die URL und documentURI Eigenschaften geben die URL des Dokuments zurck.
Die characterSet Eigenschaft gibt die im Dokument verwendete Zeichenkodierung zurck, wie zum Beispiel "UTF-8".
Die compatMode Eigenschaft gibt den Darstellungsmodus des Dokuments zurck, entweder "CSS1Compat" (Standardmodus) oder "BackCompat" (Quirks-Modus).
Die contentType Eigenschaft gibt den Medientyp des Dokuments zurck, wie zum Beispiel "text/html" fr HTML-Dokumente.

DocumentType

Ein DocumentType im Dokument sieht so aus:

xml

<!doctype name PUBLIC "publicId" "systemId">

Es gibt drei Teile, die Sie angeben knnen, die den drei Eigenschaften des DocumentType-Knotens entsprechen: name, publicId und systemId. Fr HTML-Dokumente ist der Doctype immer <!doctype html>, daher ist der name "html" und sowohl publicId als auch systemId sind leere Zeichenfolgen.

Element

Ein Element im Dokument sieht so aus:

html

<p class="note" id="intro">This is a paragraph.</p>

Zustzlich zu den Inhalten gibt es zwei Teile, die Sie angeben knnen: den Tag-Namen und die Attribute. Der Tag-Name entspricht der tagName Eigenschaft des Element-Knotens, der in diesem Fall "P" ist (beachten Sie, dass er bei HTML-Elementen immer grogeschrieben ist). Die Attribute entsprechen den Attr-Knoten, die in der attributes Eigenschaft des Element-Knotens gespeichert sind. Wir werden Attribute im Abschnitt Das Element und seine Attribute ausfhrlicher besprechen.

Der Element-Knoten enthlt selbst keine Daten, daher ist seine nodeValue immer null. Sein textContent ist die Verkettung aller seiner Textknoten-Nachfahren in Baumreihenfolge, die in diesem Fall "Dies ist ein Paragraph." ist. Fr das folgende Element:

html

<div>Hello, <span>world</span>!</div>

ist das textContent "Hello, world!", wobei der Textknoten "Hello, ", der Textknoten "world" im <span>-Element und der Textknoten "!" miteinander verknpft werden.

CharacterData

Text, CDATASection, Comment, und ProcessingInstruction erben alle von der CharacterData Schnittstelle, die eine Unterklasse von Node ist. Die CharacterData Schnittstelle definiert eine einzelne Eigenschaft, data, die den Textinhalt des Knotens enthlt. Die data Eigenschaft wird auch verwendet, um die nodeValue und textContent Eigenschaften dieser Knoten zu implementieren.

Fr Text und CDATASection hlt die data Eigenschaft den Textinhalt des Knotens. Im folgenden Dokument (beachten Sie, dass wir ein SVG-Dokument verwenden, da HTML keine CDATA-Abschnitte erlaubt):

svg

<text>Some text</text>
<style><![CDATA[h1 { color: red; }]]></style>

hat der Textknoten im <text>-Element "Some text" als data, und der CDATA-Abschnitt im <style>-Element hat "h1 { color: red; }" als data.

Fr Comment hlt die data Eigenschaft den Inhalt des Kommentars, der nach dem  endet. Zum Beispiel im folgenden Dokument:

html

<!-- This is a comment -->

hat der Kommentar-Knoten " Dies ist ein Kommentar " als data.

Fr ProcessingInstruction hlt die data Eigenschaft den Inhalt der Verarbeitungseinweisung, die nach dem Ziel beginnt und vor dem ?> endet. Zum Beispiel im folgenden Dokument:

xml

<?xml-stylesheet type="text/xsl" href="style.xsl"?>

hat der Verarbeitungseinweisung-Knoten 'type="text/xsl" href="style.xsl"' als data und "xml-stylesheet" als sein target.

Zustzlich definiert die CharacterData Schnittstelle die length Eigenschaft, die die Lnge der data Zeichenfolge zurckgibt, und die substringData() Methode, die einen Unterstring der data zurckgibt.

Attr

Fr das folgende Element:

html

<p class="note" id="intro">This is a paragraph.</p>

hat das <p> Element zwei Attribute, die durch zwei Attr-Knoten dargestellt werden. Jedes Attribut besteht aus einem Namen und einem Wert, die den name und value Eigenschaften entsprechen. Das erste Attribut hat "class" als name und "note" als value, whrend das zweite Attribut "id" als name und "intro" als value hat.

Das Element und seine Attribute

Wie bereits erwhnt, werden die Attribute eines Element-Knotens durch Attr-Knoten dargestellt, die in einem separaten benannten Knoten-Map gespeichert werden, das ber die attributes Eigenschaft des Element-Knotens zugnglich ist. Diese NamedNodeMap Schnittstelle definiert drei wichtige Eigenschaften:

length, die die Anzahl der Attribute zurckgibt.
item() Methode, die das Attr an einem gegebenen Index zurckgibt.
getNamedItem() Methode, die das Attr mit einem bestimmten Namen zurckgibt.

Das Element-Interface definiert auerdem mehrere Methoden, um direkt mit Attributen zu arbeiten, ohne auf den benannten Knoten-Map zugreifen zu mssen:

element.getAttribute(name) ist quivalent zu element.attributes.getNamedItem(name).value, wenn das Attribut existiert.
element.getAttributeNode(name) ist quivalent zu element.attributes.getNamedItem(name).
element.hasAttribute(name) ist quivalent zu element.attributes.getNamedItem(name) !== null.
element.getAttributeNames() gibt ein Array aller Attributnamen zurck.
element.hasAttributes() ist quivalent zu element.attributes.length > 0.

Sie knnen auch ber die ownerElement Eigenschaft des Attr-Knotens auf das Eigentmer-Element eines Attributs zugreifen.

Es gibt zwei spezielle Attribute, id und class, die ihre eigenen Eigenschaften im Element-Interface haben: id und className, die den Wert des entsprechenden Attributs reflektieren. Zustzlich gibt die classList Eigenschaft eine DOMTokenList zurck, die die Liste der Klassen im class-Attribut darstellt.

Arbeiten mit dem Elementbaum

Da Element-Knoten das Rckgrat der Dokumentstruktur bilden, knnen Sie speziell die Elementknoten durchlaufen und andere Knoten (wie Text und Comment) berspringen.

Fr alle Knoten gibt die parentElement Eigenschaft den Elternknoten zurck, wenn es sich um ein Element handelt, oder null, wenn der Elternteil kein Element ist (zum Beispiel, wenn der Elternteil ein Document ist). Dies steht im Gegensatz zu parentNode, das den Elternknoten unabhngig von seinem Typ zurckgibt.
Fr Document, DocumentFragment und Element gibt die children Eigenschaft eine HTMLCollection von nur den Kind-Element-Knoten zurck. Dies steht im Gegensatz zu childNodes, das alle Kindknoten zurckgibt. Die firstElementChild und lastElementChild Eigenschaften geben das erste und letzte Element dieser Sammlung zurck oder null, wenn keine Kind-Elemente vorhanden sind. Die childElementCount Eigenschaft gibt die Anzahl der Kind-Elemente zurck.
Fr Element und CharacterData geben die previousElementSibling und nextElementSibling Eigenschaften das vorherige und nchste Geschwisterelement zurck, das ein Element ist, bzw. null, wenn kein solches Geschwisterelement existiert. Dies steht im Gegensatz zu previousSibling und nextSibling, die jeden Typ von Geschwisterknoten zurckgeben knnen.

Vergleichen von Knoten

Es gibt drei wichtige Methoden, die Knoten vergleichen: isEqualNode(), isSameNode(), compareDocumentPosition().

Die isSameNode() Methode ist veraltet. Jetzt verhlt sie sich wie der strikte Gleichheitsoperator (===), indem sie wahr zurckgibt, wenn und nur wenn die beiden Knoten dasselbe Objekt sind.

Die isEqualNode() Methode vergleicht zwei Knoten strukturell. Zwei Knoten werden als gleich angesehen, wenn sie denselben Typ, dieselben Daten haben und ihre Kindknoten an jedem Index ebenfalls gleich sind. Im Abschnitt Daten jedes Knotens haben wir bereits die Daten definiert, die fr jeden Knotentyp relevant sind:

Fr Document gibt es keine Daten, daher mssen nur die Kindknoten verglichen werden.
Fr DocumentType mssen die Eigenschaften name, publicId und systemId verglichen werden.
Fr Element mssen tagName (genauer gesagt, namespaceURI, prefix und localName; wir werden diese im XML-Namensrume Leitfaden einfhren) und die Attribute verglichen werden.
Fr Attr mssen die Eigenschaften name (genauer gesagt, namespaceURI, prefix und localName; wir werden diese im XML-Namensrume Leitfaden einfhren) und value verglichen werden.
Fr alle CharacterData Knoten (Text, CDATASection, Comment und ProcessingInstruction) muss die data Eigenschaft verglichen werden. Fr ProcessingInstruction muss auch die target Eigenschaft verglichen werden.

Die a.compareDocumentPosition(b) Methode vergleicht zwei Knoten nach Baumreihenfolge. Sie gibt eine Bitmaske zurck, die ihre relativen Positionen anzeigt. Die mglichen Flle sind:

Gibt 0 zurck, wenn a und b derselbe Knoten sind.
Wenn die beiden Knoten beide Attribute desselben Elementknotens sind, gibt es Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC (34) zurck, wenn a b in der Attributliste vorausgeht, oder Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC (36), wenn a b folgt. Wenn einer der beiden Knoten ein Attribut ist, wird das Eigentmerelement fr weitere Vergleiche verwendet.
Wenn die beiden Knoten nicht denselben Wurzelknoten haben, gibt es entweder Node.DOCUMENT_POSITION_DISCONNECTED | Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | Node.DOCUMENT_POSITION_PRECEDING (35) oder Node.DOCUMENT_POSITION_DISCONNECTED | Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | Node.DOCUMENT_POSITION_FOLLOWING (37) zurck. Welcher zurckgegeben wird, ist implementierungsspezifisch.
Wenn a ein Vorfahre von b ist (einschlielich, wenn b ein Attribut von a ist), gibt es Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING (10) zurck.
Wenn a ein Nachfahre von b ist (einschlielich, wenn a ein Attribut von b ist), gibt es Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING (20) zurck.
Wenn a b in Baumreihenfolge vorausgeht, gibt es Node.DOCUMENT_POSITION_PRECEDING (2) zurck.
Wenn a b in Baumreihenfolge folgt, gibt es Node.DOCUMENT_POSITION_FOLLOWING (4) zurck.

Bitmaskenwerte werden verwendet, daher knnen Sie eine bitweise UND-Operation verwenden, um spezifische Beziehungen zu berprfen. Zum Beispiel, um zu berprfen, ob a b vorausgeht, knnen Sie:

if (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING) {
  // a precedes b
}

Dies bercksichtigt die Flle, in denen a und b Attribute desselben Elements sind, a ein Vorfahre von b ist und a b in Baumreihenfolge vorausgeht.

Zusammenfassung

Hier sind alle Funktionen, die wir bisher eingefhrt haben. Es sind viele, aber sie sind alle in verschiedenen Szenarien ntzlich.

Alle Knoten im DOM implementieren das Node Interface.
Um im DOM-Baum zu navigieren: parentNode, childNodes, firstChild/lastChild, hasChildNodes(), getRootNode(), previousSibling/nextSibling.
Um im Elementbaum zu navigieren: parentElement, children, firstElementChild/lastElementChild, childElementCount, previousElementSibling/nextElementSibling.
Die nodeType Eigenschaft gibt den Typ des Knotens an. Die nodeName, nodeValue und textContent Eigenschaften liefern die von dem Knoten gehaltenen Daten.
Der Document Knoten und seine zwei wichtigen Kinder: doctype und documentElement.
Der DocumentType Knoten und seine drei Eigenschaften: name, publicId und systemId.
Der Element Knoten und seine Eigenschaften: tagName, attributes.
Der Attr Knoten und seine Eigenschaften: name und value.
Das CharacterData Interface und seine Eigenschaft: data.
Die vier CharacterData Unterklassen: Text, CDATASection, Comment und ProcessingInstruction. ProcessingInstruction hat auch die target Eigenschaft.
Die verschiedenen Mglichkeiten, mit Attributen zu arbeiten, einschlielich der id, className und classList Eigenschaften.
Die drei Methoden zum Vergleichen von Knoten: isEqualNode(), isSameNode() und compareDocumentPosition().

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden