JavaScript Node : EventTarget

Node represents a node in a tree (usually the DOM/document tree). Node is the base type for Element, Text, Document, Comment, and others.

Spec

Instance Properties

baseURI : String readonly

childNodes : NodeList readonly

A NodeList containing the children Nodes of this. See also Element.children.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
</div>
<script>
  var parent = document.getElementById('parent');
  for (var i = 0; i < parent.childNodes.length; i++) {
    console.log(parent.childNodes[i].nodeName);
  }
</script>

Run

Results:

firstChild : Node readonly

The first child Node in this. If this has no children, firstChild will be null.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>A nested div</div>
</div>
<script>
  var parent = document.getElementById('parent');
  var firstChild = parent.lastChild;
  var firstChildNode = parent.childNodes[0];
  console.log(firstChild === firstChildNode);
</script>

Run

Results:

lastChild : Node readonly

The last child Node in this. If this has no children, lastChild will be null.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>A nested div</div>
</div>
<script>
  var parent = document.getElementById('parent');
  var lastChild = parent.lastChild;
  var lastChildNode = parent.childNodes[parent.childNodes.length - 1];
  console.log(lastChild === lastChildNode);
</script>

Run

Results:

nextSibling : Node readonly

The sibling Node after this in this.parentNode's children. If this is the last child in parentNode or this has no parentNode, nextSibling will be null.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>A nested div</div>
</div>
<script>
  var parent = document.getElementById('parent');
  var child = parent.firstChild;
  while (child) {
    console.log(child.nodeName);
    child = child.nextSibling;
  }
</script>

Run

Results:

nodeName : String readonly

The name of the node. The value of nodeName depends on the type of this. For Elements, the nodeName is the same as Element.tagName. For ProcessingInstructionss, the nodeName is the same as ProcessingInstruction.target.

Example:

<script id='myscript'>
  console.log(document.createComment('').nodeName);
  console.log(document.createDocumentFragment().nodeName);
  console.log(document.nodeName);
  console.log(document.doctype.nodeName);

  // nodeName for Element is same as tagName
  console.log(document.createElement('div').nodeName);

  // nodeName for a ProcessingInstruction is the same as the target
  console.log(document.createProcessingInstruction('myscript','').nodeName);

  console.log(document.createTextNode('').nodeName);
</script>

Run

Results:

nodeType : Number readonly

The type of this Node. Will be one of ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE or NOTATION_NODE.

Example:

<script id='myscript'>
  console.log(document.createElement('div').nodeType == Node.ELEMENT_NODE);
  console.log(document.createTextNode('').nodeType == Node.TEXT_NODE);
  console.log(document.createProcessingInstruction('myscript','').nodeType == Node.PROCESSING_INSTRUCTION_NODE);
  console.log(document.createComment('').nodeType == Node.COMMENT_NODE);
  console.log(document.nodeType == Node.DOCUMENT_NODE);
  console.log(document.doctype.nodeType == Node.DOCUMENT_TYPE_NODE);
  console.log(document.createDocumentFragment().nodeType == Node.DOCUMENT_FRAGMENT_NODE);
</script>

Run

Results:

nodeValue : String

The text content of this (not including any descendants). Note, Elements do not have text content, the text is placed in a Text Node inside the Element. See also textContent.

Example:

<span id='parent'>
  This text becomes a Text Node.
  <span>So does this.</span>
</span>
<script>
  var parent = document.getElementById('parent');

  // Elements do not have nodeValue
  console.log(parent.nodeValue);

  // Text is placed in a Text node
  var textNode = parent.firstChild;
  console.log('"' + textNode.nodeValue + '"');

  // Use textContent to get all the text in descendants
  console.log('"' + parent.textContent + '"');
</script>

Run

Results:

ownerDocument : Document readonly

The Document that owns this Node.

Example:

<span id='foo'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.ownerDocument === document);
</script>

Run

Results:

parentElement : Element readonly

The parent of this. parentElement will return the same value as parentNode if the parent is also an Element. The document is one Node that is not also an Element.

Example:

<body></body>
<script>
  var documentElement = document.documentElement;
  console.log(documentElement.parentNode === document);
  console.log(documentElement.parentNode);
  console.log(documentElement.parentElement);
</script>

Run

