How to recursively search all parentNodes

Question

I want to know, how to find out recursively all parent nodes of an element. Suppose i have following snippet

<a href="#"><font>Hello</font></a>

In this I would like to find out whether font tag's parent node is an anchor tag or not. Now this can be achieved by simply checking .parentNode property. But what if there are following cases like,

<a href="#"><font><b>Hello<b></font></a>

or

<a href="#"><font><b><u>Hello</u><b></font></a>

So, basically, how to know if we have reached the top most parent node ?

Answer 1

You can traverse from an element up to the root looking for the desired tag:

function findUpTag(el, tag) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.tagName === tag)
            return el;
    }
    return null;
}

You call this method with your start element:

var el = document.getElementById("...");  // start element
var a = findUpTag(el, "A");   // search <a ...>
if (a) console.log(a.id);

Answer 2

The following recursive function will return an ascending ordered array, with all the parents nodes for the provided DOM element, until BODY node is reached.

function parents(element, _array) {
    if(_array === undefined) _array = []; // initial call
    else _array.push(element); // add current element
    // do recursion until BODY is reached
    if(element.tagName !== 'BODY' ) return parents(element.parentNode, _array);
    else return _array;
}

Usage :

var parentsArray = parents( document.getElementById("myDiv") );