Traversing the DOM getSiblings() is a helper method I wrote that gets the siblings of an element in the DOM. For example: if you had a list item (<li>) and wanted to grab all of the other items in the list. var elem = document.querySelector('#some-element');
var siblings = getSiblings(elem);
Get the next, previous or all siblings of an element or retrieve siblings that match a given selector.
A helper function for fetching all siblings for a given DOM element - or a filtered set of them:
function getSiblings(el, filter) {var siblings = [];
el = el.parentNode.firstChild;
do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
return siblings;
}
// example filter function
function exampleFilter(el) {
return elem.nodeName.toLowerCase() == 'a';
}
// usage
el = document.querySelector('div');
// get all siblings of el
var sibs = getSiblings(el);
// get only anchor element siblings of el
var sibs_a = getSiblings(el, exampleFilter);
There are faster DOM methods for only getting the previous or next sibling of an element:
var previous = el.previousSibling;var next = el.nextSibling;
Get all following siblings of an element, optionally filtered:
// this helper accepts a filter function as shown above: "exampleFilter()"function getNextSiblings(el, filter) {
var siblings = [];
while (el= el.nextSibling) { if (!filter || filter(el)) siblings.push(el); }
return siblings;
}
Get all preceding siblings of an element, optionally filtered:
// this helper accepts a filter function as shown above: "exampleFilter()"function getPreviousSiblings(el, filter) {
var siblings = [];
while (el = el.previousSibling) { if (!filter || filter(el)) siblings.push(el); }
return siblings;
}
Sources
//stackoverflow.com/questions/4378784/
Feedback
The read-only nextSibling property of the Node interface returns the node immediately following the specified one in their parent's childNodes, or returns null if the specified node is the last child in the parent
element. Note: Browsers insert Text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may
refer to a whitespace text node rather than the actual element the author intended to get. The article Whitespace in the DOM contains more information about this behavior. You can use Element.nextElementSibling to obtain the next element skipping any whitespace nodes, other
between-element text, or comments. To navigate the opposite way through the child nodes list use Node.previousSibling.
Value
A Node representing the next sibling of the current node, or null if there are none.
Example
<div id="div-1">Here is div-1</div> <div id="div-2">Here is div-2</div> <br /> <output><em>Not calculated.</em></output>
let el = document.getElementById("div-1").nextSibling; let i = 1; let result = "Siblings of div-1:<br/>"; while (el) { result += `${i}. ${el.nodeName}<br/>`; el = el.nextSibling; i++; } const output = document.querySelector("output"); output.innerHTML = result;
Specifications
DOM Standard # ref-for-dom-node-nextsibling① |
Browser compatibility
BCD tables only load in the browser