/    /  Javascript DOM- Navigation

Javascript DOM- Navigation

 

DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM(document object model) and make changes very easily. You can learn how to navigate up, down, and sideways in the DOM tree using JavaScript.

 

Accessing the Child Nodes:

 

We can use the first and last child properties of the DOM node to access the first and last direct child node of a node, respectively. If the node doesn’t have any (first and last direct)child element, it returns null.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Get First and Last Child Nodes</title>
</head>
<body>
  <div id="main">
           <h1 id="title">My Heading</h1>
           <p id="hint"><span>This is some text.</span></p>
   </div>

   <script>
   var main = document.getElementById("main");
   console.log(main.firstChild.nodeName); // Prints: #text

   var hint = document.getElementById("hint");
   console.log(hint.firstChild.nodeName); // Prints: SPAN
   </script>
   <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p>
</body>
</html>

 

OUTPUT:

 

My Heading
This is some text.
Note: Please check out the browser console by pressing the f12 key on the keyboard.

 

Accessing the Parent Nodes:

 

parentNode property to access the parent of the provide node in the DOM tree.

The parentNode will always return null for the document node since it doesn’t have a parent node.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Get Parent Node</title>
</head>
<body>
  <div id="main">
           <h1 id="title">My Heading</h1>
           <p id="hint"><span>This is some text.</span></p>
   </div>

   <script>
   var hint = document.getElementById("hint");
   console.log(hint.parentNode.nodeName); // Prints: DIV
   console.log(document.documentElement.parentNode.nodeName); // Prints: #document
   console.log(document.parentNode); // Outputs: null
   </script>
   <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p>
</body>
</html>

 

OUTPUT:

 

My Heading
This is some text.
Note: Please check out the browser console by pressing the f12 key on the keyboard.

 

Accessing the Sibling Nodes:

 

previousSibling and nextSibling properties to access the previous node and next node in the DOM tree, respectively.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Get Previous and Next Node</title>
</head>
<body>
  <div id="main">
           <h1 id="title">My Heading</h1>
           <p id="hint"><span>This is some text.</span></p><hr>
   </div>

   <script>
   var title = document.getElementById("title");
   console.log(title.previousSibling.nodeName); // Prints: #text

   var hint = document.getElementById("hint");
   console.log(hint.nextSibling.nodeName); // Prints: HR
   </script>
   <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p>
</body>
</html>

 

OUTPUT:

 

My Heading
This is some text.
Note: Please check out the browser console by pressing the f12 key on the keyboard.