This solution provides a more detailed approach to creating a filter for selecting siblings.

There are three functions available to select only previous, only next, or all siblings. While there is room for improvement, this serves as a solid starting point if you require more specific control over the types of siblings you want to retrieve. It's a useful addition worth considering.

Check out the working example here

Get all next siblings

// This function will start from the current element and collect all the following siblings

function getNextSiblings(elem, filter) {
    var sibs = [];
    while (elem = elem.nextSibling) {
        if (elem.nodeType === 3) continue; // text node
        if (!filter || filter(elem)) sibs.push(elem);
    }
    return sibs;
}

Get all previous siblings

// This function will start from the current element and gather all the previous siblings

function getPreviousSiblings(elem, filter) {
    var sibs = [];
    while (elem = elem.previousSibling) {
        if (elem.nodeType === 3) continue; // text node
        if (!filter || filter(elem)) sibs.push(elem);
    }
    return sibs;
}

Get all siblings

// This function will start from the first child of the current element's parent and fetch all the siblings

function getAllSiblings(elem, filter) {
    var sibs = [];
    elem = elem.parentNode.firstChild;
    do {
        if (elem.nodeType === 3) continue; // text node
        if (!filter || filter(elem)) sibs.push(elem);
    } while (elem = elem.nextSibling)
    return sibs;
}

Example filter to apply to the above functions

// This example filter only considers divs and spans but can be extended
function exampleFilter(elem) {
    switch (elem.nodeName.toUpperCase()) {
        case 'DIV':
            return true;
        case 'SPAN':
            return true;
        default:
            return false;
    }
}

HTML and testing output

HTML

<div id='test'>
    <div id='test2'>asdf</div>
    <br /> sdf
    <div>asdfasdf<span>asdf</span></div>
    <div>a</div>
    <span>a</span>
    <br />
    <div>d</div>
    <hr/>
</div>

JavaScript

var elem;
elem = document.getElementById('test2');

// With the filter applied, alerts 4
alert( getNextSiblings( elem, exampleFilter ).length );

// Without a filter, alerts 7
elem = document.getElementById('test2');
alert( getNextSiblings( elem ).length );

// Alerts 0
elem = document.getElementById('test2');
alert( getPreviousSiblings( elem, exampleFilter ).length );

// Alerts 5
elem = document.getElementById('test2');
alert( getAllSiblings( elem, exampleFilter ).length );

If you're looking for a quick and efficient solution using ES6, here's a concise method:

const fetchAllRelatedElements = (targetElement, parentContainer) => {
        const childNodes = [...parentContainer.children];
        return childNodes.filter(childNode => childNode !== targetElement);
    }

This function will retrieve all direct children of a specified parent element that are not the target element itself.

An elegant approach utilizing ES2015 (spread & indexOf)

const fetchAdjacentNodes = (element, includeTextNodes) => {
  if (!element || !element.parentNode) return
  
  let siblings = [...element.parentNode[includeTextNodes ? 'childNodes' : 'children']],
      index = siblings.indexOf(element);
  
  siblings.before = siblings.slice(0, index)
  siblings.after = siblings.slice(index + 1)
  
  return siblings
}

// Example of how to use the function:

const $element = document.querySelector('em') // target element 
const adjacentNodes = fetchAdjacentNodes($element)

console.log("Nodes Before <em/>:", display(adjacentNodes.before))
console.log("Nodes After <em/>:", display(adjacentNodes.after))
console.log("All Nodes around <em/>:", display(adjacentNodes))

function display(elements){
  return JSON.stringify(elements.map(node => node.tagName || node.textContent))
}

<div></div>
text node 1
<a></a>
<p></p>
<em></em>
<main></main>
text node 2
<hr/>
<b></b>

This update is in response to @subhaze's previous answer.

The code showcased here utilizes the matches DOM method, which is compatible with modern web browsers:

Check out the Demo here

