chaining getElementById
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...
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
.
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/