path: root/files/it/web/api/node/index.html

---
title: Node
slug: Web/API/Node
tags:
  - API
  - DOM
  - DOM Reference
  - Interface
  - NeedsTranslation
  - Node
  - Reference
  - TopicStub
translation_of: Web/API/Node
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary"><strong><code>Node</code></strong> 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.</span></p>

<p>The following interfaces all inherit from <code>Node</code>’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")}}</p>

<p>These interfaces may return <code>null</code> 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.</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>

<dl>
 <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
 <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}</dt>
 <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
 <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
 <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
 <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
 <dt>{{domxref("Node.isConnected")}} {{readonlyInline}}</dt>
 <dd>Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</dd>
 <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
 <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
 <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. 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 <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
 <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}</dt>
 <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
 <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
 <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
 <table class="standard-table">
  <tbody>
   <tr>
    <th scope="col">Name</th>
    <th scope="col">Value</th>
   </tr>
   <tr>
    <td><code>ELEMENT_NODE</code></td>
    <td><code>1</code></td>
   </tr>
   <tr>
    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
    <td><code>2</code></td>
   </tr>
   <tr>
    <td><code>TEXT_NODE</code></td>
    <td><code>3</code></td>
   </tr>
   <tr>
    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
    <td><code>4</code></td>
   </tr>
   <tr>
    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
    <td><code>5</code></td>
   </tr>
   <tr>
    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
    <td><code>6</code></td>
   </tr>
   <tr>
    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
    <td><code>7</code></td>
   </tr>
   <tr>
    <td><code>COMMENT_NODE</code></td>
    <td><code>8</code></td>
   </tr>
   <tr>
    <td><code>DOCUMENT_NODE</code></td>
    <td><code>9</code></td>
   </tr>
   <tr>
    <td><code>DOCUMENT_TYPE_NODE</code></td>
    <td><code>10</code></td>
   </tr>
   <tr>
    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
    <td><code>11</code></td>
   </tr>
   <tr>
    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
    <td><code>12</code></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{domxref("Node.nodeValue")}}</dt>
 <dd>Returns / Sets the value of the current node</dd>
 <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
 <dd>Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns <code>null</code>.</dd>
 <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
 <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
 <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
 <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
 <dt>{{domxref("Node.textContent")}}</dt>
 <dd>Returns / Sets the textual content of an element and all its descendants.</dd>
</dl>

<h3 id="Deprecated_properties">Deprecated properties</h3>

<dl>
 <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
 <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.</dd>
</dl>

<h3 id="Obsolete_properties">Obsolete properties</h3>

<dl>
 <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element.
 <div class="note">
 <p><strong>Note:</strong> 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")}}</p>
 </div>
 </dd>
 <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
 <dd>The namespace URI of this node, or <code>null</code> if it is no namespace.
 <div class="note">
 <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p>
 </div>
 </dd>
 <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
 <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>

<dl>
 <dt>{{domxref("Node.appendChild()")}}</dt>
 <dd>Adds the specified childNode argument as the last child to the current node.<br>
 If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd>
 <dt>{{domxref("Node.cloneNode()")}}</dt>
 <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
 <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
 <dd>Compares the position of the current node against another node in any other document.</dd>
 <dt>{{domxref("Node.contains()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.</dd>
 <dt>{{domxref("Node.getRootNode()")}}</dt>
 <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd>
 <dt>{{domxref("Node.hasChildNodes()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
 <dt>{{domxref("Node.insertBefore()")}}</dt>
 <dd>Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.</dd>
 <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
 <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd>
 <dt>{{domxref("Node.isEqualNode()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd>
 <dt>{{domxref("Node.isSameNode()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd>
 <dt>{{domxref("Node.lookupPrefix()")}}</dt>
 <dd>Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd>
 <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
 <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd>
 <dt>{{domxref("Node.normalize()")}}</dt>
 <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
 <dt>{{domxref("Node.removeChild()")}}</dt>
 <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
 <dt>{{domxref("Node.replaceChild()")}}</dt>
 <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
</dl>

<h3 id="Obsolete_methods">Obsolete methods</h3>

<dl>
 <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
 <dd> </dd>
 <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
 <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
 <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
 <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
 <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
 <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>

<pre class="brush: js">Element.prototype.removeAll = function () {
  while (this.firstChild) { this.removeChild(this.firstChild); }
  return this;
};</pre>

<h4 id="Sample_usage">Sample usage</h4>

<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
document.body.removeAll();</pre>

<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3>

<p>The following function calls a function recursively for each node contained by a root node (including the root itself):</p>

<pre class="brush: js">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 &lt; l; ++i)
			if(false === eachNode(nodes[i], callback))
				return;
	}
}</pre>

<h4 id="Syntax">Syntax</h4>

<pre class="syntaxbox">eachNode(rootNode, callback);</pre>

<h4 id="Description">Description</h4>

<p>Recursively calls a function for each descendant node of <code>rootNode</code> (including the root itself).</p>

<p>If <code>callback</code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code>rootNode</code> and all nodes contained therein.</p>

<p>If <code>callback</code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> 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).</p>

<h4 id="Parameters">Parameters</h4>

<dl>
 <dt><code>rootNode</code></dt>
 <dd>The <code>Node</code> object whose descendants will be recursed through.</dd>
 <dt><code>callback</code></dt>
 <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code>rootNode</code> (including the root itself).</dd>
</dl>

<h4 id="Sample_usage_2">Sample usage</h4>

<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code>&lt;span&gt;</code> tag in a <code>&lt;div&gt;</code> element named <code>"box"</code>:</p>

<pre class="brush: html">&lt;div id="box"&gt;
	&lt;span&gt;Foo&lt;/span&gt;
	&lt;span&gt;Bar&lt;/span&gt;
	&lt;span&gt;Baz&lt;/span&gt;
&lt;/div&gt;</pre>

<pre class="brush: js">var box = document.getElementById("box");
eachNode(box, function(node){
	if(null != node.textContent){
		console.log(node.textContent);
	}
});</pre>

<p>The following strings will be displayed in the user's console:</p>

<pre class="brush: js">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre>

<div class="note">
<p><strong>Note:</strong> Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p>
</div>

<h4 id="Realistic_usage">Realistic usage</h4>

<p>The following demonstrates a real-world use of the <code>eachNode</code> function: searching for text on a web-page. We use a wrapper function named <code>grep</code> to do the searching:</p>

<pre class="brush: js">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;
}</pre>

<p>For example, to find {{domxref("Text")}} nodes that contain typos:</p>

<pre class="brush: js">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);
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.Node")}}</p>