Deep in Javascript DOM Traversal 1

#javascript #react #angular #vue

JavaScript DOM Traversal is the act of navigating through the Document Object Model (DOM) using JavaScript.The DOM represents the structure of an HTML or XML document as a tree-like structure, where each element in the document is a node in the tree.

DOM traversal allows developers to programmatically move through this tree to access, manipulate, or retrieve information from different parts of the document. It involves techniques and methods to move between parent and child nodes, find siblings, access specific elements based on their relationships, and more.

Common tasks in DOM traversal include finding and manipulating elements, iterating through lists of nodes, accessing parent and child elements, and responding to user interactions. It is a fundamental aspect of web development as it enables dynamic updates and interactions with the content and structure of a webpage.

Here are some code samples to perform DOM traversal in JS:

Get the Parent of an Element
Get the Closest Element
Get the Children of an Element
Get Siblings of an Element

Get the Parent of an Element

In JavaScript, you can use the parentNode property to get the parent element of a given node. This property is part of the DOM (Document Object Model) and allows you to traverse the tree structure of an HTML or XML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Get Parent Element</title>
</head>
<body>

<div id="parent">
  <p id="child">This is a paragraph inside the parent div.</p>
</div>

<script>
  // Get the child element
  const childElement = document.getElementById('child');

  // Use parentNode to get the parent element
  const parentElement = childElement.parentNode;

  // Log the parent element's ID to the console
  console.log(parentElement.id); // Output: parent
</script>

</body>
</html>

In this example, we have a parent div with the ID "parent" and a child p element with the ID "child." The JavaScript code retrieves the child element using getElementById and then uses the parentNode property to get the parent element. Finally, it logs the ID of the parent element to the console.

Keep in mind that parentNode can return various types of read-only parent nodes, not just elements. If you specifically want the parent element, you may need to check the node type or use other methods like parentElement.It's important to handle cases where the parent might be null, especially when dealing with the root of the document or fragments.

Get the Closest Element

To find the closest element that matches a specific description, you can use a method called closest() in JavaScript. This method starts from a particular element and goes up through its parent elements until it discovers the one that fits the given description.

The closest() method gives you the first element it finds that matches the description. If it doesn't find any, it gives you a result of null.

Imagine you have the following piece of HTML code:

<article>
    <h2 class="title">Exploring Javascript DOM Traversal</h2>
    <div class="paragraph">
        <p class="pa-title">Get the Closest Element</p>
        <time class="published">Feb 21, 2024</time>
    </div>
</article>

In this example, we're choosing the closest <div> element related to the currently selected element:

const elem = document.querySelector('time');

// select closest <div>
const div = elem.closest('div');

console.log(div.classList[0]); // meta

Here is another example that selects the closest element in the DOM tree:

const elem = document.querySelector('time');

const article = elem.closest('article');

console.log(article.tagName); // article

The closest() method doesn't apply to siblings. For instance, you cannot choose the <p> tag because it is a sibling of <time>, not its parent. The same reasoning holds for the <h2> tag, as it is not a parent node of <time> in the DOM tree:

elem.closest('p'); // null
elem.closest('h2'); // null

To choose a sibling of an element, you need to initially pick the closest parent element and then utilize querySelector() to locate the specific sibling:

elem.closest('div').querySelector('p').innerText; 
// Get the Closest Element

elem.closest('article').querySelector('h2').innerText; 
// Exploring Javascript DOM Traversal