Find all siblings of a given DOM element.
In this question we need to return all siblings so they can have same parent or different, but need to be on same level.
To solve this question BFS will be the most suitable algorithm. We will do level order traversal and return nodes at current level if targetNode exist.
const getRoot = (targetNode )=> {
let parent = targetNode;
while(parent.parentElement){
parent = parent.parentElement;
}
return parent;
}
const getSiblings = (targetNode )=> {
if(!targetNode ) return null;
const root = getRoot(targetNode);
const queue= [root, null];
let nodesAtSameLevel = [];
let currentLevelIncludeTarget = false;
while(queue.length > 0){
const currentN = queue.shift();
if(currentN === null){
if(currentLevelIncludeTarget){
return nodesAtSameLevel;
}
nodesAtSameLevel = [];
if(queue.length) queue.push(null);
} else {
if(currentN === targetNode){
currentLevelIncludeTarget = true;
} else {
nodesAtSameLevel.push(currentN);
}
queue.push(...currentN.children);
}
}
return [];
}
If we want to return only immediate siblings of given node we can get parentNode and then return all its child nodes after removing targetNode.
Something like
const getSiblings = (node) => {
if (!node || !node.parentElement) return [];
return Array.from(node.parentElement.childNodes).filter((sibling) => sibling !== node);
};
Top comments (0)