JavaScript nextSibling
last modified April 2, 2025
In this article, we explore the nextSibling property in JavaScript.
This property is essential for DOM traversal, allowing developers to access the
next sibling node of an element in the DOM tree.
Basic Definition
The nextSibling property returns the node immediately following the
specified node in the parent's childNodes list. This includes all node types,
not just element nodes.
The returned node could be an element node, text node, or comment node. If
there is no next sibling, the property returns null. Whitespace
between elements is often considered text nodes in the DOM.
Basic nextSibling Usage
This example demonstrates how to access the next sibling of an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic nextSibling</title>
</head>
<body>
<ul>
<li id="first">First item</li>
<li id="second">Second item</li>
<li>Third item</li>
</ul>
<script>
const firstItem = document.getElementById('first');
const nextSibling = firstItem.nextSibling;
console.log(nextSibling); // Might be a text node
const secondItem = firstItem.nextElementSibling;
console.log(secondItem.id); // "second"
</script>
</body>
</html>
In this example, we first try to access the next sibling of the first list item.
The direct nextSibling might return a text node due to whitespace.
We then use nextElementSibling which skips non-element nodes and
directly returns the next element sibling. This is often more useful in practice.
Handling Text Nodes
This example shows how to work with text nodes returned by nextSibling.
<!DOCTYPE html>
<html>
<head>
<title>Text Nodes</title>
</head>
<body>
<div id="container">
<p id="para1">First paragraph</p>
Some text between paragraphs
<p id="para2">Second paragraph</p>
</div>
<script>
const para1 = document.getElementById('para1');
const nextNode = para1.nextSibling;
console.log(nextNode.nodeType); // 3 (text node)
console.log(nextNode.nodeValue.trim()); // "Some text between paragraphs"
const nextElement = para1.nextElementSibling;
console.log(nextElement.id); // "para2"
</script>
</body>
</html>
Here we demonstrate that nextSibling can return text nodes between
elements. We check the nodeType (3 for text nodes) and access its content.
The example also shows how nextElementSibling skips these text nodes
and goes directly to the next element node. Both properties have their uses
depending on your needs.
Traversing Siblings
This example demonstrates how to traverse through multiple siblings.
<!DOCTYPE html>
<html>
<head>
<title>Sibling Traversal</title>
</head>
<body>
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>
<script>
const firstItem = document.querySelector('.item');
let current = firstItem;
while (current) {
console.log(current.textContent);
current = current.nextElementSibling;
}
</script>
</body>
</html>
In this example, we start with the first list item and use a while loop to
traverse through all siblings. We use nextElementSibling to skip
any non-element nodes.
This pattern is useful when you need to process all siblings of an element. The
loop continues until nextElementSibling returns null,
indicating no more siblings.
Modifying Next Sibling
This example shows how to modify the next sibling element.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Sibling</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p id="target">This will be highlighted</p>
<p>Third paragraph</p>
</div>
<button onclick="highlightNext()">Highlight Next</button>
<script>
function highlightNext() {
const target = document.getElementById('target');
const nextPara = target.nextElementSibling;
if (nextPara) {
nextPara.classList.add('highlight');
}
}
</script>
</body>
</html>
Here we have a button that highlights the next sibling of our target paragraph.
We use nextElementSibling to get the next paragraph element.
Before applying changes, we check if the sibling exists. This is important to avoid errors when we reach the last element in a sequence.
Checking for Last Child
This example demonstrates how to check if an element is the last child.
<!DOCTYPE html>
<html>
<head>
<title>Last Child Check</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li id="middle">Item 2</li>
<li>Item 3</li>
</ul>
<script>
const middleItem = document.getElementById('middle');
const nextSibling = middleItem.nextElementSibling;
if (nextSibling) {
console.log('Next item:', nextSibling.textContent);
} else {
console.log('This is the last item');
}
const lastItem = document.querySelector('#list li:last-child');
console.log(lastItem.nextElementSibling === null); // true
</script>
</body>
</html>
In this example, we check if an element has a next sibling to determine if it's the last child. We also demonstrate how to select the last child directly.
This technique is useful when processing lists or menus where you need to handle
the last item differently. The check for null is crucial for robust
code.
Source
In this article, we have shown how to use the nextSibling and
nextElementSibling properties in JavaScript. These properties are
essential for DOM traversal and element manipulation in web development.
Author
List all JS DOM tutorials.