In HTML, every element has a parent element except for the root element which is the <html> element of our document.
It means all the elements in an HTML document are always connected to each other in some manner. It can be a parent-child relationship, a sibling, or some other relationship. But, one thing is clear, they all are connected to each other.
So, if we want to get all parent elements of an element, we first need to get the direct parent of the element. If that is found, we can run a for/while loop to go one level up in the hierarchy to get all the parent elements.
To get the direct parent element of an element, you can use the parentNode property of the Node interface. The parentNode property is a read-only property that gives the direct parent node of the element in the DOM tree.
A DOM(document object model) tree is actually a hierarchical representation of an HTML or XML document.
Here is a visual representation of a DOM tree:
Let’s take an example and try to find out all the parent nodes of the given element.
Let’s say, we have the following HTML. We want to find out all the parent nodes of the <a> element that has an id="innerMostChild":
<section>
<div>
<ul>
<li>
<span>
<a href="#" id="innerMostChild">Innermost element</a>
</span>
</li>
</ul>
</div>
</section>
Now, we need to run a while loop in our JS which will run until the given node has a parent node.
In each iteration of the while loop, we will push the parent node of the current node/element into the parentNodes array and move one level up in the DOM tree one by one.
The while loop will run until we reach the topmost element in the DOM tree which has no parent.
let element = document.getElementById('innerMostChild');
let parentNodes = []; // Array to store parent elements
// Run while loop until the element has a parent node
while(element.parentNode){
// Push the current parent node to array
parentNodes.push(element.parentNode);
// Go one level up in the DOM tree
element = element.parentNode;
}
console.log(parentNodes);
// Output: [span, li, ul, div, section, body, html, document]
As you can see from the above output, the parentNodes array contains all the parent nodes of the <a> element including the three topmost nodes body, html & document.
Excluding the body, html and document Nodes from the Result
The document, html and body are the three topmost nodes for every child node in the DOM tree. Therefore, when we tried to get all the parent nodes of the <a> element in the previous example, we also got these three nodes along with other parent nodes.
But sometimes we only need those parent nodes which are inside the body element as the document, html & body are common for every node. So, how do we do that?
Well, it’s quite simple. We just have to change the condition inside the while loop.
Now, instead of going up to the topmost node in the hierarchy, we will break the while loop as soon as we reach the body element.
See the following implementation:
let element = document.getElementById('innerMostChild');
let parentNodes = []; // Array to store parent elements
// Break the loop as soon as we reach the body node
while(element.parentNode!=document.body){
// Push the current parent node to array
parentNodes.push(element.parentNode);
// Go one level up in the DOM tree
element = element.parentNode;
}
console.log(parentNodes);
// Output: [span, li, ul, div, section]
As you can see from the above output, the body, html & document nodes are no longer part of the parentNodes array. This is because the while loop breaks as soon as it reaches the body node in the DOM tree.
Conclusion
In this article, we learned how we can get all parent nodes of an element with the help of JavaScript.
To get all the parent nodes of an element, we can use the parentNode property of the Nodes interface. The parentNode property gives you the direct parent node of an element. If you want to get all parent nodes, you can run a for/while loop and push all the parent nodes inside an array.
Thanks for reading.
