javascript - 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);