How to Select Sibling Element in JavaScript Easily

In JavaScript, you can select a sibling element using nextElementSibling to get the next sibling or previousElementSibling to get the previous sibling of an element. These properties return the adjacent sibling element in the DOM tree.

Syntax

Use element.nextElementSibling to get the next sibling element and element.previousElementSibling to get the previous sibling element.

• element: The reference element from which you want to find a sibling.
• nextElementSibling: Returns the next sibling element or null if none exists.
• previousElementSibling: Returns the previous sibling element or null if none exists.

javascript

const element = document.querySelector('.item');
const nextSibling = element.nextElementSibling;
const previousSibling = element.previousElementSibling;

Example

This example shows how to select the next and previous sibling elements of a selected item and change their background color.

javascript

const item = document.querySelector('.item');

// Select next sibling
const next = item.nextElementSibling;
if (next) {
  next.style.backgroundColor = 'lightgreen';
}

// Select previous sibling
const prev = item.previousElementSibling;
if (prev) {
  prev.style.backgroundColor = 'lightblue';
}

console.log('Next sibling:', next ? next.textContent : 'None');
console.log('Previous sibling:', prev ? prev.textContent : 'None');

Output

Next sibling: Item 3
Previous sibling: Item 1

Common Pitfalls

One common mistake is using nextSibling or previousSibling which can return text nodes (like spaces or line breaks) instead of element nodes. Always use nextElementSibling or previousElementSibling to get element siblings.

Also, if there is no sibling, these properties return null, so always check before using the sibling.

javascript

const element = document.querySelector('.item');

// Wrong: might get text node
const wrongNext = element.nextSibling;
console.log('Wrong nextSibling:', wrongNext);

// Right: gets element node
const rightNext = element.nextElementSibling;
console.log('Right nextElementSibling:', rightNext);

Output

Wrong nextSibling: #text
Right nextElementSibling: <li class="item">Item 3</li>

Quick Reference

Property	Description
nextElementSibling	Returns the next sibling element node or null if none.
previousElementSibling	Returns the previous sibling element node or null if none.
nextSibling	Returns the next sibling node (can be text, comment, or element).
previousSibling	Returns the previous sibling node (can be text, comment, or element).

Key Takeaways

Use nextElementSibling and previousElementSibling to select sibling elements in JavaScript.

Avoid nextSibling and previousSibling as they may return non-element nodes like text.

Always check if the sibling exists (not null) before accessing or modifying it.

These properties only select immediate siblings, not all siblings.

Selecting siblings helps navigate and manipulate the DOM easily.