JavaScript Siblings

JavaScript Siblings are elements that share the same parent in the Document Object Model (DOM) tree. When working with the DOM, you may need to find an element’s previous sibling, next sibling, or all sibling elements. JavaScript provides properties such as previousElementSibling and nextElementSibling to make this easy.

What Are Siblings in JavaScript?

In the DOM, sibling nodes are nodes that have the same parent node. For example, if three paragraph elements are inside one div, those paragraphs are siblings because they share the same parent.

In this structure, the first, second, and third paragraphs are sibling elements. The second paragraph has the first paragraph as its previous element sibling and the third paragraph as its next element sibling.

JavaScript Sibling Properties

JavaScript provides several DOM properties for navigating between sibling nodes and elements. The most commonly used properties are:

• previousElementSibling – returns the previous sibling element.
• nextElementSibling – returns the next sibling element.
• previousSibling – returns the previous sibling node, which may be a text node or comment node.
• nextSibling – returns the next sibling node, which may be a text node or comment node.

1. previousElementSibling Property

The previousElementSibling property returns the element immediately before the selected element within the same parent. If there is no previous element sibling, it returns null.

Example: Get the Previous Sibling Element

<div>
  <p id="first">First</p>
  <p id="second">Second</p>
  <p id="third">Third</p>
</div>

<script>
  const second = document.getElementById("second");
  const previous = second.previousElementSibling;

  console.log(previous.textContent); // First
</script>

Here, previousElementSibling finds the paragraph with the text “First” because it is the element directly before the selected second paragraph.

2. nextElementSibling Property

The nextElementSibling property returns the element immediately after the selected element. It returns null when no next element sibling exists.

Example: Get the Next Sibling Element

<div>
  <p id="first">First</p>
  <p id="second">Second</p>
  <p id="third">Third</p>
</div>

<script>
  const second = document.getElementById("second");
  const next = second.nextElementSibling;

  console.log(next.textContent); // Third
</script>

The result is the third paragraph because it is the next element after the selected second paragraph.

3. previousSibling and nextSibling Properties

The previousSibling and nextSibling properties return the previous or next node, not necessarily an element. Because HTML formatting often creates whitespace text nodes between elements, these properties may return a text node instead of the element you expect.

Example: Using nextSibling

<div>
  <p id="one">One</p>
  <p id="two">Two</p>
</div>

<script>
  const one = document.getElementById("one");

  console.log(one.nextSibling.nodeName); 
  // May output #text because of whitespace

  console.log(one.nextElementSibling.textContent);
  // Two
</script>

Use nextElementSibling or previousElementSibling when you specifically need an HTML element. Use the node-based properties when text and comment nodes are also important.

4. Loop Through All Sibling Elements

You can use parentElement.children to access all child elements of the same parent, then loop through them. This is useful when you need to process every sibling element.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script>
  const selected = document.querySelector("#menu li:nth-child(2)");
  const siblings = selected.parentElement.children;

  for (const sibling of siblings) {
    if (sibling !== selected) {
      console.log(sibling.textContent);
    }
  }
</script>

This example logs every list item except the selected “About” item. The children collection contains element children only, so whitespace text nodes are excluded.

5. Change the Style of Sibling Elements

Sibling properties are also useful for changing nearby elements in response to user interaction. The following example highlights the next sibling when a button is clicked.

<div>
  <button id="highlightButton">Highlight next item</button>
  <p>This paragraph is the next sibling.</p>
</div>

<script>
  const button = document.getElementById("highlightButton");

  button.addEventListener("click", function () {
    const next = button.nextElementSibling;

    if (next) {
      next.style.backgroundColor = "yellow";
    }
  });
</script>

The click handler finds the button’s next element sibling and changes its background color. The if (next) condition prevents an error if no next element exists.

previousElementSibling vs previousSibling

Common Mistakes When Working with Siblings

• Confusing nodes with elements: nextSibling may return whitespace as a text node. Use nextElementSibling when you need an element.
• Ignoring null: The first element has no previous element sibling, and the last element has no next element sibling. Check the result before using it.
• Assuming siblings share the same tag: Sibling elements can have different tag names. They only need to share the same parent.
• Mixing up parent and sibling relationships: A sibling is next to another node under the same parent; it is not an ancestor or descendant.