Node

  • Revision slug: Web/API/Node
  • Revision title: Node
  • Revision id: 440595
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{domref}}

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.
The following all inherit this interface and its methods and properties (though they may return null in particular cases where not relevant; or throw an exception when adding children to a node type for which no children can exist): {{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")}}

Properties

{{domxref("Node.attributes")}} {{deprecated_inline}}
...
{{domxref("Node.baseURI")}} {{readonlyInline}}
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 '/'.
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}
...
{{domxref("Node.childNodes")}} {{readonlyInline}}
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
{{domxref("Node.firstChild")}} {{readonlyInline}}
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
{{domxref("Node.lastChild")}} {{readonlyInline}}
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
{{domxref("Node.localName")}} {{readonlyInline}}{{obsolete_inline}}
...
{{domxref("Node.namespaceURI")}} {{readonlyInline}}{{obsolete_inline}}
...
{{domxref("Node.nextSibling")}} {{readonlyInline}}
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
{{domxref("Node.nodeName")}} {{readonlyInline}}
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name 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.
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}
...
{{domxref("Node.nodeType")}}{{readonlyInline}}
Returns an 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
{{domxref("Node.nodeValue")}}
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
{{domxref("Node.parentNode")}} {{readonlyInline}}
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 null.
{{domxref("Node.parentElement")}} {{readonlyInline}}
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 null.
{{domxref("Node.prefix")}} {{obsolete_inline}}
...
{{domxref("Node.previousSibling")}} {{readonlyInline}}
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
{{domxref("Node.textContent")}}
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.

Methods

  • {{domxref("Node.appendChild")}}
  • {{domxref("Node.cloneNode")}}
  • {{domxref("Node.compareDocumentPosition")}}
  • {{domxref("Node.contains")}}
  • {{domxref("Node.getFeature")}} {{obsolete_inline("7.0")}}
  • {{domxref("Node.getUserData")}} {{obsolete_inline("22.0")}}
  • {{domxref("Node.hasAttributes")}} {{obsolete_inline("22.0")}}
  • {{domxref("Node.hasChildNodes")}}
  • {{domxref("Node.insertBefore")}}
  • {{domxref("Node.isDefaultNamespace")}}
  • {{domxref("Node.isEqualNode")}}
  • {{domxref("Node.isSameNode")}} {{deprecated_inline("9.0")}} {{obsolete_inline("10.0")}}
  • {{domxref("Node.isSupported")}} {{obsolete_inline("22.0")}}
  • {{domxref("Node.lookupPrefix")}}
  • {{domxref("Node.lookupNamespaceURI")}}
  • {{domxref("Node.normalize")}}
  • {{domxref("Node.removeChild")}}
  • {{domxref("Node.replaceChild")}}
  • {{domxref("Node.setUserData")}} {{obsolete_inline("22.0")}}

Examples

Browse all child nodes

The following function recursively cycle all child nodes of a node and execute a callback function upon them (and upon the parent node itself).

function DOMComb (oParent, oCallback) {
  if (oParent.hasChildNodes()) {
    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
      DOMComb(oNode, oCallback);
    }
  }
  oCallback.call(oParent);
}

Syntax

DOMComb(parentNode, callbackFunction);

Description

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

Parameters

parentNode
The parent node (Node Object).
callbackFunction
The callback function (Function).

Sample usage

The following example send to the console.log the text content of the body:

function printContent () {
  if (this.nodeValue) { console.log(this.nodeValue); }
}

onload = function () {
  DOMComb(document.body, printContent);
};

Specifications

Specification Status Comment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}} {{Spec2('DOM WHATWG')}}
{{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.

 

Revision Source

<div>
  {{domref}}</div>
<p>A <code>Node</code> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.<br />
  The following all inherit this interface and its methods and properties (though they may return null in particular cases where not relevant; or throw an exception when adding children to a node type for which no children can exist): {{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>
<h2 id="Properties">Properties</h2>
<dl>
  <dt>
    {{domxref("Node.attributes")}} {{deprecated_inline}}</dt>
  <dd>
    ...</dd>
  <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>
    ...</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.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.localName")}} {{readonlyInline}}{{obsolete_inline}}</dt>
  <dd>
    ...</dd>
  <dt>
    {{domxref("Node.namespaceURI")}} {{readonlyInline}}{{obsolete_inline}}</dt>
  <dd>
    ...</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 name 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>
    ...</dd>
  <dt>
    {{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
  <dd>
    Returns an <code>unsigned short</code> representing the type of the node. Possible values are:<br />
    <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>
    Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd>
  <dt>
    {{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
  <dd>
    Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, 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.prefix")}} {{obsolete_inline}}</dt>
  <dd>
    ...</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>
    Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<ul>
  <li>{{domxref("Node.appendChild")}}</li>
  <li>{{domxref("Node.cloneNode")}}</li>
  <li>{{domxref("Node.compareDocumentPosition")}}</li>
  <li>{{domxref("Node.contains")}}</li>
  <li>{{domxref("Node.getFeature")}} {{obsolete_inline("7.0")}}</li>
  <li>{{domxref("Node.getUserData")}} {{obsolete_inline("22.0")}}</li>
  <li>{{domxref("Node.hasAttributes")}} {{obsolete_inline("22.0")}}</li>
  <li>{{domxref("Node.hasChildNodes")}}</li>
  <li>{{domxref("Node.insertBefore")}}</li>
  <li>{{domxref("Node.isDefaultNamespace")}}</li>
  <li>{{domxref("Node.isEqualNode")}}</li>
  <li>{{domxref("Node.isSameNode")}} {{deprecated_inline("9.0")}} {{obsolete_inline("10.0")}}</li>
  <li>{{domxref("Node.isSupported")}} {{obsolete_inline("22.0")}}</li>
  <li>{{domxref("Node.lookupPrefix")}}</li>
  <li>{{domxref("Node.lookupNamespaceURI")}}</li>
  <li>{{domxref("Node.normalize")}}</li>
  <li>{{domxref("Node.removeChild")}}</li>
  <li>{{domxref("Node.replaceChild")}}</li>
  <li>{{domxref("Node.setUserData")}} {{obsolete_inline("22.0")}}</li>
</ul>
<h2 id="Examples">Examples</h2>
<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
<p>The following function recursively cycle all child nodes of a node and execute a callback function upon them (and upon the parent node itself).</p>
<pre class="brush: js">
function DOMComb (oParent, oCallback) {
&nbsp; if (oParent.hasChildNodes()) {
&nbsp;&nbsp;&nbsp; for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DOMComb(oNode, oCallback);
&nbsp;&nbsp;&nbsp; }
&nbsp; }
&nbsp; oCallback.call(oParent);
}</pre>
<h4 id="Syntax">Syntax</h4>
<pre>
DOMComb(parentNode, callbackFunction);</pre>
<h4 id="Description">Description</h4>
<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
<h4 id="Parameters">Parameters</h4>
<dl>
  <dt>
    <code>parentNode</code></dt>
  <dd>
    The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
  <dt>
    <code>callbackFunction</code></dt>
  <dd>
    The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
</dl>
<h4 id="Sample_usage">Sample usage</h4>
<p>The following example send to the <code>console.log</code> the text content of the body:</p>
<pre class="brush: js">
function printContent () {
&nbsp; if (this.nodeValue) { console.log(this.nodeValue); }
}

onload = function () {
&nbsp; DOMComb(document.body, printContent);
};</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>
    </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>
<p>&nbsp;</p>
Revert to this revision