chaining getElementById

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/

Answer 2

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.

Answer 3

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...

Answer 4

Consider not using id when there are more than one

Maybe a class or custom attribute is better, you can then use document.querySelectorAll to fins them.

els = document.querySelectorAll('[custom-attr]')

Answer 5

This is a fast alternative based on Node.contains

var getById = function(id, context) {
  var el = document.getElementById(id);
  return context.contains(el) ? el : null;
}

var container = document.getElementById('container-element');
getById('my-element-id', container);

The last line (profiled on latest Chrome and Firefox) performs 4x to 10x faster than jQuery's equivalent

$('#my-element-id', container);

The only good alternative is querySelector (a bit faster)

container.querySelector('#my-element-id');

Answer 6

Nope.

Only the document object has the method getElementById by default.

Even if x was an iframe or something, you'd still have to access some other properties or whatever before you got to another getElementById.