Question

I’ve been looking for an answer to this question but I could find none so I thought I’d try StackOverflow.

In javascript, is this valid:

x = document.getElementById('myId');
y = x.getElementById('mySecondId');

I know this can be done with getElementsByTagName but I’m not sure if the object returned by getElementById is able to use the getElementById method.

I know that the ID is supposed to be unique per document, but sometimes this is just not the case.

Thanks!

Answer 1

Nope.

…But you can, though:

Element.prototype.getElementById = function(id) {
    return document.getElementById(id);
}

Try it on this page:

var x = document.getElementById('footer').getElementById('copyright');

Edit: As Pumbaa80 pointed out, you wanted something else. Well, here it is. Use with caution.

Element.prototype.getElementById = function(req) {
    var elem = this, children = elem.childNodes, i, len, id;

    for (i = 0, len = children.length; i < len; i++) {
        elem = children[i];

        //we only want real elements
        if (elem.nodeType !== 1 )
            continue;

        id = elem.id || elem.getAttribute('id');

        if (id === req) {
            return elem;
        }
        //recursion ftw
        //find the correct element (or nothing) within the child node
        id = elem.getElementById(req);

        if (id)
            return id;
    }
    //no match found, return null
    return null;
}

An example: http://jsfiddle.net/3xTcX/