DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

4

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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)