docs.rodeo

MDN Web Docs mirror

Node

{{APIRef("DOM")}} 

The {{Glossary("DOM")}}  Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Most notable are {{domxref("Document")}} , {{domxref("Element")}} , and {{domxref("DocumentFragment")}} .

In addition, every kind of DOM node is represented by an interface based on Node. These include {{DOMxRef("Attr")}} , {{DOMxRef("CharacterData")}}  (which {{DOMxRef("Text")}} , {{DOMxRef("Comment")}} , {{DOMxRef("CDATASection")}}  and {{DOMxRef("ProcessingInstruction")}}  are all based on), and {{DOMxRef("DocumentType")}} .

In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. For example, attempting to add children to a node type that cannot have children will throw an exception.

{{InheritanceDiagram}} 

Instance properties

In addition to the properties below, Node inherits properties from its parent, {{DOMxRef("EventTarget")}} .

Instance methods

In addition to the methods below, Node inherits methods from its parent, {{DOMxRef("EventTarget")}} .

Events

Examples

Remove all children nested within a node

This function remove each first child of an element, until there are none left.

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

Using this function is a single call. Here we empty the body of the document:

removeAllChildren(document.body);

An alternative could be to set the textContent to the empty string: document.body.textContent = "".

Recurse through child nodes

The following function recursively calls a callback function for each node contained by a root node (including the root itself):

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

The function recursively calls a function for each descendant node of rootNode (including the root itself).

If callback is omitted, the function returns an {{jsxref("Array")}}  instead, which contains rootNode and all nodes contained within.

If callback is provided, and it returns false when called, the current recursion level is aborted, and the function resumes execution at the last parent’s level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).

The function has two parameters:

The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.

We use a wrapper function named grep to do the searching:

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

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

In this article

View on MDN