function matches(elem, filter) {
  if (elem && elem.nodeType === 1) {
    if (filter) {
      return elem.matches(filter);
    }
    return true;
  }
  return false;
}

// Retrieve all next siblings starting from the current element
function getNextSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.nextSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}

// Grab all previous siblings starting from the current element
function getPreviousSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.previousSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}

// Get all siblings starting from the first child of the current element's parent
function getAllSiblings(elem, filter) {
  var sibs = [];
  elem = elem.parentNode.firstChild;
  while (elem = elem.nextSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  } 
  return sibs;
}

To use these functions, follow the examples below:

var elem = document.querySelector('#test');

// Find all "div" and "span" siblings
var after = getNextSiblings(elem, 'div, span');

// Locate previous siblings with ".list-item" class
var index = getPreviousSiblings(elem, '.list-item');

// Gather all siblings with a title attribute
var allSibs = getAllSiblings(elem, '[title]');

Going back to the year 2017:
Perhaps there exists a superior solution, however this one is good and slightly cleaner

function findSiblingElement(domElement, query) {
   var siblingElements = domElement.parentElement.querySelectorAll(query);
   return [].slice.call(siblingElements).filter( element => element != domElement);
}

Here is a more concise alternative:

const siblings = [...elem.parentNode.children].filter(node => node !== elem)];

To obtain every child of the parent element, simply exclude the element from the selection.

This solution was previously shared here in response to a similar query.

There are multiple approaches to achieve this.

Any of the following methods should work effectively.

// METHOD X (FILTERING WITH INDEXOF)
var findSiblings = function(currentNode, allChildren) {
    let siblingList = allChildren.filter(function(child) {
        return [currentNode].indexOf(child) != -1;
    });
    return siblingList;
}

// METHOD Y (FOR LOOP AND ARRAY PUSH)
var findSiblings = function(currentNode, allChildren) {
    var siblingList = [];
    for (let i = allChildren.length - 1; i >= 0; i--) {
        if (allChildren[i] != currentNode) {
            siblingList.push(allChildren[i]);
        }  
    }
    return siblingList;
}

// METHOD Z (INDEXOF AND SPLICE)
var findSiblings = function(currentNode, allChildren) {
   let siblingList = allChildren;
   let index = siblingList.indexOf(currentNode);
   if(index != -1) {
       siblingList.splice(index, 1);
   }
   return siblingList;
}

For those interested in diving deep into top-notch JavaScript, exploring the jQuery codebase is highly recommended.

Check out this amazing tool that presents the jQuery codebase in a streamlined manner.

Find all the elements before this one.

// Using jQuery (optional filter selector)
$el.prevAll($filter);

// Utilizing Vanilla JavaScript (optional filter function)
function getPreviousSiblings(elem, filter) {
  var siblings = [];
  while (elem = elem.previousSibling) {
      if (elem.nodeType === 3) continue; // Skip text nodes
      if (!filter || filter(elem)) siblings.push(elem);
  }
  return siblings;
}

Locate all the elements after this one.

// jQuery method (optional selector filter)
$el.nextAll($filter);

// Native JavaScript implementation (optional filter function)
function getNextSiblings(elem, filter) {
        var siblings = [];
        var nextElem = elem.parentNode.firstChild;
        do {
            if (nextElem.nodeType === 3) continue; // Ignore text nodes
            if (nextElem === elem) continue; // Ignore target element
            if (nextElem === elem.nextElementSibling) {
                if (!filter || filter(elem)) {
                    siblings.push(nextElem);
                    elem = nextElem;
                }
            }
        } while(nextElem = nextElem.nextSibling)
        return siblings;
    }

Example of a filtering function:

function exampleFilter(elem) {
  switch (elem.nodeName.toUpperCase()) {
    case 'DIV':
      return true;
    case 'SPAN':
      return true;
    default:
      return false;
  }
}

This method is specifically designed to assist in selecting all siblings of a chosen element

