Deep in Javascript DOM Traversal 1
Tags: javascript, react, angular, vue
Published: 2024-03-01 22:11:16

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.

```javascript
<!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:

```javascript
<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:

```javascript
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 <article> element in the DOM tree:

```javascript
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:

```javascript
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:

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

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

```