DOM Navigation: Parent, Child & Sibling Nodes

Once you have a reference to one element, you can navigate the DOM tree to reach related elements without writing another query.

I. Understanding the tree

Given this HTML:

<div class="list">
  <h2 class="title">Items</h2>
  <ul class="items">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
  <p>Hello world</p>
</div>

div.list is the parent of h2.title, ul.items, and p
ul.items is a child of div.list
h2.title and ul.items are siblings

II. Parent node

Use parentNode or parentElement to move up.

const ul = document.querySelector(".items");

console.log(ul.parentNode);           // <div class="list">
ul.parentNode.style.color = "red";    // styles the parent div

Both parentNode and parentElement return the same result for regular HTML elements.

III. Child nodes

Use children to get a live HTMLCollection of direct children.

const ul = document.querySelector(".items");

console.log(ul.children);      // HTMLCollection of all li elements
console.log(ul.children[1]);   // <li class="item">Item 2</li>

To access the first or last child element directly:

console.log(ul.firstElementChild); // <li class="item">Item 1</li>
console.log(ul.lastElementChild);  // <li class="item">Item 3</li>

IV. Sibling nodes

Move sideways in the tree with sibling properties.

const ul = document.querySelector(".items");

console.log(ul.previousElementSibling); // <h2 class="title">Items</h2>
console.log(ul.nextElementSibling);     // <p>Hello world</p>

V. Quick reference

Property	What it returns
`parentNode` / `parentElement`	The direct parent element
`children`	All direct child elements (HTMLCollection)
`firstElementChild`	The first child element
`lastElementChild`	The last child element
`previousElementSibling`	The element immediately before
`nextElementSibling`	The element immediately after

These properties ignore text nodes and comment nodes. They only return element nodes, which is usually what you want.