chaining getElementById

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!

Solution 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/

Solution 2:

Well, the best way to find out is to try it. In this case, it won't work, since the getElementById method is only available on DOMDocument objects (e.g. the document variable) and not on DOMElement objects, which are individual nodes. I think it should have been available on those also, but hey, I disagree with most of the design of the DOM APIs...

Solution 3:

You can just use y = x.querySelector('#'+'mySecondId'); instead of y = x.getElementById('mySecondId'); in the sample of the question.

Element.getElementById doesn't exist but you can add it as mentioned in other answers, even if it is not recommended to add a method to Element. In case you want absolutely use this kind of solution, below is a possibility:

Element.prototype.getElementById = function(id) {
return this.querySelector("#"+id);
}

One advantage to use element.querySelector instead of document.getElementById inside Element.prototype.getElementById is that element.querySelector is working even if the element is not already in the DOM, such as after creating it with document.createElement.