DasDOMNode-Interface ist eine abstrakte Basisklasse,auf der viele andere DOM-API-Objekte basieren. Dadurch können diese Objekttypen ähnlich und oft austauschbar verwendet werden. Da es sich um eine abstrakte Klasse handelt, existiert kein einfachesNode-Objekt. Alle Objekte, dieNode-Funktionalität implementieren, basieren auf einer ihrer Unterklassen. Am bemerkenswertesten sindDocument,Element undDocumentFragment.

Darüber hinaus wird jede Art von DOM-Knoten durch eine Schnittstelle dargestellt, die aufNode basiert. Dazu gehörenAttr,CharacterData(auf denenText,Comment,CDATASection undProcessingInstruction basieren) undDocumentType.

In einigen Fällen kann eine bestimmte Funktion des BasisknotensNode nicht auf eine seiner Kinderschnittstellen angewendet werden; in diesem Fall kann der ererbte Knotennull zurückgeben oder eine Ausnahme auslösen, abhängig von den Umständen. Zum Beispiel wird der Versuch, Kindern zu einem Knotentyp hinzuzufügen, der keine Kinder haben kann, eine Ausnahme auslösen.

Instanz-Eigenschaften

Zusätzlich zu den unten stehenden Eigenschaften erbtNode Eigenschaften von seinem übergeordneten Element,EventTarget.

Node.baseURISchreibgeschützt

Gibt eine Zeichenfolge zurück, die die Basis-URL des Dokuments darstellt, das denNode enthält.

Node.childNodesSchreibgeschützt

Gibt eine Live-NodeList zurück, die alle Kinder dieses Knotens enthält(einschließlich Elemente, Text und Kommentare). DaNodeList live ist, wird dasNodeList-Objekt automatisch aktualisiert, wenn sich die Kinder desNode ändern.

Node.firstChildSchreibgeschützt

Gibt einenNode zurück, der den ersten direkten Kindknoten des Knotens darstellt, odernull, wenn der Knoten kein Kind hat.

Node.isConnectedSchreibgeschützt

Ein boolescher Wert, der angibt, ob der Node (direkt oder indirekt) mit dem Kontextobjekt verbunden ist, z.B. demDocument-Objekt im Fall des normalen DOM oder derShadowRoot im Fall eines Shadow-DOM.

Node.lastChildSchreibgeschützt

Gibt einenNode zurück, der den letzten direkten Kindknoten des Knotens darstellt, odernull, wenn der Knoten kein Kind hat.

Node.nextSiblingSchreibgeschützt

Gibt einenNode zurück, der den nächsten Knoten im Baum darstellt, odernull, wenn es keinen solchen Knoten gibt.

Node.nodeNameSchreibgeschützt

Gibt eine Zeichenfolge zurück, die den Namen desNode enthält. Die Struktur des Namens variiert je nach Knotentyp. Zum Beispiel enthält einHTMLElement den Namen des entsprechenden Tags, wie'AUDIO' für einHTMLAudioElement, einText-Knoten hat die Zeichenfolge'#text', oder einDocument-Knoten hat die Zeichenfolge'#document'.

Node.nodeTypeSchreibgeschützt

Gibt einenunsigned short zurück, der den Typ des Knotens darstellt. Mögliche Werte sind:

Name	Wert
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11

Node.nodeValue

Gibt den Wert des aktuellen Knotens zurück oder setzt ihn.

Node.ownerDocumentSchreibgeschützt

Gibt dasDocument zurück, zu dem dieser Knoten gehört. Wenn der Knoten selbst ein Dokument ist, wirdnull zurückgegeben.

Node.parentNodeSchreibgeschützt

Gibt einenNode zurück, der das übergeordnete Element dieses Knotens ist. Wenn es keinen solchen Knoten gibt - zum Beispiel, wenn dieser Knoten der oberste im Baum ist oder wenn er nicht an einem Baum teilnimmt - gibt diese Eigenschaftnull zurück.

Node.parentElementSchreibgeschützt

Gibt einElement zurück, das das übergeordnete Element dieses Knotens ist. Wenn der Knoten kein übergeordnetes Element hat oder wenn dieses keinElement ist, gibt diese Eigenschaftnull zurück.

Node.previousSiblingSchreibgeschützt

Gibt einenNode zurück, der den vorherigen Knoten im Baum darstellt, odernull, wenn es keinen solchen Knoten gibt.

Node.textContent

Gibt den Textinhalt eines Elements und aller seiner Nachkommen zurück oder setzt ihn.

Instanz-Methoden

Zusätzlich zu den unten stehenden Methoden erbtNode Methoden von seinem übergeordneten Element,EventTarget.

Node.appendChild()

Fügt das angegebenechildNode-Argument als letztes Kind zum aktuellen Knoten hinzu. Wenn das Argument auf einen bestehenden Knoten im DOM-Baum verweist, wird der Knoten von seiner aktuellen Position gelöst und an der neuen Position angehängt.

Node.cloneNode()

Klont einenNode und optional alle seine Inhalte. Standardmäßig werden die Inhalte des Knotens geklont.

Node.compareDocumentPosition()

Vergleicht die Position des aktuellen Knotens mit einem anderen Knoten in einem beliebigen Dokument.

Node.contains()

Gibttrue oderfalse zurück, je nachdem, ob ein Knoten ein Nachkomme des aufrufenden Knotens ist.

