JS DOM Navigation

Once you have selected one DOM element, you often need to move to a nearby one -- its parent, its next sibling, its first child -- without running a whole new query. DOM navigation properties (parentNode, nextElementSibling, firstElementChild, and more) let you walk the tree relative to an element you already have.

In this page:

Navigating to a Parent Element
Navigating to Child Elements
Navigating to Sibling Elements
Navigating Relative to an Event Target
Navigation vs Re-querying: Which to Use

Syntax

javascript

element.parentNode;
element.children;
element.firstElementChild;
element.nextElementSibling;
element.previousElementSibling;

Navigating to a Parent Element

.parentElement returns an element's direct parent in the DOM tree -- useful for walking upward, like finding the containing card or list item of a button that was clicked, without needing to have selected that ancestor directly.

Note: Use .parentElement (which returns an Element or null) rather than the older .parentNode when you specifically want an Element result, not any node type.

Warning: Calling .parentElement on the root <html> element returns null, since it has no parent element -- code walking upward repeatedly should account for eventually hitting that boundary.

उदाहरण: Navigating to a Parent Element

javascript

<div id="parent"><button id="child">Click</button></div>
<script>
  // Declare the constant `child`, set to `document.getElementById("child")`
  const child = document.getElementById("child");
  // Print `child.parentElement.id` to the console
  console.log(child.parentElement.id);
</script>

Navigating to Child Elements

.children returns a live collection of an element's direct child elements (excluding text and comment nodes), and .firstElementChild / .lastElementChild jump directly to the first or last of those children, without needing to index into the full collection.

Note: Use .children instead of .childNodes when you specifically want only element children, skipping whitespace text nodes that often sit between tags in formatted HTML.

Warning: .firstElementChild and .lastElementChild return null if the element has no child elements at all, even if it contains text content.

उदाहरण: Navigating to Child Elements

javascript

<ul id="list"><li>A</li><li>B</li></ul>
<script>
  // Declare the constant `list`, set to `document.getElementById("list")`
  const list = document.getElementById("list");
  // Print `list.children.length` to the console
  console.log(list.children.length);
  // Print `list.firstElementChild.textContent` to the console
  console.log(list.firstElementChild.textContent);
  // Print `list.lastElementChild.textContent` to the console
  console.log(list.lastElementChild.textContent);
</script>

Navigating to Sibling Elements

.nextElementSibling and .previousElementSibling move to the adjacent element at the same tree level, in either direction -- useful for relative operations, like highlighting the item right after the one a user clicked.

Note: Use these sibling properties when an operation genuinely depends on tree position relative to a known element, rather than re-querying the whole document.

Warning: The first element in a group has no previousElementSibling (returns null), and the last has no nextElementSibling (also null) -- always guard against this at the boundaries.

उदाहरण: Navigating to Sibling Elements

javascript

<ul><li id="first">A</li><li id="second">B</li></ul>
<script>
  // Declare the constant `first`, set to `document.getElementById("first")`
  const first = document.getElementById("first");
  // Print `first.nextElementSibling.textContent` to the console
  console.log(first.nextElementSibling.textContent);
</script>

Navigating Relative to an Event Target

Combining event.target (the element that triggered an event) with navigation properties lets you find and manipulate related elements without needing separate IDs for everything -- like finding a delete button's containing list item to remove it, working purely from tree relationships.

Note: Use relative navigation from event.target for components with repeated structure (like list items), avoiding the need to assign unique IDs to every single related element.

Warning: Navigating from event.target assumes a specific, consistent tree structure -- if the HTML structure changes later, navigation code written around it can silently break.

उदाहरण: Navigating Relative to an Event Target

javascript

<ul>
  <li>Item <button class="del">X</button></li>
</ul>
<script>
  document.querySelector(".del").addEventListener("click", (e) => {
    // Print `e.target.parentElement.textContent` to the console
    console.log(e.target.parentElement.textContent);
  });
</script>

Navigation vs Re-querying: Which to Use

Navigation properties are ideal when you already have a reference to a nearby element and just need to move relative to it -- re-running querySelector() from the document root makes more sense when you need to find something unrelated to any element you currently hold a reference to.

Note: Reach for a navigation property when the target element's position relative to one you already have is known and stable; use querySelector for anything else.

Warning: Chaining many navigation properties together (parentElement.parentElement.nextElementSibling.firstElementChild) to reach a distant element makes code fragile and hard to read -- a targeted selector is often clearer.

उदाहरण: Navigation vs Re-querying: Which to Use

javascript

<div id="card"><button id="btn">Click</button></div>
<script>
  document.getElementById("btn").parentElement;
  // Print `document.querySelector("#card")` to the console
  console.log(document.querySelector("#card"));
</script>

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Next Lesson → JS DOM Collections

JS DOM Navigation

Navigating to a Parent Element

Navigating to Child Elements

Navigating to Sibling Elements

Navigating Relative to an Event Target

Navigation vs Re-querying: Which to Use

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code