JavaScript nextElementSibling
last modified April 2, 2025
In this article, we explore the nextElementSibling property in
JavaScript. This property is essential for DOM traversal, allowing developers
to access the next sibling element in the document tree.
Basic Definition
The nextElementSibling property returns the element immediately
following the specified element in its parent's children list. It only returns
element nodes, skipping any text or comment nodes.
This property is read-only and returns null if there are no more sibling elements. It's part of the DOM traversal API and works in all modern browsers.
Basic nextElementSibling
This example demonstrates how to access the next sibling element of a div.
<!DOCTYPE html>
<html>
<head>
<title>Basic nextElementSibling</title>
</head>
<body>
<div id="first">First Element</div>
<div id="second">Second Element</div>
<script>
const firstElement = document.getElementById('first');
const nextSibling = firstElement.nextElementSibling;
console.log(nextSibling.id); // Outputs: "second"
</script>
</body>
</html>
In this basic example, we have two div elements. The JavaScript code gets the
first element by ID, then accesses its next sibling using
nextElementSibling.
This demonstrates the fundamental usage of nextElementSibling to
traverse the DOM. The property returns the next element node in the document
tree, which we can then work with.
Traversing a List
This example shows how to traverse an unordered list using nextElementSibling.
<!DOCTYPE html>
<html>
<head>
<title>List Traversal</title>
</head>
<body>
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
<script>
const firstItem = document.getElementById('item1');
const secondItem = firstItem.nextElementSibling;
const thirdItem = secondItem.nextElementSibling;
console.log(secondItem.id); // Outputs: "item2"
console.log(thirdItem.id); // Outputs: "item3"
</script>
</body>
</html>
Here we have an unordered list with three items. The JavaScript code starts with
the first item and uses nextElementSibling to access subsequent
items.
This demonstrates how nextElementSibling can be used to traverse
through sibling elements in sequence. Each call moves to the next element in
the DOM tree.
Style Next Sibling
This example demonstrates how to change the style of the next sibling element.
<!DOCTYPE html>
<html>
<head>
<title>Style Next Sibling</title>
</head>
<body>
<div id="trigger">Click me to highlight next div</div>
<div id="target">This will be highlighted</div>
<script>
const trigger = document.getElementById('trigger');
trigger.addEventListener('click', function() {
const nextDiv = this.nextElementSibling;
nextDiv.style.backgroundColor = 'yellow';
nextDiv.style.padding = '10px';
});
</script>
</body>
</html>
In this example, we have two div elements. When the first div is clicked, it
uses nextElementSibling to find and style the next div.
This shows how nextElementSibling can be used in event handlers to
dynamically modify adjacent elements. The property provides quick access to
related elements in the DOM.
Navigation Menu Example
This example shows a practical use case with a navigation menu.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
.active { color: red; font-weight: bold; }
</style>
</head>
<body>
<nav>
<a href="#" id="home">Home</a>
<a href="#" id="about">About</a>
<a href="#" id="contact">Contact</a>
</nav>
<script>
const aboutLink = document.getElementById('about');
aboutLink.classList.add('active');
const nextLink = aboutLink.nextElementSibling;
if (nextLink) {
nextLink.style.borderLeft = '2px solid red';
}
</script>
</body>
</html>
Here we have a simple navigation menu. The JavaScript code marks the "About" link as active and then styles its next sibling (the "Contact" link).
This demonstrates a real-world application of nextElementSibling in
navigation menus. The property helps create visual relationships between
adjacent menu items.
Null Check Example
This example demonstrates the importance of checking for null with nextElementSibling.
<!DOCTYPE html>
<html>
<head>
<title>Null Check</title>
</head>
<body>
<div id="last">This is the last element</div>
<script>
const lastElement = document.getElementById('last');
const nextElement = lastElement.nextElementSibling;
if (nextElement) {
console.log('Next element exists:', nextElement);
} else {
console.log('No next element exists');
}
</script>
</body>
</html>
In this example, we have a single div element. The JavaScript code attempts to
access its next sibling, which doesn't exist, so nextElementSibling
returns null.
This demonstrates the importance of checking for null when using
nextElementSibling. Always verify the result before attempting to
access properties or methods on the returned value.
Source
MDN nextElementSibling Documentation
In this article, we have shown how to use nextElementSibling in
JavaScript. This property is fundamental for DOM traversal and element
navigation in web development.
Author
List all JS DOM tutorials.