Node

Zusätzlich zu 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 enthält, das den Node enthält.

Node.childNodes Schreibgeschützt

Gibt eine Live-NodeList zurück, die alle Kinder dieses Knotens (einschließlich Elemente, Text und Kommentare) enthält. 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 das erste direkte Kind 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. das Document-Objekt im Fall des normalen DOM oder das ShadowRoot im Fall eines Shadow DOM.

Node.lastChild Schreibgeschützt

Gibt einen Node zurück, der das letzte direkte Kind 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 mit dem Namen des Node zurück. 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 den String '#text' oder ein Document-Knoten hat den String '#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 / setzt diesen Wert.

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 Elternteil dieses Knotens ist. Wenn es keinen solchen Knoten gibt, z.B. wenn dieser Knoten der oberste der Baumstruktur ist oder nicht an einem Baum teilnimmt, gibt diese Eigenschaft null zurück.

Node.parentElement Schreibgeschützt

Gibt ein Element zurück, das das Elternteil dieses Knotens ist. Wenn der Knoten kein Elternteil hat oder das Elternteil 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 Nachfahren zurück / setzt diesen.

Zusätzlich zu 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 auf einen bestehenden Knoten im DOM-Baum verweist, wird der Knoten von seiner aktuellen Position getrennt und an der neuen Position angefügt.

Node.cloneNode()

Klont einen Node und optional alle seine Inhalte. Standardmäßig klont es den Inhalt des Knotens.

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 Kontextes zurück, das optional das Schatten-Root beinhaltet, falls verfügbar.

Node.hasChildNodes()

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

Node.insertBefore()

Fügt einen Node vor dem Referenzknoten als Kind eines bestimmten Elternknotens ein.

Node.isDefaultNamespace()

Akzeptiert eine Namespace-URI als Argument und gibt einen booleschen Wert mit true zurück, wenn der Namespace der Standard-Namespace auf dem gegebenen Knoten ist, andernfalls false.

Node.isEqualNode()

Gibt einen booleschen Wert zurück, der angibt, ob zwei Knoten vom selben Typ sind und ob all ihre wesentlichen Datenpunkte übereinstimmen.

Node.isSameNode()

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

Node.lookupPrefix()

Gibt einen String zurück, der das Präfix für eine gegebene Namespace-URI enthält, falls vorhanden, und null, falls nicht. Wenn mehrere Präfixe möglich sind, hängt das Ergebnis von der Implementierung ab.

Node.lookupNamespaceURI()

Akzeptiert ein Präfix und gibt die Namespace-URI zurück, die damit auf dem gegebenen Knoten verbunden ist, falls gefunden (und null, falls nicht). Die Angabe von null für das Präfix gibt den Standard-Namespace zurück.

Node.normalize()

Bereinigt alle Textknoten unter diesem Element (zusammenführen angrenzender, Entfernen leerer).

Node.removeChild()

Entfernt einen Kindknoten vom aktuellen Element, das ein Kind des aktuellen Knotens sein muss.

Node.replaceChild()

Ersetzt einen Kind-Node des aktuellen durch den zweiten, der als Parameter übergeben wird.

selectstart

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

Diese Funktion entfernt jedes erste Kind eines Elements, bis keine mehr vorhanden 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 rekursiv eine Callback-Funktion für jeden im Wurzelknoten enthaltenen Knoten (einschließlich des Wurzelknotens selbst) auf:

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 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 bei Aufruf false zurückgibt, wird das aktuelle Rekursionslevel abgebrochen, und die Funktion setzt die Ausführung auf der vorherigen Ebene des Elternteils fort. Dies kann verwendet werden, um Schleifen abzubrechen, sobald ein Knoten gefunden wurde (z. B. bei der Suche nach einem Textknoten, der einen bestimmten String enthält).

Die Funktion hat zwei Parameter:

rootNode

Das Node-Objekt, dessen Nachfahren 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 innerhalb von rootNode (einschließlich des Wurzelknotens selbst) enthaltenen Knoten zurück.

Das folgende Beispiel zeigt eine praxisbezogene Nutzung der eachNode()-Funktion: das Durchsuchen eines Textes auf einer Webseite.

Wir verwenden eine Wrapper-Funktion namens grep zum Suchen:

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;
}