Home > JavaScript > getElementsByClassName in Firefox 3.x

getElementsByClassName in Firefox 3.x

The developers has been waiting for some methods through which they can retrieve element(s) based on a class name from the browser side. There are some pretty impressive custom getElementsByClassName implementations out there. I had used the one developed by Dustin Diaz for a while and later when I started using YUI, begin to use their version of getElementsByClassName function.

Firefox 3 released with a built-in getElementsByClassName function which is integrated in HTMLElement object.

A basic representation:

document.getElementsByClassName('links');

The above line will give you all the elements from the page (remember that it returns an HTML Collection, even it contains only one item similar to the usage of getElementsByTagName), which has a ‘links’ class associated with them. Pretty easy..

What is the problem in the above mentioned approach?

If your page contains large number elements, the time taken to retrieve the elements will be higher. Believe me the method integrated in Firefox is pretty fast compared to any custom versions available today. John Resig has posted the speed comparisons long back ago. But theoretically speaking we can say that if we can restrict the search area to a particular section, the retrieval would be far better.

Fortunately the function works with all elements as it is integrated to HTMLElement object.

Assume that you have used class name ‘links’ extensively in your page but you are only interested in HTML elements that are inside a div element whose ID is ‘container’. Is this kind of operation possible with this? Yes you can achive these kind of filtering without much trouble:

var el = document.getElementById('container');
if(el){
  var elements = el.getElementsByClassName('links');
}

What the above code does? it checks whether the current document contains any element whose ID is ‘container’. If the element is present then it will try to retrieve elements from it whose class name is ‘links’. Sometimes the function will return an empty collection, if there are no element(s) with the mentioned class.

You will not be able to overwrite the built-in representation of getElementsByClassName in Firefox. As I personally do not like overwriting the built-in functions/objects supported by browsers, I can live with this.

What is the limitation compared to the custom versions.

Assume that you have a div element whose ID is ‘container’. This element contains lots of span and div elements. Some of these span and div elements has a class ‘links’ with them. Now as a JavaScript developer you need to perform some operations only on span elements which has a class name ‘links’, which are children of an element whose ID is ‘container’. How this can be achieved.

You can achieve this with the following code:

var els = document.getElementById('container');
els = els..getElementsByClassName('links');
Array.filter(els,
    function(elem) {
	return elem.nodeName.toLowerCase() === 'span';
    }
);

If you look at the above operation you can clearly view that you are using two different operations here:

1. The getElementsByClassName retrieval
2. The filter function call through Array object.

If you look the custom versions of getElementsByClassNames available all of the popular ones has a provision for specifying the tag name of the elements, which you want to check. But the built-in version does not have a provision for that. I personally feel it would have been better if the built-in version of getElementsByClasName support that part unlike the above used method, which is more understandable from a beginner point of view.

Please note that IE does not support getElementsByClassName function at the moment. The code used/discussed here will not work in IE.

Some of the interesting links regarding getElementsByClassName

getElementsByClassName Speed Comparison by John Resig

Dustin Diaz’s getElementsByClassName

Mozilla Developer Center – Documentation

Robert Nyman’s Ultimate getElementsByClassName

Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: