I recently came across an article posted by Alex Russell (Project lead of DOJO) and he talks abt using same Id for multiple elements and a faster way of accessing those elements using one of his methods. I have to agree with him that using same Ids for multiple elements is very much useful sometimes and I've been using that technique for quite sometime now. But there is an easy way to access those DOM elements faster than whatever Alex specifies. Let's get into an example and see how that can be achieved.
This technique uses, document.all for getting the elements with the same ID. I know it's not a standard to use document.all and same ID for multiple elements. But this article shows you that there is a way and I am not encouraging you to use same ID for multiple elements. Now, most of the browsers implemented document.all, making it easier to use and no there's no cross-browser play you have to do in your code.
document.all represents all elements in the page and we can use this collection to get an element/elements with some specific ID. So, to get an element with "test" ID, we can use document.all['test'] to get that element. At the same way, if there are more than one element with that ID, a collection of nodes will be returned. But Alex went ahead and developed his own code for doing this, which is way slower than using document.all.
For demonstration purposes, I developed one example which writes 1000 divs to document onload of the page and page contains, two buttons, one gets elements using Alex's method and the second button uses document.all to get the nodes. Please check the fastness by yourself with the following link.
Link to example: http://www.geocities.com/keelypavan/DOMFasterMethods.html
This technique uses, document.all for getting the elements with the same ID. I know it's not a standard to use document.all and same ID for multiple elements. But this article shows you that there is a way and I am not encouraging you to use same ID for multiple elements. Now, most of the browsers implemented document.all, making it easier to use and no there's no cross-browser play you have to do in your code.
document.all represents all elements in the page and we can use this collection to get an element/elements with some specific ID. So, to get an element with "test" ID, we can use document.all['test'] to get that element. At the same way, if there are more than one element with that ID, a collection of nodes will be returned. But Alex went ahead and developed his own code for doing this, which is way slower than using document.all.
For demonstration purposes, I developed one example which writes 1000 divs to document onload of the page and page contains, two buttons, one gets elements using Alex's method and the second button uses document.all to get the nodes. Please check the fastness by yourself with the following link.
Link to example: http://www.geocities.com/keelypavan/DOMFasterMethods.html
Please click on the second button first as Alex’s method is resetting ids. I tested in IE 6, opera 8.54 and in all these browsers document.all method took almost 0 ms. I know it’s not a W3C standard but when all the browsers implemented that, I don't see any other reason why we should stop using that.
Note: Please bear with those Yahoo geocities ads and if you have pop-up blocker, you may get Javascript errors and these errors are from geocities ads code, please ignore them.
3 comments:
The second button (document.all) doesn't seem to work in Firefox, Camino, Safari, or IE:mac. Firefox seems like a big one that you want to make sure to support. I guess you could implement both methods based on the browser if you really need to squeeze out a little bit better performance...
I couldn't get "document.all" in Firefox to return more than 1 element. document.all(id).length is always undefined no matter how many elements with that same id exist. I think document.all is just a direct wrapper for document.getElementById which does not return a NodeList.
For faster DOM query go to:
getElementsById
It is fast work with Safari finally.
Post a Comment