DOM Traversing Elements

In this tutorial, we will see how to traverse across the html DOM tree.
Ways to traverse across the DOM tree are,

  • Get parent element
  • Get child elements
  • Get siblings of an element

Get Parent Element

To get the parent node of an element we use the parentNode property.

let parentNode = element.parentNode;

The parentNode property will return the parent node. If it does not contain the parent node then it return null.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode Tutorial</title>
</head>
<body>
    <div id="main-container">
        <p class="message">Parent Node Tutorial</p>
    </div>

    <script>
        let message = document.querySelector('.message');
        console.log(message.parentNode);
    </script>
</body>
</html>

Output

<div id="main-container">
    <p class="message">Parent Node Tutorial</p>
</div>

Get Child Elements

We have multiple properties to work with the child elements. They are,

  • firstChild - Returns the first child node of any node type such as, an element node, text node or a comment node.
  • firstElementChild - Returns the first child node of element node type.
  • lastChild - Returns the last child node of any node type such as, an element node, text node or a comment node.
  • lastElementChild - Returns the last child node of element node type.
  • childeNodes - Returns all the child elements of any node type.
  • children - Returns all the child elements of element type node.

Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>JavaScript Child Element Access Tutorial</title>
   </head>
   <body>
      <ul id="menu">
         <li class="first">Home</li>
         <li>Products</li>
         <li class="current">Customer Support</li>
         <li>Careers</li>
         <li>Investors</li>
         <li>News</li>
         <li class="last">About Us</li>
      </ul>
      <script>
         // Selecting the element with menu id.
         let menuNode = document.querySelector('#menu');
         let firstChildNodeName = menuNode.firstChild.nodeName; 
         let firstElementChildText = menuNode.firstElementChild.innerText;
         let lastChildNodeName = menuNode.lastChild.nodeName; 
         let lastElementChildText = menuNode.lastElementChild.innerText;
         let childNodes = menuNode.childNodes; 
         let childrenElements = menuNode.children;
         document.write("\nfirstChild Example: ", firstChildNodeName);
         document.write("<br/>firstElementChild Example: ", firstElementChildText);
         document.write("<br/>lastChild Example: ", lastChildNodeName);
         document.write("<br/>lastElementChild Example: ", lastElementChildText);
         document.write("<br/>childNodes Example: ", childNodes);
         document.write("<br/>children Example: ", childrenElements);
      </script>
   </body>
</html>

Output

firstChild Example: #text  
firstElementChild Example: Home  
lastChild Example: #text  
lastElementChild Example: About Us  
childNodes Example: [object NodeList]  
children Example: [object HTMLCollection]

Get Siblings Elements

JavaScript provides properties to access the siblings of the element. The properties are,

  • nextElementSibling - Returns the next sibling of the element. If there is no element, then it returns null.
  • previousElmentSibling - Returns the previous sibling of the element. If there is no element, then it returns null.

Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>JavaScript Sibling Element Access Tutorial</title>
   </head>
   <body>
      <ul id="menu">
         <li class="first">Home</li>
         <li>Products</li>
         <li class="current">Customer Support</li>
         <li>Careers</li>
         <li>Investors</li>
         <li>News</li>
         <li class="last">About Us</li>
      </ul>
      <script>
         let currentNode = document.querySelector('.current');
         let nextSibling = currentNode.nextElementSibling;
         let prevSibling = currentNode.previousElementSibling;
         document.write("<br/>NextSibling Example: ", nextSibling.innerText);
         document.write("<br/>PreviousSibling Example: ", prevSibling.innerText);
                 
      </script>
   </body>
</html>

Output

NextSibling Example: Careers  
PreviousSibling Example: Products

Most Read