Results:

parentNode : Node readonly

The parent of this.

Example:

<span id='foo'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.parentNode === document.body);
</script>

Run

Results:

previousSibling : Node readonly

The sibling Node before this in this.parentNode's children. If this is the first child in parentNode or this has no parentNode, previousSibling will be null.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>A nested div</div>
</div>
<script>
  var parent = document.getElementById('parent');
  var child = parent.lastChild;
  while (child) {
    console.log(child.nodeName);
    child = child.previousSibling;
  }
</script>

Run

Results:

textContent : String

The text content of this node and all descendants. See also nodeValue.

Example:

<span id='parent'>
  This text becomes a Text Node.
  <span>So does this.</span>
</span>
<script>
  var parent = document.getElementById('parent');

  // Use textContent to get all the text in descendants
  console.log('"' + parent.textContent + '"');
</script>

Run

Results:

Instance Methods

appendChild(newChild : Node) : Node

Inserts newChild at the end of the children of this. Returns newChild. See also insertBefore(), removeChild(), and replaceChild().

Example:

<div id='parent'>
  <span id='foo'>foo</span>
</div>
<script>
  var parent = document.getElementById('parent');

  var bar = document.createElement('span');
  bar.textContent = 'bar ';
  parent.appendChild(bar);
</script>

Run

Results:

cloneNode(deep : Boolean) : Node

Creates a copy of this. Only the attributes of the element are copied (any other properties set will not be copied). If deep is true, all descendants will be copied and added as children of the clone. Otherwise the returned value will not have children.

Example:

<span id='parent'>
  An element <span id='child'>with a child.</span>
</span>
<script>
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  var shallowClone = parent.cloneNode(false);
  console.log('"' + shallowClone.textContent + '"');

  var deepClone = parent.cloneNode(true);
  console.log('"' + deepClone.textContent.trim() + '"');
</script>

Run

Results:

compareDocumentPosition(other : Node) : Number

Returns a value that indicates where other is relative to this. The return value will be a number that is the bitwise AND (&) of one or more of the following values: DOCUMENT_POSITION_CONTAINED_BY, DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_FOLLOWING, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC, or DOCUMENT_POSITION_PRECEDING.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>A nested div</div>
</div>
<script>
  var parent = document.getElementById('parent');
  var child = parent.firstChild;
  var nextChild = child.nextSibling;

  console.log(child.compareDocumentPosition(nextChild) & Node.DOCUMENT_POSITION_FOLLOWING !== 0);
  console.log(nextChild.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_PRECEDING !== 0);
</script>

Run

Results:

contains(other : Node) : Boolean

Returns true if other is a descendant of this.

Example:

<div id='parent'>
  Some text
  <span>A span</span>
  <div>
    <div id='nested'>A nested div</div>
  </div>
</div>
<div id='sibling'>Sibling</div>
<script>
  var parent = document.getElementById('parent');
  var nested = document.getElementById('nested');
  var sibling = document.getElementById('sibling');

  console.log(parent.contains(nested));
  console.log(nested.contains(parent));
  console.log(parent.contains(sibling));
</script>

Run

Results:

hasChildNodes() : Boolean

Returns true if this has children.

Example:

<div id='parent'>
  #parent has children
<div>
<span id='empty'></span>
<script>
  console.log(document.getElementById('parent').hasChildNodes());
  console.log(document.getElementById('empty').hasChildNodes());
</script>

Run

Results:

insertBefore(newChild : Node, [refChild : Node]) : Node

Inserts newChild before refChild in this. If refChild is not provided, newChild is inserted at the end of the children. Returns newChild. See also appendChild(), removeChild(), and replaceChild().

Example:

<div id='parent'>
  <span id='foo'>foo</span>
</div>
<script>
  var parent = document.getElementById('parent');
  var foo = document.getElementById('foo');

  var bar = document.createElement('span');
  bar.textContent = 'bar ';
  parent.insertBefore(bar, foo);

  var baz = document.createElement('span');
  baz.textContent = ' baz';
  parent.insertBefore(baz);
</script>

Run

Results:

isDefaultNamespace(namespaceURI : Boolean) : Boolean

isEqualNode(arg : Node) : Boolean

lookupNamespaceURI(prefix : String) : String

