DOM Traversal👨‍👩‍👧
Tags: dom, traversal, javascript
Published: 2024-06-24 05:13:09

DOM Traversal refers to navigating the hierarchy of the DOM to access and manipulate elements relative to other elements. This includes accessing parent nodes, child nodes, and sibling nodes. Here's a detailed look at various DOM traversal methods and properties, with examples to illustrate their use.

**1. Parent Nodes**
- **parentNode:** Accesses the parent node of the current element.
- **parentElement:** Accesses the parent element (returns null if the parent is not an element).

**Example:**

```
<!DOCTYPE html>
<html>
<head>
    <title>DOM Traversal - Parent Nodes</title>
</head>
<body>
    <div id="parent">
        <div id="child">Child Element</div>
    </div>

    <script>
        const child = document.getElementById('child');
        console.log(child.parentNode);    // Output: <div id="parent">...</div>
        console.log(child.parentElement); // Output: <div id="parent">...</div>
    </script>
</body>
</html>
```
**2. Child Nodes**
- **childNodes:** Returns a NodeList of all child nodes (including text nodes).

- **children:** Returns an HTMLCollection of all child elements.

- **firstChild:** Returns the first child node (including text nodes).

- **lastChild:** Returns the last child node (including text nodes).

- **firstElementChild:** Returns the first child element.

- **lastElementChild:** Returns the last child element.

- **childElementCount:** Returns the number of child elements.

**Example:**

```
<!DOCTYPE html>
<html>
<head>
    <title>DOM Traversal - Child Nodes</title>
</head>
<body>
    <div id="parent">
        <p>First Child</p>
        <p>Second Child</p>
        <p>Third Child</p>
    </div>

    <script>
        const parent = document.getElementById('parent');
        console.log(parent.childNodes);    // Output: NodeList(7) [#text, <p>, #text, <p>, #text, <p>, #text]
        console.log(parent.children);      // Output: HTMLCollection(3) [<p>, <p>, <p>]
        console.log(parent.firstChild);    // Output: #text (whitespace)
        console.log(parent.lastChild);     // Output: #text (whitespace)
        console.log(parent.firstElementChild); // Output: <p>First Child</p>
        console.log(parent.lastElementChild);  // Output: <p>Third Child</p>
        console.log(parent.childElementCount); // Output: 3
    </script>
</body>
</html>
```
**3. Sibling Nodes**
- **nextSibling:** Accesses the next sibling node (including text nodes).
- **previousSibling:** Accesses the previous sibling node (including text nodes).
- **nextElementSibling:** Accesses the next sibling element.
previousElementSibling: Accesses the previous sibling element.

**Example:**

```
<!DOCTYPE html>
<html>
<head>
    <title>DOM Traversal - Sibling Nodes</title>
</head>
<body>
    <div id="sibling1">Sibling 1</div>
    <div id="sibling2">Sibling 2</div>
    <div id="sibling3">Sibling 3</div>

    <script>
        const sibling2 = document.getElementById('sibling2');
        console.log(sibling2.nextSibling);         // Output: #text (whitespace)
        console.log(sibling2.previousSibling);     // Output: #text (whitespace)
        console.log(sibling2.nextElementSibling);  // Output: <div id="sibling3">Sibling 3</div>
        console.log(sibling2.previousElementSibling); // Output: <div id="sibling1">Sibling 1</div>
    </script>
</body>
</html>
```
**Summary**

####**Parent Nodes**

- **parentNode:** Accesses the parent node of the current element.
- **parentElement:** Accesses the parent element (returns null if the parent is not an element).

####**Child Nodes**

- **childNodes:** Returns a NodeList of all child nodes (including text nodes).
- **children:** Returns an HTMLCollection of all child elements.
- **firstChild:** Returns the first child node (including text nodes).
- **lastChild:** Returns the last child node (including text nodes).
- **firstElementChild:** Returns the first child element.
- **lastElementChild:** Returns the last child element.
- **childElementCount:** Returns the number of child elements.

####**Sibling Nodes**

- **nextSibling:** Accesses the next sibling node (including text nodes).
- **previousSibling:** Accesses the previous sibling node (including text nodes).
- **nextElementSibling:** Accesses the next sibling element.
- **previousElementSibling:** Accesses the previous sibling element.