Node is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.
The following interfaces all inherit from Node’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")}}
These 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 parents {{domxref("EventTarget")}}.[1]
'/'.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 {{deprecated_inline()}} |
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. {{gecko_minversion_inline("1.9.2")}}
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. {{gecko_minversion_inline("1.9.2")}}
null if no prefix is specified.Inherits methods from its parent, {{domxref("EventTarget")}}.[1]
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.Element.prototype.removeAll = function () {
while (this.firstChild) { this.removeChild(this.firstChild); }
return this;
};
/* ... an alternative to document.body.innerHTML = "" ... */ document.body.removeAll();
The following function calls a function recursively for each node contained by a root node (including the root itself):
function eachNode(rootNode, callback){
if(!callback){
var nodes = [];
eachNode(rootNode, function(node){
nodes.push(node);
});
return nodes;
}
if(false === callback(rootNode))
return false;
if(rootNode.hasChildNodes()){
var nodes = rootNode.childNodes;
for(var 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 therein.
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 that contains a certain string).
rootNodeNode object whose descendants will be recursed through.callbackNode 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>
var box = document.getElementById("box");
eachNode(box, function(node){
if(null != node.textContent){
console.log(node.textContent);
}
});
The following strings will be displayed in 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){
var matches = [];
var 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("string" === typeof pattern){
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:
var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
var mistakes = grep(document.body, pattern);
console.log(mistakes);
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('DOM WHATWG', '#interface-node', 'Node')}} | {{Spec2('DOM WHATWG')}} | 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")}}