Node.getRootNode()

Gibt das Wurzelobjekt des Kontextes zurück, das optional die Schattenwurzel enthält, falls verfügbar.

Node.hasChildNodes()

Gibt einen booleschen Wert zurück, der angibt, ob das Element Kindknoten hat oder nicht.

Node.insertBefore()

Fügt einenNode vor dem Referenzknoten als Kind eines angegebenen übergeordneten Knotens ein.

Node.isDefaultNamespace()

Akzeptiert einen Namespace-URI als Argument und gibt einen booleschen Wert zurück, der angibt, ob der Namespace der Standard-Namespace für den angegebenen Knoten ist (true) oder nicht (false).

Node.isEqualNode()

Gibt einen booleschen Wert zurück, der angibt, ob zwei Knoten vom gleichen Typ sind und alle ihre definierenden Datenpunkte übereinstimmen.

Node.isSameNode()

Gibt einen booleschen Wert zurück, der angibt, ob zwei Knoten identisch sind (d.h. sie verweisen auf dasselbe Objekt).

Node.lookupPrefix()

Gibt eine Zeichenfolge zurück, die das Präfix für einen gegebenen Namespace-URI enthält, falls vorhanden, undnull, falls nicht. Wenn mehrere Präfixe möglich sind, ist das Ergebnis implementationsabhängig.

Node.lookupNamespaceURI()

Akzeptiert ein Präfix und gibt den Namespace-URI zurück, der ihm auf dem angegebenen Knoten zugeordnet ist, wenn er gefunden wird (undnull wenn nicht). Bei Angabe vonnull für das Präfix wird der Standard-Namespace zurückgegeben.

Node.normalize()

Bereinigt alle Textknoten unter diesem Element (zusammenführen von benachbarten, leeren entfernen).

Node.removeChild()

Entfernt einen untergeordneten Knoten vom aktuellen Element, der ein Kind des aktuellen Knotens sein muss.

Node.replaceChild()

Ersetzt einen untergeordnetenNode des aktuellen durch den zweiten als Parameter gegebenen Knoten.

Ereignisse

selectstart

Wird ausgelöst, wenn der Benutzer eine neue Auswahl in diesem Knoten startet.

Beispiele

Entfernen aller verschachtelten Kinder innerhalb eines Knotens

Diese Funktion entfernt jedes erste Kind eines Elements, bis keine mehr übrig sind.

function removeAllChildren(element) {  while (element.firstChild) {    element.removeChild(element.firstChild);  }}

Die Verwendung dieser Funktion erfolgt in einem einzigen Aufruf. Hier leeren wir den Body des Dokuments:

removeAllChildren(document.body);

Eine Alternative könnte sein, dastextContent auf den leeren String zu setzen:document.body.textContent = "".

Rekursives Durchlaufen von Kindknoten

Die folgende Funktion ruft rekursiv eine Callback-Funktion für jeden Knoten auf, der voneinem Wurzelknoten (einschließlich des Wurzelknotens selbst) enthalten ist:

function eachNode(rootNode, callback) {  if (!callback) {    const nodes = [];    eachNode(rootNode, (node) => {      nodes.push(node);    });    return nodes;  }  if (callback(rootNode) === false) {    return false;  }  if (rootNode.hasChildNodes()) {    for (const node of rootNode.childNodes) {      if (eachNode(node, callback) === false) {        return;      }    }  }}

Die Funktion ruft rekursiv eine Funktion für jeden Nachfahrenknoten vonrootNode (einschließlich des Wurzelknotens selbst) auf.

Wenncallback weggelassen wird, gibt die Funktion stattdessen einArray zurück, dasrootNode und alledarin enthaltenen Knoten enthält.

Wenncallback übergeben wird undfalse zurückgibt, wenn es aufgerufen wird,wird die aktuelle Rekursionsebene abgebrochen, und die Funktionsetzt die Ausführung auf der letzten Elternebene fort. Dies kann verwendet werden, um Schleifen abzubrechen, sobald einKnoten gefunden wurde (wie die Suche nach einem Textknoten, der eine bestimmte Zeichenfolge enthält).

Die Funktion hat zwei Parameter:

rootNode

DasNode-Objekt, dessen Nachkommen rekursiv durchlaufen werden.

callbackOptional

Eine optionale Callback-Funktion, dieeinenNode als einziges Argument erhält. Wenn weggelassen, gibteachNodeeinArray von jedem Knoten zurück, der inrootNode enthalten ist (einschließlich der Wurzel selbst).

Das Folgende zeigt eine praktische Verwendung der FunktioneachNode():Die Suche nach Text auf einer Webseite.

Wir verwenden eine Wrapper-Funktion namensgrep, um die Suche auszuführen:

function grep(parentNode, pattern) {  let matches = [];  let endScan = false;  eachNode(parentNode, (node) => {    if (endScan) {      return false;    }    // Ignore anything which isn't a text node    if (node.nodeType !== Node.TEXT_NODE) {      return;    }    if (typeof pattern === "string" && node.textContent.includes(pattern)) {      matches.push(node);    } else if (pattern.test(node.textContent)) {      if (!pattern.global) {        endScan = true;        matches = node;      } else {        matches.push(node);      }    }  });  return matches;}

Spezifikationen

Browser-Kompatibilität