Node

Instanz-Eigenschaften

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

Node.baseURI Schreibgeschützt

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

Node.childNodes Schreibgeschützt

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

Node.firstChild Schreibgeschützt

Gibt einen Node zurück, der den ersten direkten Kindknoten des Knotens darstellt, oder null, wenn der Knoten kein Kind hat.

Node.isConnected Schreibgeschützt

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

Node.lastChild Schreibgeschützt

Gibt einen Node zurück, der den letzten direkten Kindknoten des Knotens darstellt, oder null, wenn der Knoten kein Kind hat.

Node.nextSibling Schreibgeschützt

Gibt einen Node zurück, der den nächsten Knoten im Baum darstellt, oder null, wenn es keinen solchen Knoten gibt.

Node.nodeName Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Namen des Node enthält. Die Struktur des Namens variiert je nach Knotentyp. Zum Beispiel enthält ein HTMLElement den Namen des entsprechenden Tags, wie 'AUDIO' für ein HTMLAudioElement, ein Text-Knoten hat die Zeichenfolge '#text', oder ein Document-Knoten hat die Zeichenfolge '#document'.

Node.nodeType Schreibgeschützt

Gibt einen unsigned 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.ownerDocument Schreibgeschützt

Gibt das Document zurück, zu dem dieser Knoten gehört. Wenn der Knoten selbst ein Dokument ist, wird null zurückgegeben.

Node.parentNode Schreibgeschützt

Gibt einen Node 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 Eigenschaft null zurück.

Node.parentElement Schreibgeschützt

Gibt ein Element zurück, das das übergeordnete Element dieses Knotens ist. Wenn der Knoten kein übergeordnetes Element hat oder wenn dieses kein Element ist, gibt diese Eigenschaft null zurück.

Node.previousSibling Schreibgeschützt

Gibt einen Node zurück, der den vorherigen Knoten im Baum darstellt, oder null, 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 erbt Node Methoden von seinem übergeordneten Element, EventTarget.

Node.appendChild()

Fügt das angegebene childNode-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 einen Node 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()

Gibt true oder false 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 einen Node 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, und null, 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 (und null wenn nicht). Bei Angabe von null 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 untergeordneten Node 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, das textContent 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 von einem 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 von rootNode (einschließlich des Wurzelknotens selbst) auf.

Wenn callback weggelassen wird, gibt die Funktion stattdessen ein Array zurück, das rootNode und alle darin enthaltenen Knoten enthält.

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

Die Funktion hat zwei Parameter:

rootNode

Das Node-Objekt, dessen Nachkommen rekursiv durchlaufen werden.

callback Optional

Eine optionale Callback-Funktion, die einen Node als einziges Argument erhält. Wenn weggelassen, gibt eachNode ein Array von jedem Knoten zurück, der in rootNode enthalten ist (einschließlich der Wurzel selbst).

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

Wir verwenden eine Wrapper-Funktion namens grep, 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