Looking for a document for an element with a style name?

Question

Is there a way to find the DOM for an element with a specific style class? Sort of:

var node = document.findByClassName("foo"); 

if so, will it be very slow if my page has about 2000 elements in it?

thanks

Answer 1

If the browser does not support its own method, you can sift through each tag and look for class names. This version allows you to specify the parent to search, and more than one class can be mapped. It returns an array of nodes anyway, not a live nodelist.

 function getbyClass(classes, pa){ pa= pa && pa.nodeType== 1? pa: document; // native support: if(pa.getElementsByClassName){ var A= [], N= pa.getElementsByClassName(classes); for(var i= 0, L= N.length; i<L; i++){ A[i]= N[i]; } return A; } // no native support: var elems= [], c= classes.split(/ +/), L= c.length, tem, temc, tags= pa.getElementsByTagName('*'), max= tags.length; for(var i= 0, L= c.length; i< L; i++){ c[i]= RegExp('\\b'+c[i]+'\\b'); } getbyClassloop: while(max){ i= L; tem= tags[--max]; temc= tem.className; if(temc){ while(i){ if(!c[--i].test(temc)) continue getbyClassloop; } elems[elems.length]= tem; } } return elems; } 

// use -

 getbyClass('classname') // searches document for elements with classname getbyClass('classname1 classname2') // searches document for elements with both classes getbyClass('classname1 classname2',containingelement) // searches only containingelement and descendents 

/ * IE9 will support its own method, and versions of IE below 8, as well as some other older browsers, will return to the screening method. You can add a faster method than a filter in IE8. * /

 (function(){ if(!document.getElementsByClassName && document.attachEvent){ try{ if(document.querySelectorAll){ var IE8class= function(classes){ var C= classes.split(' '), tem, els= Array.from(this.querySelectorAll('.'+ C.shift())); while(C.length && els.length){ tem= C.shift(); els= els.testEach(function(itm){ return itm.className.indexOf(tem)!= -1; }); } return els; } HTMLDocument.prototype.getElementsByClassName= IE8class; Element.prototype.getElementsByClassName= IE8class; return true; } } catch(er){ return false }; } })() 

Answer 2

Well, jQuery has a class selector:

 $('.foo') 

You can look there for implementation.

Firefox supports the native getElementsByClassName() AFAIK.

Answer 3

Many Ajax libraries provide this. For example, YUI provides a method

YAHOO.util.Element.getElementsByClassName (class )

more information can be found here http://developer.yahoo.com/yui/docs/YAHOO.util.Element.html

I use it a lot and do not see any serious slowdowns.

Answer 4

jQuery is a free cross-browser script library.

It has a ton of interesting features and selecting all elements with a class name is as simple as

 $('.foo'); 

In addition, it comes with many free plugins to make your development work easier.

For example, the following code does exactly what it reads:

 $("p.neat").addClass("ohmy").show("slow"); 

i.e. all p tags using pure style, add a new ohmy class and make it visible with slow animation. Cool eh?

Answer 5

You can use SizzleJs , it is also used inside jQuery.

var elements = Sizzle (". foo");

Answer 6

Alas, JavaScript does not contain a function that does just that **. Most JavaScript libraries offer an easy way to select items by class, but each one has its pros and cons.

If you do not want to use the JavaScript library (this is normal, there are great reasons not to use additional libraries.), You can do something like this:

 elems = document.getElementsByTagName("h2"); for ( i=0; i<elems.length; i++ ) { if ( elems[i].className == "myAwesomeClass" ) { // Do whatever stuff needs to happen to the class elems[i].style.color="red"; } } 

In the above code, I assumed that each element with the desired class has the same tag. If necessary, you can do document.getElementsByTagName ("*") to select all the tags, but the browser will probably take longer.

** Bugfix / Clarification: Most recent browsers support document.getElementsByClassName. IE8 no. ( http://www.quirksmode.org/dom/w3c_core.html#t11 )