How to Get Siblings of an Element using JavaScript

In web development, working with the siblings of an HTML element is a common task. Siblings are elements that share the same parent. JavaScript provides several ways to access and manipulate the siblings of an element. In this tutorial, you will learn how to find siblings of an element using JavaScript.

Getting Siblings of an Element using JavaScript:

The parentNode property allows you to access the parent element of a given element. Once you have the parent, you can use the children property to get all the child elements. Finally then, you can filter out the original element to obtain its siblings. Let’s create a function that demonstrates this approach:

// Function to get siblings of an element
function getSiblings(element) {
    // Get the parent element
    const parentElement = element.parentNode;

    // Get all child elements of the parent
    const childElements = Array.from(parentElement.children);

    // Filter out the original element to get siblings
    const siblings = childElements.filter((child) => child !== element);

    return siblings;
}

In this code:

The getSiblings function takes an element as an argument.
The parent element is obtained using the parentNode property.
The children property returns a live HTMLCollection, which is converted to an array using Array.from() for easier manipulation.
The array of child elements is filtered to exclude the original element, resulting in an array of siblings.

Highlighting Siblings on Mouseover:

Let’s create a complete example where hovering over an element highlights its siblings. Here is the Demo:

View Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get Siblings Example</title>
  <style>
    div {
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
      cursor: pointer;
      color: black;
    }

    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
    <h1>Hover your mouse.</h1>
  <section>
    <div class="el">Element 1</div>
    <div class="el">Element 2</div>
    <div class="el">Element 3</div>
</section>
  <section>
    <div class="el">Element 4</div>
    <div class="el">Element 5</div>
    <div class="el">Element 6</div>
  </section>

  <script>
    const allElements = document.querySelectorAll('.el');

    allElements.forEach(element => {
        element.addEventListener('mouseleave',() => removeHighlight(element))
        element.addEventListener('mouseover',() => highlightSiblings(element))
    });

    function getSiblings(element) {
        const parentElement = element.parentNode;
        const childElements = Array.from(parentElement.children);
        return childElements.filter(child => child !== element);      
    }

    function highlightSiblings(element) {
        const siblings = getSiblings(element);
        [element, ...siblings].forEach(sibling => sibling.classList.add('highlight'));
    }

    function removeHighlight(element) {
        const siblings = getSiblings(element);
        [element, ...siblings].forEach(sibling => sibling.classList.remove('highlight'));
    }
  </script>
</body>
</html>

Getting Siblings of an Element using JavaScript:

Highlighting Siblings on Mouseover:

Leave a Reply Cancel reply