Custom getElementsByClassName function for all browsers

Javascript is really great for manipulating the DOM using the document.getElementsByTagName and document.getElementById functions, but was made a bit difficult when wanting to get particular elements that have a certain class. Then the getElementsByClassName came around as part of the Html5 Specification. I’ve been wanting to use the document.getElementsByClassName function but as not all browsers support it, mainly old ones, I did not implement it into any of my projects.

I have made my own function that will only work if the function does not exist for that particular browser as to not overwrite an existing function. I wasn’t sure if the implementation I came up with was at all correct. Fortunately a JavaScript book I ordered turned up a couple of a hours later and confirmed that it was. There were a few lines that were slightly different but it still worked in the same way.

This has been tested in IE6+, Firefox 3.6.3, Safari 4, Opera 10 and Google Chrome and works fine.

Method

Below is my own version of the getElementsByClassName function. It is different from my first implementation to work the same way as the specification for document.getElementsByClassName introduced in Html5:

document.getElementsByClassName = function( classname ) {
	var elArray = [];
	var tmp = document.getElementsByTagName("*");
	var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
	for ( var i = 0; i < tmp.length; i++ ) {

		if ( regex.test(tmp[i].className) ) {
			elArray.push(tmp[i]);
		}
	}

	return elArray;
;

The way this code works by getting all the elements within the document using document.getElementsByTagName(“*”) function. The function then loops through each element to check if its class name is the one you specified. If it is then the element is added to an array which is returned once the function has finished looping through the elements.

Usage

To use it you would put the following within script tags. For the following to work you will need some elements with the class “para”, or you could change the class to look for. I used paragraph whilst testing it but it could be whatever you want:


window.onload = function(){

	if ( !document.getElementsByClassName ) {

		document.getElementsByClassName = function( classname ) {
			var elArray = [];

			var tmp = document.getElementsByTagName("*");

			var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
			for ( var i = 0; i < tmp.length; i++ ) {

				if ( regex.test(tmp[i].className) ) {
					elArray.push(tmp[i]);
				}
			}

			return elArray;

		};
	}

	var el = document.getElementsByClassName("para");

	for ( var i = 0; i < el.length; i++ ) {
		el[i].style.color = "red";
	}
};

The function is made to run on the window.onload function. I then check to see if the function already exists, so for newer browsers it will use its own, and for older browsers that won’t have this function it will use my created one. This is important as we don’t want to overwrite the function completely if it it already exists as it might run faster and/or work differently than the one I wrote.

In the example above I am looking for all elements on a page with the class “para” and storing it in an Array called “el”. I am then looping through each one and setting the text color of the element to red. Simple.

Hope this was a help for people developing for older browsers. Enjoy.