Question

If I have a html dom as shown below, with out using any library (like jQuery) how can I iterate through all the sub elements of any given element. I need to check whether some custom attributes are set on those elements.

<div id="testme">
    <span><a></a></span>
    <div>
        <ul>
            <li><a></a></li>
        </ul>
    </div>
</div>

Answer 1

It is pretty easy using the html dom + javascript.

var printhere = document.getElementById("printhere");

function stepthrough(el, prefix){
    prefix = prefix || "";
    if(el ){
        //Ignore the text nodes
        if(!el.nodeName || !(/#text/i.test(el.nodeName))){
            printhere.innerHTML += "<br />" + prefix + el.tagName;
            if(el.firstChild){
                stepthrough(el.firstChild, prefix + "--");
            }
        }

        if(el.nextSibling){
            stepthrough(el.nextSibling, prefix)
        }
    }
}

stepthrough(document.getElementById("testme"));

You can customize the printhere.innerHTML += "<br />" + prefix + el.tagName; part of the code to fit it into any anything.

You can find a working example in this fiddle.

This is an recursive function which goes through all the children and subchildren of the given node