Top 10 Custom JavaScript Functions Of All Time

By Dustin Diaz
2006-08-22


8) getElementsByClass()

Originially written by nobody in particular. Several developers have implemented their own version and no one single version has proven to be better than another. As you might expect, my humble self has even had a crack at it. This function was spawned from developers needing a quick and elegant way of grabbing elements by a className and to a developer’s surprise, it’s not an original DOM method as one might think…afterall, we have getElementById, getElementsByName(), getElementsByTagName, what the hell happened to getElementsByClass??? Here it is in all its glory:

getElementsByClass by Dustin Diaz

function getElementsByClass(searchClass,node,tag) {

	var classElements = new Array();

	if ( node == null )

		node = document;

	if ( tag == null )

		tag = '*';

	var els = node.getElementsByTagName(tag);

	var elsLen = els.length;

	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');

	for (i = 0, j = 0; i < elsLen; i++) {

		if ( pattern.test(els[i].className) ) {

			classElements[j] = els[i];

			j++;

		}

	}

	return classElements;

}

Simply add a class name to the beginning of the funciton and the 2nd and 3rd arguments are optional and the magic is done for you!

Tutorial Pages:
» Top 10 custom JavaScript functions of all time
» 10) addEvent()
» 9) addLoadEvent()
» 8) getElementsByClass()
» 7) cssQuery()
» 6) toggle()
» 5) insertAfter()
» 4) inArray()
» 3, 2, & 1) getCookie(), setCookie(), deleteCookie()
» Last but not least, a bonus function: The Prototype Dollar Function
» And so will they all…

Related Tutorials: » JavaScript Debugging Techniques with Firebug » Striped Tables Using JavaScript » Opening PDFs in a New Window with JavaScript » Essential Javascript -- A Javascript Tutorial » Submit Forms Conditionally using JavaScript » How to Setup a Randomising Function