There are a whole lot of additional properties and methods available on tables than there are for other elements within the Document Object Model. These allow you to reference everything within the table without needing to do any additional getElementsByTagName calls.
I had always assumed that using these additional elements would provide access that is at least as fast if not faster than using getElementsByTagName since they are more specific as to exactly what you are trying to retrieve whereas getElementsByTagName is more generic.
As a result of a discussion that I was having with someone who had the opposite opinion I decided that I ought to test this to find out exactly what the true comparison between the two are. For the purposes of the test I decided to test how long it takes to retrieve the first <tbody> tag from a table. Having retrieved the table itself into a variable called tab the two ways of accessing the first tbody tag from that table to be tested are:
tab.tBodies[0];
tab.getElementsByTagName('tbody')[0];
To obtain some figures that are big enough to measure I set up two loops to repeat each of these two calls one million times each. I also added code before and after each loop to get the time at those points (using identical code for each) so as to be able to measure exactly how long it took to perform each of the loops. I ran this test about a dozen times each in a recent version of each of the five major browsers. The figures obtained for each browser from each run differed only slightly from one another (only two or three percent at most) and the figures quoted below are those from a test that was in the middle of the range for each browser.
- Firefox - the tbodies test took 4938 milliseconds while the getElementsByTagName test took 4249 milliseconds.
- Internet Explorer 8 - the tbodies test took 6141 milliseconds while the getElementsByTagName test took 7953 milliseconds.
- Safari - the tbodies test took 2061 milliseconds while the getElementsByTagName test took 2382 milliseconds.
- Google Chrome - the tbodies test took 3124 milliseconds while the getElementsByTagName test took 4344 milliseconds.
- Opera - the tbodies test took 640 miilliseconds while the getElementsByTagName test took 3839 milliseconds.
Most of these results match to what I expected (such as Internet Explorer being slower for both tests than the other browsers). There were a couple of unexpected outcomes though.
The first surprise is that the results in Firefox were exactly the reverse of what I had expected it to be and also the opposite of all the other browsers. The difference though is extremely small (seven millionths of a second per call), small enough to ignore in terms of how you write your code.
The other big surprise was that there is such a huge difference between the two sets of results in Opera with the tBodies call being over six times faster than the getElementsByTagName version. This particular result demonstrates just how big a difference the more specific reference can make in a properly optimised JavaScript engine.
So having performed these tests I no longer need to assume that the more specific method of accessing elements within tables are the better way of writing the code because these speed tests have clearly demonstrated that for most browsers they are. It also indicates that even if you don't consider the difference to be significant enough to worry about in most browsers at the moment, that using the more specific access methods will save your having to rewrite your code to further optimise it in the future once the other browsers improve the efficiency of their JavaScript engine for those calls to match that of the current Opera JavaScript engine.