DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

DOM Traversal👨‍👩‍👧

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)