The following technique proved to be effective in selecting ALL SIBLINGS (excluding the selected item itself) within the same PARENT container (it's similar to how your parent knows all your siblings, but you may only be aware of your immediate elder sibling as previousElementSibling and immediate younger sibling as nextElementSibling). Quite an interesting analogy!

The Implementation

const allSiblings = Array.from(YOUR_SELECTION.parentElement.children)
                         .filter(sibling => sibling.UNIQUE_PropertyName !== (YOUR_SELECTION.COMPARABLE/UNIQUE_PropertyName));

// You can skip storing it in a variable if necessary

Illustrative Example

HTML

<div id="mummy">
    <div id="baby_1">Samuel</div>
    <div id="baby_2">Dave</div>
    <div id="baby_3">Shaun</div>
    <div id="baby_4">Michael</div>
    <div id="baby_5" class="selected">Fazlullah</div>
    <div id="baby_6">Samson</div>
    <div id="baby_7">Bais</div>
<div>

Javascript

// In this scenario, I have opted to utilize the children's names as the UNIQUE_Property, thus using the .textContent property 

const selected = document.querySelector('.selected'); // Selecting "Fazlullah" as the target

const allSiblings = Array.from(selected.parentElement.children) // Identifying his parent (.parentElement), followed by the parent's children(.children)
                         .filter(sibling => sibling.textContent !== selected.textContent); // This provides a list (specifically an array) of his lesser-known siblings.

allSiblings.forEach(sibling => {
    console.log(sibling.textContent);
});

If the 'id' attribute of the children was employed, the chained filter method would appear as:

.filter(sibling => sibling.id !== selected.id);

Check out the Demo

Here is an Angular solution for those in need, but it can also be easily converted to plain JavaScript

findNextElements(targetElement: any) {
let element = targetElement as HTMLElement;
let nextElements: any[] = [];

let addElement = false;
element.parentElement?.childNodes.forEach(node => {
  let childNode = node as HTMLElement;

  if (addElement) {
    nextElements.push(childNode);
  }

  if (childNode.id == element.id) {
    addElement = true;
  }
});

return nextElements;

}

In my opinion, I have devised a couple of functions to retrieve both the previous and the next siblings of any given element.

const obtainPreviousAll = el => {
  const allPrevious = [];
  const getPrev = el => {
    if (el !== null) {
      allPrevious.push(el);
      const prevSibling = el.previousElementSibling;
      if (prevSibling !== null) {
        getPrev(prevSibling);
      }
    }
  };
  getPrev(el.previousElementSibling);
  return allPrevious;
};

const obtainNextAll = el => {
  const targetEl = el;
  const allNext = [];
  const getAll = el => {
    if (el != null) {
      allNext.push(el);
      const nextSibling = el.nextElementSibling;
      if (nextSibling !== null) {
        getAll(nextSibling);
      }
    }
  };
  getAll(targetEl.nextElementSibling);
  return allNext;
};

All you need to do is execute these functions with a node obtained using getElementById.

An alternative approach is to utilize a generator function in conjunction with

Element.parentNode.firstElementChild

function* findSiblings(element) {

  let next = element?.parentNode?.firstElementChild;
  
  while (next !== null && next !== undefined) {
    if (element !== next) {
      yield next;
    }
    next = next.nextElementSibling;
  }

}

const mainEl = document.querySelector('main');

for (const el of findSiblings(mainEl)) {
  console.log(el);
}

Discover a simple technique to locate all sibling elements of the currently selected DOM element https://i.sstatic.net/51O87mpH.png

TS

import {Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-json-block',
  templateUrl: './json-block.component.html',
  styleUrls: ['./json-block.component.scss'],
})

export class JsonBlockComponent {
  constructor(private jsonBlockContainer: ElementRef) { }

  ngOnChanges(changes: SimpleChanges): void {
  console.log(this.jsonBlockContainer.nativeElement.parentElement.children);
      }
   }

HTML

<div class="jsonBlock" #jsonBlockContainer>
  <h2>
    {{ data.title }}
  </h2>
</div>