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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series đź“ş

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series đź‘€

Watch the Youtube series

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay