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

From previous learning, you know that DOM Nodes are nested inside each other. In such a scenario, you need to move or navigate through the node to access parent, child or a sibling of a node.

Javascript provides us with several node properties to navigate in between these Node structures.

• DOM Tree Node Relationship
• Possible Navigations in DOM Tree
  • JavaScript move through element in dom
• get child element
  • First Child
  • First Element Child
  • Last Child
  • Last Element Child
  • Child Nodes
  • Children
• get parent element
  • Parent node
  • Parent element
• get sibling nodes
  • Next sibling
  • Next element sibling
  • Previous sibling
  • Previous element sibling

DOM Tree Node Relationship

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

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

• 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

Possible Navigations in DOM Tree

Since DOM has tree-like structure so there are 3 possible directions to move in the tree:

1. Down in the tree
2. Up in the tree
3. Sideways to the tree

JavaScript move through element in dom

Let's see the various ways provides by JavaScript to move through the DOM tree in a specific direction:

1. Move down in the DOM tree: There are 6 different JavaScript ways to move and get child nodes
   • firstChild - Returns the first child of the element
   • firstElementChild - Returns first element child of the parent
   • lastChild - Returns the 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. Move up in the DOM tree: There are 2 different JavaScript ways to move and access parent nodes
   • parentNode - Returns parent node of the element
   • parentElement - Returns parent element node of the element
3. Move sideways in the tree: There are 4 different JavaScript ways to move and access sibling nodes
   • nextSibling - Returns sibling node which is next child of its parent
   • nextElementSibling - Returns sibling element which is next child of its parent
   • previousSibling - Returns sibling node which is a previous child of its parent
   • previousElementSibling - Returns sibling element which is a previous child of its parent

Let's now see each navigation in detail.

JavaScript get child element

Child nodes are the node which is 1 level below it. JavaScript provides 6 different ways to get a child element of any node.

javascript firstChild

Using firstChild node property on a node you can get the first node of the element.

The first node not necessarily to be an element it can some text or comment node too.

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 the first child should be 'H1' but the 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'.

JavaScript firstElementChild

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

JavaScript lastChild

Now let's select the last child of the parent. Use lastChild property to select last child of the parent element.

It returns null if there is no child.

JavaScript lastElementChild

Same as firstChild property, the last child need not to be an element to get last child which is element use lastChild property.

It returns null if there is no child.

JavaScript childNodes

The childNodes property of a node returns a live NodeList of child nodes of the given element.

The children are assigned an index where 0 is an index of the first child. In the example below all child node are logged, check by running it.

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

JavaScript children

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

The children property of element returns HTMLCollection which contain all child elements of the specified element.

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

JavaScript get parent element

There are 2 main node properties in javascript to get the parent element of any element.

parentNode

The parentNode property returns the parent element of the calling element.

If the parent doesn't exist or element is not attached to the DOM tree then it returns null.

parentElement

The parentElement also return the parent of the element. Only difference is that when calling element is <html> then parentElement returns null while parentNode returns document.

parentNode is commonly used.

Accessing the Sibling Nodes

The elements with a common parent are called siblings or neighbours.

In sibling Nodes, we can access the next sibling and previous sibling.

nextSibling JavaScript

To access the next sibling use nextSibling property.

The next sibling not necessarily to be an element node.

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

nextElementSibling JavaScript

To get the immediately next element node of the calling element use nextElementSibling property.

previousSibling JavaScript

To get previous node use previousSibling property on the element.

previousElementSibling JavaScript

To get previous node which is element use previousElementSibling property on the element.