{{APIRef("DOM")}}
Node is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.
All of the following interfaces inherit the Node interface's methods and properties: {{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} inherit), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}}
Those interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.
{{InheritanceDiagram}}
Inherits properties from its parent, {{DOMxRef("EventTarget")}}.[1]
Node.Node change, the {{DOMxRef("NodeList")}} object is automatically updated.null if the node has no child.null if the node has no child.null if there isn't such node.Node. The structure of the name will differ with the node type. E.g. An {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the '#text' string, or a {{DOMxRef("Document")}} node will have the '#document' string.unsigned short representing the type of the node. Possible values are:
| Name | Value |
|---|---|
ELEMENT_NODE |
1 |
ATTRIBUTE_NODE {{Deprecated_Inline}} |
2 |
TEXT_NODE |
3 |
CDATA_SECTION_NODE |
4 |
ENTITY_REFERENCE_NODE {{Deprecated_Inline}} |
5 |
ENTITY_NODE {{Deprecated_Inline}} |
6 |
PROCESSING_INSTRUCTION_NODE |
7 |
COMMENT_NODE |
8 |
DOCUMENT_NODE |
9 |
DOCUMENT_TYPE_NODE |
10 |
DOCUMENT_FRAGMENT_NODE |
11 |
NOTATION_NODE {{Deprecated_Inline}} |
12 |
null.null.null.null if there isn't such node.Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.
null if it is no namespace.
Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.
null if no prefix is specified.Inherits methods from its parent, {{DOMxRef("EventTarget")}}.[1]
childNode argument as the last child to the current node.true if the namespace is the default namespace on the given node or false if not.null if not. When multiple prefixes are possible, the result is implementation-dependent.null if not). Supplying null for the prefix will return the default namespace.function removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild)
}
}
/* ... an alternative to document.body.innerHTML = "" ... */ removeAllChildren(document.body)
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, function(node) {
nodes.push(node)
})
return nodes
}
if (false === callback(rootNode)) {
return false
}
if (rootNode.hasChildNodes()) {
const nodes = rootNode.childNodes
for (let i = 0, l = nodes.length; i < l; ++i) {
if (false === eachNode(nodes[i], callback)) {
return
}
}
}
}
eachNode(rootNode, callback)
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 {{jsxref("Boolean")}} 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).
rootNodeNode object whose descendants will be recursed through.callback {{optional_inline}}Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).The following example prints the textContent properties of each <span> tag in a <div> element named "box":
<div id="box"> <span>Foo</span> <span>Bar</span> <span>Baz</span> </div>
const box = document.getElementById("box")
eachNode(box, function(node) {
if (null != node.textContent) {
console.log(node.textContent)
}
})
The above will result in the following strings printing to the user's console:
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
Note: Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.
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) {
const matches = []
let endScan = false
eachNode(parentNode, function(node){
if (endScan) {
return false
}
// Ignore anything which isn't a text node
if (node.nodeType !== Node.TEXT_NODE) {
return
}
if (typeof pattern === "string") {
if (-1 !== node.textContent.indexOf(pattern)) {
matches.push(node)
}
}
else if (pattern.test(node.textContent)) {
if (!pattern.global) {
endScan = true
matches = node
}
else {
matches.push(node)
}
}
})
return matches
}
For example, to find {{DOMxRef("Text")}} nodes that contain typos:
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
const mistakes = grep(document.body, pattern)
console.log(mistakes)
| Specification | Status | Comment |
|---|---|---|
| {{SpecName("DOM WHATWG", "#interface-node", "Node")}} | {{Spec2("DOM WHATWG")}} | Added the following methods: getRootNode() |
| {{SpecName("DOM4", "#interface-node", "Node")}} | {{Spec2("DOM4")}} | Removed the following properties: attributes, namespaceURI, prefix, and localName.Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData(). |
| {{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}} | {{Spec2("DOM3 Core")}} | The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{DOMxRef("Document")}}.The normalize() method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().Added the following properties: baseURI and textContent. |
| {{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}} | {{Spec2("DOM2 Core")}} | The ownerDocument property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns null.Added the following properties: namespaceURI, prefix, and localName.Added the following methods: normalize(), isSupported() and hasAttributes(). |
| {{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}} | {{Spec2("DOM1")}} | Initial definition. |
{{Compat("api.Node")}}