Node

Neben den unten aufgeführten Eigenschaften erbt Node Eigenschaften von seinem Elternteil, EventTarget.

Node.baseURI Schreibgeschützt

Gibt einen String zurück, der 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 Elementen, Text und Kommentaren). Da NodeList live ist, wird das 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 mit dem Kontextobjekt verbunden ist (direkt oder indirekt), z.B. dem Document-Objekt im Fall des normalen DOM oder dem ShadowRoot im Fall eines Schatten-DOMs.

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 einen String zurück, der den Namen des Node enthält. Die Struktur des Namens unterscheidet sich je nach Knotentyp. Z.B. wird ein HTMLElement den Namen des entsprechenden Tags enthalten, wie 'AUDIO' für ein HTMLAudioElement, ein Text-Knoten wird den String '#text' haben oder ein Document-Knoten wird '#document' haben.

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 / legt ihn fest.

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, z.B. wenn dieser Knoten der oberste im Baum ist oder 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 das übergeordnete Element 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 / legt ihn fest.

Neben den unten aufgeführten Methoden erbt Node Methoden von seinem Elternteil, EventTarget.

Node.appendChild()

Fügt das angegebene childNode-Argument als letztes Kind zum aktuellen Knoten hinzu. Wenn das Argument einen vorhandenen Knoten im DOM-Baum referenziert, wird der Knoten von seiner aktuellen Position gelöst und an der neuen Position angefügt.

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 anderen Dokument.

Node.contains()

Gibt einen true oder false-Wert zurück, der angibt, ob ein Knoten ein Nachkomme des aufrufenden Knotens ist oder nicht.

Node.getRootNode()

Gibt das Wurzelobjekt des Kontextobjekts zurück, das optional das Schattenwurzelobjekt einschließt, falls es verfügbar ist.

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 eine Namensraum-URI als Argument und gibt einen booleschen Wert mit einem Wert von true zurück, wenn der Namensraum der Standardnamensraum auf dem angegebenen Knoten ist oder false, wenn nicht.

Node.isEqualNode()

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

Node.isSameNode()

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

Node.lookupPrefix()

Gibt einen String zurück, der das Präfix für eine gegebene Namensraum-URI enthält, falls vorhanden, und null, wenn nicht. Wenn mehrere Präfixe möglich sind, ist das Ergebnis implementierungsabhängig.

Node.lookupNamespaceURI()

Akzeptiert ein Präfix und gibt die Namensraum-URI zurück, die damit auf dem angegebenen Knoten assoziiert ist, falls gefunden (und null, wenn nicht). Die Angabe von null für das Präfix gibt den Standardnamensraum zurück.

Node.normalize()

Bereinigt alle Textknoten unter diesem Element (merge adjacent, remove empty).

Node.removeChild()

Entfernt einen Kindknoten aus dem aktuellen Element, der ein Kind des aktuellen Knotens sein muss.

Node.replaceChild()

Ersetzt einen Kind-Node des aktuellen durch den zweiten im Parameter angegebenen.

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, textContent auf den leeren String zu setzen: document.body.textContent = "".

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

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 eine Funktion rekursiv für jeden Nachkommenknoten von rootNode auf (einschließlich des Wurzelknotens selbst).

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

Wenn callback bereitgestellt wird und es false zurückgibt, wenn es aufgerufen wird, wird die aktuelle Rekursionsebene abgebrochen, und die Funktion setzt die Ausführung auf der Ebene des letzten übergeordneten Elements fort. Dies kann verwendet werden, um Schleifen abzubrechen, sobald ein Knoten gefunden wurde (z.B. beim Suchen 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 aller innerhalb von rootNode enthaltenen Knoten zurück (einschließlich des Wurzelknotens selbst).

Das folgende Beispiel zeigt eine reale Verwendung der eachNode()-Funktion: Suche nach Text auf einer Webseite.

Wir verwenden eine Wrapper-Funktion namens grep, um die Suche durchzufü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;
}