getElementsByClass
I’ve found a few good one’s out there. But none I was satisfied with. So with all due respect. I wrote my own:
getElementsByClass Function
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;
}How it works
It’s simple. It works just how you think getElementsByClass would work, except better.
- Supply a class name as a string.
- (optional) Supply a node. This can be obtained by getElementById, or simply by just throwing in “document” (it will be document if don’t supply a node)). It’s mainly useful if you know your parent and you don’t want to loop through the entire D.O.M.
- (optional) Limit your results by adding a tagName. Very useful when you’re toggling checkboxes and etcetera. You could just supply “input“. Or, if you’re like me, and you said Good Bye to IE5, you can use the “*” asterisk as a catch-all (meaning ‘any element).
See getElementsByClass() in action Have Fun!
August 12th, 2005 at 6:38 am
I haven’t tested this, but it looks like it might match partial class names - so if you specify “foo” it will match “foo” and “foobar”. Perhaps the regexp should have \b (backslash b) to indicate a word boundary? Of course you can always specify that in the searchClass parameter.
August 12th, 2005 at 8:44 am
I’ve yet to need such a function, but I have thought it would be nice to have one in the toolbox at least a couple times (found a workaround both times).
Have you ever used the getElementsBySelector()? It’s kinda like your function, but on major steroids. I first saw it referenced in an ALA article a year or so ago, looks pretty slick but again, I’ve never had the need for it.
August 12th, 2005 at 8:44 am
Hmm, my Firefox isn’t grokking that RegEx object.
Perhaps I’ll stick to one of these, for now.
August 12th, 2005 at 10:42 am
I wanted to present this function because I used it for endable/disabling input sets (Later Post).
This is just a quick way to reference any group of tags that you need without hassle.
August 12th, 2005 at 10:48 am
Patrick & Mike. You have solid points. It hadn’t occurred to me until now that it would match partials (which is what I wanted it to do in the beginning).
I originally had this:
if ( els[i].className == searchClass )but then that would crash foo == ‘foo bar’ (which, I would want to match.
Maybe I’ll add the \b word-boundary or just pull an indexOf() or split()
August 12th, 2005 at 11:59 am
That’s a handy function. I really don’t do a lot of javascript work but I had a friend help me write something similar the other day for a greasemonkey script. It loops through the mapping page on geocaching dot com removing all instances of disabled=”disabled” so you can zoom in and out on their maps without a premium membership. :) Looking forward to your post on enabling/disabling input sets to see how similar your function is to the one may friend and I wrote.
August 12th, 2005 at 12:38 pm
It’s a work in progress. I’m trying to make it as highly scalable as possible so that anyone can plug it into their page and be on their way. I’d also like to add the functionality of disabling children an optional parameter rather than hardcoded. Most likely a separate function you could call from the constructor.
August 12th, 2005 at 1:57 pm
I composed a similar code, with functions I found and modified a bit(not that much) the first from Oreilly Javascript book(don’t remember exact which one) and the second from the S5 slideshow javascript code.
/**
* Gets all the Elements by given Class
* Name
*
* @param string name Name of the css class
* to look for
* @param object node The node you want to
* start from,start at
* root if no one is
* specified
*
* @returns array Returns an array
* containing all the nodes
* given by the specified
* className
*/
function getElementsByClass(name,node){
var elements = new Array();
if(!node) node = document.body;
if (node.nodeType == 1 /*Node.ELEMENT_NODE*/){ // Check if n is an Element
var children = node.childNodes;
for(var i=0, n = children.length; i
August 15th, 2005 at 11:05 pm
Alrighty. I’ve made one final edit. I took Patrick’s advice and added the \b word boundary filter to the RegExp. Notice it needs to be passed into the object as a string literal so the backslash needs to be escaped as well. Hence the double backslash.
This seems to now be full proof for the most part and highly portable. There could namely be a few more exceptions that have to do with bad argument passing, but this assumes, for the most part, that the developer knows enough to get it working properly.
September 3rd, 2005 at 4:32 pm
I’m don’t do much JS, but I believe there’s a small typo in the code supplied above, which explains at least why it wouldn’t work on firefox (see comment #3 from Mike). The Regular Expression object is created with “RegEx”, though I believe it should be named “RegExp”. Which is the way the class is written on the example page.
Nice piece of work.
September 3rd, 2005 at 8:12 pm
Good catch joseph,
I went ahead and edited it appropriately.
September 14th, 2005 at 10:20 pm
LinkJax 1.0
Looking to hop on that AJAX bandwagon? Here’s an extremely simple, unobtrusive library that will get your pages AJAX’ed and rolling in less than 30 minutes….
October 3rd, 2005 at 7:29 pm
Y’know, it’s funny how we all end up doing something similar.
October 3rd, 2005 at 8:07 pm
Jonathan,
it’s because we’re the inovative one’s. ;)
The fact that we are all doing the same thing goes to show that we’re doing something right and thinking on the same level. Good job as well :D
October 6th, 2005 at 9:58 pm
Hey, this was exactly what I needed.
Except, I made one slight change: I ordered the arguments differently, so I can skip node and tag, if necessary.
function getElementsByClass(searchClass,tag,node)I figure I’m more likely to want to limit by tag, rather than by node, but I’m new to this.
Then I have a could of checks against undefined, and set them to reasonable defaults.
By the way, I use the same theme.
December 1st, 2005 at 9:24 am
Doesn’t handle multiple class names in the class string :( the Dojo implementation is a bit slow and this looked perfect, if it handled multiple classes. Excellent otherwise, very fast.
:)
w
December 1st, 2005 at 9:19 pm
Simply ingenius except for one thing… it only gives me lemons. Please take a look at my code to see what I may be doing wrong. It gives me errors on internet explorer 6.0 with Windows and Firefox 1.0 only ignores it. Here is my entire test page. Thank you so much for taking a few moments out of your long day to help out a beginner inspired by your brilliance.
TEST JAVASCRIPT
BODY {margin:30px; background:#000; color:#FFF; font-size:20px;}
.bold {font-weight:bold;} .lemon {color:#FF0;} .lemonade {color:#FFB;} .lime {color:#0F0;}
var i,ce,ceLen;
ce = getElementsByClass('document','lemon','DIV');
ceLen = ce.length;
for(i=0;i
1. Lemon text should change to lime.
2. Bold lemonade text should not change.
December 1st, 2005 at 9:30 pm
Jules,
Did you see the test page? This has surely been tested by many folks and I’ve used it in several places not only on my personal website, but in Y! code as well…so I know it works.
December 5th, 2005 at 7:46 am
for the hundredth-millionth time I ask….
Where/when/how/who do we submit these functions to so that they will someday become an official part of the standardized javascript stuff?
After all there’s an official getElementByID, getElementsByName(), getElementsByTagName…It’s moronic for there not to be a finalized and official getElementsByClass instead of everyone having to write their own and then find out it’s already been done by 300+ other people.
December 5th, 2005 at 11:09 am
maybe I’m using it wrong but this refuses to work for me.
Firefox if give off errors like
node has no properties
and
node.getElementsByTagName is not a function
very weird.
December 5th, 2005 at 11:29 am
think maybe you could shoot me an email on this?
I’ve given up on yours, it refues to work. I have no idea what I’m doing wrong.
this worked fine tho
function getElementsByClassName(node, classname)
{
var a = [];
var re = new RegExp(’(^| )’+classname+’( |$)’);
var els = node.getElementsByTagName(”*”);
for(var i=0,j=els.length; i
December 5th, 2005 at 11:51 am
hey there thinsoldier,
I updated the function above to make it so the 2nd and 3rd arguments are optional. But still, it should have worked. What browser are you using?
December 8th, 2005 at 5:30 pm
If this becomes a repeat post I’m sorry. I got a funky error page, so I wasn’t sure if my first post, (on your top ten list page) worked.
I can’t seem to get this to work. I’m only a very amateur Javascript user- I mainly use it to complement CSS to make my websites a little more interesting. I pasted the getElementsByClass function into my script.js file, but whenever I use it, Firefox tells me that the function is undefined. Pardon my stupidity, but how would one properly link this to say a onmouseover event handler? I can do that much for my own functions, but not with this. Also, can I use this like getElementsByClass(’class’).style.[...] to change styles for a whole class? I know that you can do that with Javascript altering CSS, but getElementsByClass would be more handy, since there’s the optional tag argument.
I apologize for my lack of basic knowledge, but this excites me so much that I want to know how to use it!
December 8th, 2005 at 6:07 pm
getElementsByClass returns an array. Thus the ‘Elements’ is what you’re collecting. So you can’t explicitely call a property straight off the array. You need to do the following:
var myEls = getElementsByClass('myClass');for ( i=0;i<myEls.length;i++ ) {
// do stuff here with myEls[i]
}
December 10th, 2005 at 8:43 pm
I’ll give it another try. Using firefox and IE btw.
December 28th, 2005 at 1:13 am
[...] On Road å„ç±»Linux/Unixçš„ä¸‹è½½åœ°å€ » getElementsByClass from function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( [...]
December 30th, 2005 at 2:23 am
[...] ción, que resulta de una generalización de la función getElementByClass que podemos encontrar en http://www.dustindiaz.com/getelementsbyclass/, nos permite llenar ese hueco con la ventaja adicional de que podemos utilizar atributos no definidos en [...]
December 30th, 2005 at 2:30 am
[...] ción, que resulta de una generalización de la función getElementByClass que podemos encontrar en http://www.dustindiaz.com/getelementsbyclass/, nos permite llenar ese hueco con la ventaja adicional de que podemos utilizar atributos no definidos en [...]
December 30th, 2005 at 2:33 am
[...] ción, que resulta de una generalización de la función getElementByClass que podemos encontrar en http://www.dustindiaz.com/getelementsbyclass/, nos permite llenar ese hueco con la ventaja adicional de que podemos utilizar atributos no definidos en [...]
December 31st, 2005 at 2:38 pm
[...] e Element object, even the getElementsByClassName prototype so you won’t need to use my own custom function for t [...]
March 1st, 2006 at 3:20 pm
[...] Alright, so I know what you’re thinking. Does that mean I can use Dustin’s getElementsByClass function and pass in the array which will, in return, assign listeners to the object collection? Indeed my dear beloved friends. Indeed. [...]
March 7th, 2006 at 10:58 pm
[...] Both Dustin and Jonathan have their respective versions of a getElementsByClassName function. [...]
May 1st, 2006 at 5:47 am
[...] Dustin Diaz’s getElementsByClass [...]
May 1st, 2006 at 10:19 am
[...] I’ve managed to do the first two, or rather Dustin Diaz managed to do the first bit. The problem is that I have five different class names that I want to have either the original colour or to be plain black. Thus, with five classes there is a lot of code if one want to do it the hard way, and I haven’t found the easy way yet. The second problem is that the changing back algorithm is not pretty — at all. Code overhead is a major issue here. [...]
August 24th, 2006 at 1:52 pm
[...] Without looking under the hood of any library that requires you to add a class name to your document to receive the super-cool functionality, it’s fairly obvious what needs to get done. Like any other getElementsByClassName function, you need to supply a class name, a tag name, and a root node. And to generalize things to a base level that gives the implementer the most amount of flexibility, you must start at the document root then crawl all the way to the bottom checking each and every node for a class name. To say the least… that’s bad. Client-side performance of the “add a class name” philosophy is reason-nuf (reason enough) to avoid implementing this style of widget-making. [...]
November 5th, 2006 at 6:23 pm
[...] Após, foi preciso apenas uma função para localizar a classe lang-eng e efetuar as alterações nas páginas em que ela foi instanciada. Utilizei como base o script getElementByClass do Dustin Diaz. A partir daí, otimizei o script para chegar ao resultado que gostaria. [...]
November 16th, 2006 at 1:47 am
[...] All of the sort order input boxes on the Netflix Queue page has a class of “o”. The first for loop at line 6 goes through all of the input elements in the HTML, checks for className=”o” and stores all of those elements in an array. This is pretty the same as doing var q = document.getElementsByClass(”o”). [...]
November 23rd, 2006 at 6:41 am
[...] Esta função já é bem comum e é encontrada nas mais variadas bibliotecas de JavaScript com diversas implementações. Aprecio as versões de vários autores como a do Robert Nyman e a do Dustin Diaz, porém prefiro utilizar uma que desenvolvi de acordo com as necessidades que foram surgindo. Além do mais ela está num formato bem simples e didático [...]
March 8th, 2007 at 2:00 am
[...] Dustin Diaz’s getElementsByClass [...]
March 9th, 2007 at 5:44 am
[...] Dustin Diaz’s getElementByClass [url] [...]
March 20th, 2007 at 8:53 am
[...] Dustin Diaz’s getElementsByClass [...]
April 7th, 2007 at 10:57 am
[...] There are many versions of this, but I always use the one by Dustin Diaz. Here is the link to his original article [...]