getElementsByClassName

The Javascript DOM

8. getElementsByClassName

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Collections getElementByIdAccessing PropertiesChanging StylesinnerHTML getElementsByTagName

When we have an id on a tag we uniquely identify that specific tag which we can retrieve using document.getElementById('id'). When we just want to retrieve all of the tags of a particular type we can use document.getElementsByTagName('div') to retrieve them all in an array. There is one level of grouping that falls between these two - the class. The same class can be applied to more than one tag and even to more than one type of tag in order to supply common functionality to all of the tags that share that class (for example we could have class="red" to indicate that any text in the tag is to be displayed in red). We can also apply more than one class to the same tag by separating the class names by spaces (eg. class="red big"). The obvious way to access all of the HTML containers in our page that share the same class name by analogy to the previous two document methods would be to usedocument.getElementsByClassName('red') to retrieve an array of all of the tags that have that class associated with them.

Unfortunately there is no such method as document.getElementsByClassName so we can't grab a collection of all of the tags that share a class that way, we'll have to find another way to do it. It's a real pity because that would have been a really nice consistent way to be able to obtain that level of access into the page content.

In fact we are not going to abandon document.getElementsByClassName because it is too neat a way to be able access all of the elements in our page that belong to the same class. So what if Javascript doesn't provide that method, we can always add that method for ourselves. Take a look at this piece of Javascript, it actually creates the method that we wanted with the exact functionality that we want (at least it does in IE6, Netscape 6+, Firefox, and Opera 7+).

document.getElementsByClassName = function(cl) {    var retnode = [];    var myclass = new RegExp('\\b'+cl+'\\b');    var elem = this.getElementsByTagName('*');    for (var i = 0; i < elem.length; i++) {        var classes = elem[i].className;        if (myclass.test(classes)) retnode.push(elem[i]);    }    return retnode;}; 

All we need to do is to copy that code into the top of our Javascript and we are in business. We cal now call document.getElementsByClassName and have it return an array of objects that correspond to all of the HTML containers on our web page that belong to the specified class. I wont go into the detail of how you use it because it works identically with document.getElementsByTagName except for how it selects the entries to collect into the array. The only difference in its use is that we need to define it for ourselves instead of Javascript predefining it for us.

http://javascript.about.com/library/bldom08.htm