HTML DOM Node properties

The different node methods available through DOM manipulation are as follows:

  • node.childNodes
  • node.firstChild
  • node.lastChild
  • node.parentNode
  • node.nextSibling
  • node.previousSibling

Now for example we are going to use below html document :
<html>
<body>
  <ul id="list">
    <li><a href="link1.html">First Link</a></li>
    <li><a href="link2.html">Second Link</a></li>
    <li><a href="link3.html">Third Link</a></li>
    <li><a href="link4.html">Fourth Link</a></li>
  </ul>
</body>
</html>

node.childNodes : 

The childNodes property returns a collection of a node's child nodes, as a NodeList object. Now open browser console by pressing F12 button and type the below statement in the console :
  document.getElementById("list").childNodes

The above statement returns 9 nodes from 0 to 8, where the four nodes (1, 3, 5, 7) are <li> and the rest five nodes are just blank spaces. we can access each node with in array index like below
  document.getElementById("list").childNodes[1..3..5..7]


node.firstChild : 

The firstChild property returns the first child node of the specified node, as a Node object. At the above example code, firstChild property will return just black space (#text), it is equivalent to childNodes[0].
  document.getElementById("list").firstChild


node.lastChild :

The lastChild property returns the last child node of the specified node, as a Node object. At the above example code, lastChild property will return the black space (#text), it is equivalent to childNodes[8].
  document.getElementById("list").lastChild


node.parentNode :

The parentNode property returns the parent node of the specified node, as a Node object. At the above example code, the parentNode peroperty will return the whole body structure of the html document, because the <ul> is child of the <body>.
  document.getElementById("list").parentNode


node.nextSibling :

The nextSibling property returns the node immediately following the specified node, in the same tree level. The returned node is returned as a Node object. In the above given code the nextSibling property for the firstChild will return the first <li> element.
  document.getElementById("list").firstChild.nextSibling


node.previousSibling :

The previousSibling property returns the previous node of the specified node, in the same tree level. The returned node is returned as a Node object. At above code the previousSibling property for the lastChild will return the last <li> element.
  document.getElementById("list").lastChild.previousSibling

Similarly there are Element properties like firstElementChild and lastElementChild.


firstElementChild : 

The firstElementChild property returns the first child element of the specified element. The difference between this property and firstChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node. And also the firstElementChild property is read-only. Example :
  document.getElementById("list").firstElementChild


lastElementChild : 

The lastElementChild property returns the last child element of the specified element. Example :
  document.getElementById("list").lastElementChild

Next Topic :