Can you illustrate how to code a function in JavaScript for obtaining the previous sibling of a DOM element?

Question Analysis

The question requires you to write a JavaScript function that retrieves the previous sibling of a given DOM element. In the context of the DOM (Document Object Model), a sibling is an element that shares the same parent. The challenge is to correctly access this sibling element using JavaScript. This involves understanding DOM navigation properties, particularly how to access sibling elements.

Answer

To obtain the previous sibling of a DOM element in JavaScript, you can use the previousElementSibling property. This property returns the previous sibling element of the specified element that is an element node, or null if there is no such element.

Here is a simple function that demonstrates how to achieve this:

function getPreviousSibling(element) {
    // Check if the element exists and has a previous sibling
    if (element && element.previousElementSibling) {
        return element.previousElementSibling;
    } else {
        // Return null if there is no previous sibling
        return null;
    }
}

Explanation:

• Function Name: getPreviousSibling
• Parameter: element, which is the DOM element for which you want to find the previous sibling.
• Logic:
  • The function first checks if the element is not null and has a previousElementSibling.
  • If both conditions are true, it returns the previous sibling element.
  • If there is no previous sibling, it returns null.

Usage Example:

// Assuming you have a DOM element with the id 'example'
var element = document.getElementById('example');
var previousSibling = getPreviousSibling(element);

if (previousSibling) {
    console.log('Previous Sibling:', previousSibling);
} else {
    console.log('No previous sibling found.');
}

This function is useful for navigating through the DOM when you need to manipulate or retrieve information about adjacent elements.