JavaScript DOM Navigation

❮ Prev Next ❯

DOM navigation involves traversing the DOM tree to access and modify elements.

This chapter explores various methods and properties for navigating the DOM in JavaScript, providing a foundation for building dynamic and interactive web applications.

Accessing Elements by ID, Class, and Tag

One of the most common ways to navigate the DOM is by accessing elements using their ID, class, or tag name.

JavaScript provides several methods for this purpose, including getElementById(), getElementsByClassName()and getElementsByTagName(). 

// Accessing an element by ID
const heading = document.getElementById("heading");
console.log(heading);       

// Accessing elements by class name
const buttons = document.getElementsByClassName("btn");
console.log(buttons);

// Accessing elements by tag name
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <script>
      const heading = document.getElementById("heading");
      console.log(heading);       
      
      // Accessing elements by class name
      const buttons = document.getElementsByClassName("btn");
      console.log(buttons);
      
      // Accessing elements by tag name
      const paragraphs = document.getElementsByTagName("p");
      console.log(paragraphs);
    </script>
  </body>
</html>

AQuerying the DOM with querySelector and querySelectorAll

For more flexible and powerful DOM navigation, querySelectorand querySelectorAllallow you to use CSS selectors to find elements.

querySelectorreturns the first matching element, while querySelectorAllreturns a NodeList of all matching elements. 

// Using querySelector to find the first matching element
const main = document.querySelector("#main");
console.log(main);       

// Using querySelectorAll to find all matching elements
const items = document.querySelectorAll(".item");
console.log(items);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <div id="main">
      <h1 id="heading">Welcome to CodingKoleji</h1>
      <p class="item">this is first paragraph</p>
      <p class="item">this is second paragraph</p>
      <p class="item">this is third paragraph</p>
    </div>
    <script>
      const main = document.querySelector("#main");
      console.log(main);       

      // Using querySelectorAll to find all matching elements
      const items = document.querySelectorAll(".item");
      console.log(items);
    </script>
  </body>
</html>

Navigating the DOM Tree

Once an element is selected, you can navigate its relationships within the DOM tree.

Key properties include parentNode, childNodes, firstChild, lastChild, nextSiblingand previousSibling. 


const listItem = document.querySelector(".list-item");
console.log(listItem);       

// Accessing the parent node
const parent = listItem.parentNode;
console.log(parent);

// Accessing the parent node
const children = listItem.childNodes;
children.forEach((child) => console.log(child));

// Accessing the first and last child
const firstChild = listItem.firstChild;
const lastChild = listItem.lastChild;
console.log(firstChild, lastChild);

// Accessing next and previous siblings
const nextSibling = listItem.nextSibling;
const previousSibling = listItem.previousSibling;
console.log(nextSibling, lastChild);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
      <h1 id="heading">Welcome to CodingKoleji</h1>
      <ul class="list-item">
        <li>Banana</li>
        <li>Apple</li>
        <li>Orange</li>
      </ul>
    <script>
      const listItem = document.querySelector(".list-item");
      console.log(listItem);       
      
      // Accessing the parent node
      const parent = listItem.parentNode;
      console.log(parent);
      
      // Accessing the parent node
      const children = listItem.childNodes;
      children.forEach((child) => console.log(child));
      
      // Accessing the first and last child
      const firstChild = listItem.firstChild;
      const lastChild = listItem.lastChild;
      console.log(firstChild, lastChild);
      
      // Accessing next and previous siblings
      const nextSibling = listItem.nextSibling;
      const previousSibling = listItem.previousSibling;
      console.log(nextSibling, lastChild);
    </script>
  </body>
</html>

Navigating with parentElement, children, firstElementChild, and lastElementChild

For cleaner navigation that excludes text nodes, use parentElement, children, firstElementChildand lastElementChild. 


const container = document.querySelector(".list-item");
console.log(container);       

// Accessing the parent node
const parent = container.parentNode;
console.log(parent);

// Accessing the parent node
const children = container.childNodes;
children.forEach((child) => console.log(child));

// Accessing the first and last child
const firstChild = container.firstChild;
const lastChild = container.lastChild;
console.log(firstChild, lastChild);

// Accessing next and previous siblings
const nextSibling = container.nextSibling;
const previousSibling = container.previousSibling;
console.log(nextSibling, lastChild);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <div class="container">
      <h1 id="heading">Welcome to CodingKoleji</h1>
      <ul class="list-item">
        <li>Banana</li>
        <li>Apple</li>
        <li>Orange</li>
      </ul>
    </div>
    <script>
      const container = document.querySelector(".list-item");
      console.log(container);       
      
      // Accessing the parent node
      const parent = container.parentNode;
      console.log(parent);
      
      // Accessing the parent node
      const children = container.childNodes;
      children.forEach((child) => console.log(child));
      
      // Accessing the first and last child
      const firstChild = container.firstChild;
      const lastChild = container.lastChild;
      console.log(firstChild, lastChild);
      
      // Accessing next and previous siblings
      const nextSibling = container.nextSibling;
      const previousSibling = container.previousSibling;
      console.log(nextSibling, lastChild);
    </script>
  </body>
</html>

Navigating the DOM with closest

The closestmethod allows you to find the nearest ancestor that matches a CSS selector, which is useful for event delegation and handling dynamic content. 


const listItem = document.querySelector(".list-item");

// Finding the closest ancestor with the specified class
const container  = listItem.closest(".container");
console.log(container);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <div class="container">
      <h1 id="heading">Welcome to CodingKoleji</h1>
      <ul class="list-item">
        <li>Banana</li>
        <li>Apple</li>
        <li>Orange</li>
      </ul>
    </div>
    <script>
      const listItem = document.querySelector(".list-item");

      // Finding the closest ancestor with the specified class
      const container  = listItem.closest(".container");
      console.log(container);
    </script>
  </body>
</html>

Traversing Sibling Elements

Navigating between sibling elements can be done using nextElementSiblingand previousElementSibling. 


const current = document.querySelector(".current-item");

// Accessing the next and previous sibling elements
const nextElement = current.nextElementSibling;
const previousElement = current.previousElementSibling;
console.log(nextElement, previousElement);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <div class="container">
      <h1 id="heading">Welcome to CodingKoleji</h1>
      <ul class="list-item">
        <li>Banana</li>
        <li class="current-item">Apple</li>
        <li>Orange</li>
      </ul>
    </div>
    <script>
      const current = document.querySelector(".current-item");

      // Accessing the next and previous sibling elements
      const nextElement = current.nextElementSibling;
      const previousElement = current.previousElementSibling;
      console.log(nextElement, previousElement);
    </script>
  </body>
</html>

Understanding DOM navigation in JavaScript is crucial for creating dynamic, interactive web applications.

These skills are foundational for responsive and engaging user interfaces, enabling the creation of sophisticated web experiences.

Let's learn about DOM Nodes in the next chapter.

❮ Prev Next ❯