lookupPrefix(namespaceURI : String) : String

normalize() : undefined

Removes empty Text nodes within this and joins adjacent Text nodes into one node.

Example:

<div id='parent'>
  Text from html.
</div>
<script>
  var parent = document.getElementById('parent');
  var firstText = parent.firstChild;

  parent.appendChild(document.createTextNode(''));

  var text = document.createTextNode('Text from JS.');

  parent.appendChild(text);

  console.log(parent.childNodes.length);
  console.log('"' + firstText.nodeValue.trim() + '"');

  parent.normalize();

  console.log(parent.childNodes.length);
  console.log('"' + firstText.nodeValue.trim() + '"');
</script>

Run

Results:

removeChild(oldChild : Node) : Node

Removes oldChild from the children of this. Returns oldChild. See also appendChild(), insertBefore(), and replaceChild().

Example:

<div id='parent'>
  <span id='foo'>foo</span><span>bar</span>
</div>
<script>
  var parent = document.getElementById('parent');
  var foo = document.getElementById('foo');
  parent.removeChild(foo);
</script>

Run

Results:

replaceChild(newChild : Node, oldChild : Node) : Node

Removes oldChild from the children of this and replaces it with newChild (so newChild is in the same position as oldChild was). Returns oldChild. See also appendChild(), insertBefore(), and removeChild().

Example:

<div id='parent'>
  <span id='foo'>foo</span>
</div>
<script>
  var parent = document.getElementById('parent');
  var foo = document.getElementById('foo');

  var bar = document.createElement('span');
  bar.textContent = 'bar ';
  parent.replaceChild(bar, foo);
</script>

Run

Results:

Node Properties

ATTRIBUTE_NODE : Number readonly

Returned by nodeType when this is an Attr.

Example:

<script id='myscript'>
  var element = document.getElementById('myscript');
  console.log(element.attributes[0].nodeType == Node.ATTRIBUTE_NODE);
</script>

Run

Results:

CDATA_SECTION_NODE : Number readonly

Returned by nodeType when this is an CDATA node.

COMMENT_NODE : Number readonly

Returned by nodeType when this is a Comment.

Example:

<script>
  console.log(document.createComment('').nodeType == Node.COMMENT_NODE);
</script>

Run

Results:

DOCUMENT_FRAGMENT_NODE : Number readonly

Returned by nodeType when this is a DocumentFragment.

Example:

<script>
  console.log(document.createDocumentFragment().nodeType == Node.DOCUMENT_FRAGMENT_NODE);
</script>

Run

Results:

DOCUMENT_NODE : Number readonly

Returned by nodeType when this is a Document.

Example:

<script>
  console.log(document.nodeType == Node.DOCUMENT_NODE);
</script>

Run

Results:

DOCUMENT_POSITION_CONTAINED_BY : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_POSITION_CONTAINS : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_POSITION_DISCONNECTED : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_POSITION_FOLLOWING : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_POSITION_PRECEDING : Number readonly

Bitmask value returned by compareDocumentPosition().

DOCUMENT_TYPE_NODE : Number readonly

Returned by nodeType when this is a DocumentType.

Example:

<script>
  console.log(document.doctype.nodeType == Node.DOCUMENT_NODE);
</script>

Run

Results:

ELEMENT_NODE : Number readonly

Returned by nodeType when this is an Element.

Example:

<script>
  console.log(document.createElement('div').nodeType == Node.ELEMENT_NODE);
</script>

Run

Results:

ENTITY_NODE : Number readonly

Returned by nodeType when this is an entity node.

ENTITY_REFERENCE_NODE : Number readonly

Returned by nodeType when this is an entity reference node.

NOTATION_NODE : Number readonly

Returned by nodeType when this is a notation node.

PROCESSING_INSTRUCTION_NODE : Number readonly

Returned by nodeType when this is a ProcessingInstruction.

Example:

<script id='myscript'>
  console.log(document.createProcessingInstruction('myscript','').nodeType == Node.PROCESSING_INSTRUCTION_NODE);
</script>

Run

Results:

TEXT_NODE : Number readonly

Returned by nodeType when this is an Text.

Example:

<script>
  console.log(document.createTextNode('').nodeType == Node.TEXT_NODE);
</script>

Run

Results:

home license contribute feedback