Getting 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 article, we'll explore different techniques to get siblings using JavaScript.

The "parentNode" Property

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, 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:

Example: Highlighting Siblings on Mouseover

Let's create a complete example where hovering over an element highlights its siblings:

<!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>
    /* Optional styling for better presentation */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    div {
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
      cursor: pointer;
    }

    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

  <div onmouseover="highlightSiblings(this)">Element 1</div>
  <div onmouseover="highlightSiblings(this)">Element 2</div>
  <div onmouseover="highlightSiblings(this)">Element 3</div>

  <script>
    // Function to get siblings of an element
    function getSiblings(element) {
      const parentElement = element.parentNode;
      const childElements = Array.from(parentElement.children);
      return childElements.filter(child => child !== element);
    }

    // Function to highlight siblings on mouseover
    function highlightSiblings(element) {
      const siblings = getSiblings(element);

      // Remove the 'highlight' class from all siblings
      siblings.forEach(sibling => sibling.classList.remove('highlight'));

      // Add the 'highlight' class to the current element and its siblings
      [element, ...siblings].forEach(sibling => sibling.classList.add('highlight'));
    }
  </script>
</body>
</html>

In this example:

Conclusion

Working with the siblings of an element is a useful skill in JavaScript development.

Whether you're highlighting related elements, updating their content, or applying other changes, understanding how to access and manipulate siblings provides greater control over your web applications.

Incorporate these techniques into your projects to create more interactive and dynamic user interfaces.