JavaScript previousSibling
last modified April 2, 2025
In this article, we explore the previousSibling property in
JavaScript. This property is essential for DOM traversal, allowing developers
to access the previous sibling node of an element in the document tree.
Basic Definition
The previousSibling property returns the previous node in the same
tree level (sibling) of the specified element. This includes all node types,
not just element nodes.
It's important to note that previousSibling returns the immediate
previous sibling node, which might be a text node, comment node, or element
node. Whitespace between elements often creates text nodes.
Basic previousSibling
This example demonstrates how to access the previous sibling of an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic previousSibling</title>
</head>
<body>
<div id="first">First div</div>
<div id="second">Second div</div>
<script>
const second = document.getElementById('second');
const previous = second.previousSibling;
console.log(previous); // Might be a text node
</script>
</body>
</html>
In this basic example, we have two div elements. The JavaScript code retrieves the second div and then accesses its previous sibling. Note that the result might be a text node containing whitespace.
This demonstrates the fundamental usage of previousSibling to
navigate the DOM tree. The property returns the node immediately before the
current node in the parent's childNodes list.
Accessing Element Nodes
This example shows how to specifically access previous element siblings.
<!DOCTYPE html>
<html>
<head>
<title>Element Siblings</title>
</head>
<body>
<div id="first">First div</div>
<!-- Comment -->
<div id="second">Second div</div>
<script>
const second = document.getElementById('second');
let previous = second.previousSibling;
// Loop to find the previous element node
while (previous && previous.nodeType !== 1) {
previous = previous.previousSibling;
}
console.log(previous); // First div element
</script>
</body>
</html>
Here we have two div elements with a comment node between them. The code finds the second div and then loops through previous siblings until it finds an element node (nodeType 1).
This demonstrates how to handle cases where non-element nodes exist between
elements. The nodeType check ensures we get an element node.
Modifying Previous Sibling
This example demonstrates how to modify the previous sibling element.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Sibling</title>
</head>
<body>
<p>First paragraph</p>
<p id="target">Target paragraph</p>
<button onclick="changePrevious()">Change Previous</button>
<script>
function changePrevious() {
const target = document.getElementById('target');
const previous = target.previousElementSibling;
if (previous) {
previous.style.color = 'red';
previous.textContent = 'Modified content!';
}
}
</script>
</body>
</html>
In this example, we have two paragraphs and a button. When clicked, the button changes the style and content of the previous sibling of the target paragraph.
This shows how previousSibling (or previousElementSibling)
can be used to dynamically modify adjacent elements. The example uses
previousElementSibling to skip non-element nodes.
Checking Sibling Existence
This example shows how to check if a previous sibling exists before accessing it.
<!DOCTYPE html>
<html>
<head>
<title>Checking Siblings</title>
</head>
<body>
<div id="first">First element</div>
<script>
const first = document.getElementById('first');
const previous = first.previousSibling;
if (previous) {
console.log('Previous sibling exists:', previous);
} else {
console.log('No previous sibling');
}
</script>
</body>
</html>
Here we have a single div element. The JavaScript code checks if it has a previous sibling before attempting to access it, preventing potential errors.
This demonstrates an important safety practice when working with sibling properties. Always check if the sibling exists before trying to access its properties or methods.
Navigating Complex DOM
This example shows how to navigate through multiple sibling nodes.
<!DOCTYPE html>
<html>
<head>
<title>Complex DOM Navigation</title>
</head>
<body>
<div>First</div>
<span>Second</span>
<!-- Comment -->
<p id="start">Third</p>
<div>Fourth</div>
<script>
const start = document.getElementById('start');
let node = start;
let count = 0;
// Count all previous siblings
while (node = node.previousSibling) {
count++;
}
console.log(`Total previous siblings: ${count}`);
</script>
</body>
</html>
In this example, we have multiple nodes of different types. The JavaScript code starts from a specific element and counts all previous siblings, regardless of their type.
This demonstrates how previousSibling can be used to traverse
through all preceding nodes in the DOM tree. The loop continues until there are
no more previous siblings.
Source
MDN previousSibling Documentation
In this article, we have shown how to use the previousSibling
property in JavaScript. This property is fundamental for DOM traversal and
element navigation in web development.
Author
List all JS DOM tutorials.