JavaScript previousElementSibling
last modified April 2, 2025
In this article, we explore the previousElementSibling property in
JavaScript. This property is essential for DOM traversal, allowing developers to
access the previous sibling element in the DOM tree.
Basic Definition
The previousElementSibling property returns the previous element
node at the same tree level. It only returns element nodes, ignoring text nodes
and comments.
This property is read-only and belongs to the Element interface. If there are no previous element siblings, it returns null. It's useful for navigating between sibling elements without using complex selectors.
Basic previousElementSibling
This example demonstrates how to access the previous sibling of an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic previousElementSibling</title>
</head>
<body>
<div id="first">First div</div>
<div id="second">Second div</div>
<script>
const secondDiv = document.getElementById('second');
const previousDiv = secondDiv.previousElementSibling;
console.log(previousDiv.textContent); // Outputs: First div
</script>
</body>
</html>
In this basic example, we have two div elements. We select the second div and
use previousElementSibling to access its previous sibling.
The property returns the first div element, and we log its text content. This
shows the fundamental usage of previousElementSibling for DOM
navigation between sibling elements.
Changing Previous Sibling Style
This example shows how to modify the style of a previous sibling element.
<!DOCTYPE html>
<html>
<head>
<title>Changing Previous Sibling Style</title>
</head>
<body>
<p>First paragraph</p>
<p id="target">Second paragraph</p>
<button onclick="highlightPrevious()">Highlight Previous</button>
<script>
function highlightPrevious() {
const target = document.getElementById('target');
const previous = target.previousElementSibling;
previous.style.backgroundColor = 'yellow';
previous.style.padding = '10px';
}
</script>
</body>
</html>
Here we have two paragraphs and a button. When clicked, the button finds the previous sibling of the target paragraph and changes its style.
This demonstrates how previousElementSibling can be used to
dynamically modify the appearance of adjacent elements in response to user
actions.
Navigation in List Items
This example demonstrates using previousElementSibling in an unordered list.
<!DOCTYPE html>
<html>
<head>
<title>List Navigation</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li id="second">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="showPrevious()">Show Previous Item</button>
<script>
function showPrevious() {
const current = document.getElementById('second');
const previous = current.previousElementSibling;
alert('Previous item: ' + previous.textContent);
}
</script>
</body>
</html>
In this example, we have a list with three items. The button triggers a function that finds the previous sibling of the middle list item.
This shows how previousElementSibling can be useful for navigating
through list structures and accessing adjacent items in the DOM.
Form Field Navigation
This example shows how to navigate between form fields using previousElementSibling.
<!DOCTYPE html>
<html>
<head>
<title>Form Field Navigation</title>
</head>
<body>
<input type="text" placeholder="First name">
<input type="text" id="lastName" placeholder="Last name">
<button onclick="focusPrevious()">Focus Previous Field</button>
<script>
function focusPrevious() {
const lastNameField = document.getElementById('lastName');
const previousField = lastNameField.previousElementSibling;
previousField.focus();
}
</script>
</body>
</html>
Here we have two input fields and a button. When clicked, the button moves focus to the previous input field relative to the last name field.
This demonstrates a practical use case for previousElementSibling in
form navigation, allowing for intuitive field-to-field movement.
Checking for Previous Sibling
This example shows how to check if an element has a previous sibling.
<!DOCTYPE html>
<html>
<head>
<title>Checking for Previous Sibling</title>
</head>
<body>
<div id="first">First element</div>
<div id="second">Second element</div>
<button onclick="checkSiblings()">Check Siblings</button>
<p id="result"></p>
<script>
function checkSiblings() {
const first = document.getElementById('first');
const result = document.getElementById('result');
if (first.previousElementSibling) {
result.textContent = 'Has previous sibling';
} else {
result.textContent = 'No previous sibling';
}
}
</script>
</body>
</html>
In this example, we check whether the first div element has a previous sibling. The result is displayed in a paragraph element.
This demonstrates how to safely use previousElementSibling by first
checking if it exists before attempting to access its properties or methods.
Source
MDN previousElementSibling Documentation
In this article, we have shown how to use the previousElementSibling
property in JavaScript. This property is fundamental for DOM traversal and
element navigation in web development.
Author
List all JS DOM tutorials.