Question

I have a array of elements I would like to retrieve from a list, I am unable to change the elements, I would usually use jQuery and the call would be:

$("//div/ol/li/h3/a");

However I am unable to sue jquery or another selector framework for that matter, how should this be done.

Answer 1

Note: It seems that //div/ol/li/h3/a is an XPath expression, which is not supported anymore by jQuery afaik.

If your target browsers support it, you can simply use querySelectorAll ^[MDN]:

var links = document.querySelectorAll('div > ol > li > h3 > a');

Otherwise, a direct conversion would be:

// root is the element you start with, e.g. `document.body`
var selector = ['ol', 'li', 'h3', 'a'],
    set = root.getElementsByTagName('div');

for(var i = 0, len = selector.length; i < len; i++) {
    var tag = selector[i],
        new_set = [];

    for(var j = 0, lenj = set.length; j < lenj; j++) {
        for(var child = set[j].firstChild; child; child.nextSibling) {
            if(child.nodeName.toLowerCase() === tag) {
                new_set.append(child);
            }
        }
    }

    set = new_set;
}

At the end, set will contain all links. One could also write a recursive function or simplify the code, if more information about the HTML structure is given.