A Platform To Learn To Code

Javascript DOM NAVIGATION



As we know the HTML DOM is like a tree, which has branches, here known as Nodes. In Fact Everything in HTML DOM is itself a document Node.

  • The document object is a Node
  • Each and every element of the document is a Node
  • All Comments are considered as Node
  • Contents inside the element is text Node

Javascript provides us several methods to navigate in between these Node structures, which is also called DOM navigation.


DOM Tree Node Relationship

The Nodes in the DOM tree follow hierarchical structure with each other.

Because of this hierarchy Nodes are related as parent, child and neighbour relationship.

  • The node which is at top in DOM tree is known as root node
  • Every Node has one parent except for root node
  • A parent can have any number of children
  • Node whose parent are same are called neighbours or siblings
Javascript DOM Navigation tree

Possible Navigations in DOM Tree

In the dom tree we have following different kinds of navigations :

  1. Down in the DOM tree :
    • firstChild - Returns first child of the element
    • firstElementChild - Returns first element child of the parent
    • lastChild - Returns last child of the element
    • lastElementChild - Returns first element child of the parent
    • childNodes - Returns all children of the element as a collection of array
    • children - Returns all children which are element as a collection of array
  2. Up in the DOM tree :
  3. Sideways in the tree :

Let's now see each navigation in detail.


Accessing Child Nodes

Using javascript we can get first node by firstChild property of element, last node by lastChild property of the element and collection of all child nodes by using childNodes property.

Example : firstChild

Run the code
The nodeName property return name of the node, i.e if node is anchor tag then return 'A', if node is text then returns #text.

We can see in the above example that the nodeName of first child should be 'H1' but result is '#text', this is because whitespace like newline, tabs are valid text and it becomes part of the node tree. That's why the first child is '#text'.

To get what we expected, use firstElementChild, it returns the first child of the parent which is an element.

Example : firstElementChild

Run the code

Last Child : Now let's select the last child of the parent. Use lastChild to select first child and lastElementChild to select element child same as you have seen in previous example.

Example : last child

Run the code

childNodes: Now let's get a collection of children using childNodes property.

In the example below all child nodee are console logged, check by running it.

Example : childNodes

Run the code

You can see in the above example that childNodes property returns all types of node including '#text' and 'element' nodes.

children: To get only element nodes use children property on the parent element.

Example : children

Run the code

To use collections of children you can access it using the index value of the element just like an array.

Example : accessing children

Run the code

Accessing Parent Nodes

To get parent node from the DOM tree use parentNode property.

If the parent doesn't exist then it returns null, which is in the case of a document.

Example : accessing parent

Run the code

Similarly like accessing child nodes we also have another property for parent node just for getting parent element, and property is parentElement. It always returns a parent which is an element.

Example : accessing parent element

Run the code

Accessing the Sibling Nodes

The elements with common parent are called siblings or neighbours. In sibling Nodes we can access the next sibling and previous sibling.

nextSibling: To access the next sibling use nextSibling property.

Example : accessing next node

Run the code

You can see in above example nextSibling returns '#text' node, because it is the next node.

nextElementSibling: To get the next node which is element use nextElementSibling property.

Example : accessing next element node

Run the code

previousNode & previousElementNode: To get previous node use previousNode property, while to get previous element use previousElementNode property.

Example : accessing previous node

Run the code

Javascript Window

BOX