Where is getElementsByClassName()?

Posted by Chris
January 14, 2007

Since one of the goals of this blog is to show you how we resolved some of the issues we encounter when writing modern Web applications, allow me to repost this short article that I originall posted at goodjavascript.com

It’s an extremely common problem: you want to retrieve all the “special” links embedded in your web page. Or all the text areas with a certain style.
You looked at someone else’s code and found that they use the method getElementsByClassName() profusely.
However, when you tried, there was no such method.

Confused?
Here is the skinny on this method: it does not exist. Everybody has to code their own. And most of the time, it is poorly coded and will catch
unrelated classes in the process.

So, here is my implementation, which I kept as short as possible and yet, it is reliable:

?View Code JAVASCRIPT
      document.getElementsByClassName = function(className)
      {
              var expression = new RegExp('(^| )'+className+'( |$)');
              var allelements = document.body.getElementsByTagName('*');
              var elements = [];
              for(var i=0; ilength; i++)
              {
                      var element = allelements[i];
                      if(expression.test(element.className))
                      {
                              elements.push(element);
                      }
              }
              return elements;
      };

A quick explanation:

var expression = new RegExp(’(^| )’+className+’( |$)’);
We create a regular expression that can find the class name we are looking for anywhere in a string. Note that the DOM class attribute can contain a blank space-separated-list of class names.

var allelements = document.body.getElementsByTagName(’*');
We retrieve all the elements in the current page.
We could replace document.body with an existing DOM element and only perform a search on a subtree of our page.

if(expression.test(element.className))
Use the regular expression we created earlier to find whether an element uses this class name.

Similar Posts:

If you enjoyed this post, make sure you subscribe to my RSS feed!

Javascript

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments
Comment by Champ
May 16, 2007 @ 7:21 am

Actually getElementsByClassName() does exist! It’s part of the Web Apps 1.0 Spec. http://www.whatwg.org/specs/web-apps/current-work/

Unfortunately the only browser that currently supports it is Firefox Beta 3. Nevertheless, it should be tested for in your script for future compatibility.

Comment by admin
July 22, 2007 @ 2:16 am

I shall absolutely test for it, then. Thanks for the information.
I guess we can only hope for Microsoft to follow suit now.

Comment by SneakyWho_am_i
November 16, 2008 @ 6:57 am

Fortunately a lot of other people have written equivalent functions for the browsers yet to support this (IE6, IE7, IE8…) and old versions of proper browsers (Firefox, Opera, Safari). I say it’s fortunate because Firefox (for example) can do it in XPath, which is something like a gazillion times faster than doing it your way :P – no offense intended there.

Of course the main thing is to have this lifesaving function working, and a few picoseconds here and there probably don’t matter at all. I know that premature optimizations are bad, and the faster you make this the bigger it gets.

Still, worth googling at the moment to see how others have approached it! If you haven’t played with XPath yet I recommend trying it out – it is a lot of fun :)

Leave a comment

(required)

(required)