在文档中搜索带有样式名称的元素？

Question

Is there a way to search the DOM for an element with a particular stylename class? Something like:

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

if so, will this be extremely slow if my page has like 2000 elements in it or so?

Thanks

Answer 1

Well, jQuery has a class selector:

$('.foo')

You can look there for an implementation.

Firefox supports a native getElementsByClassName() AFAIK.

Answer 2

If the browser does not support the native method you can sift through every tag and look for the class names. This version allows you to specify a parent to search from and more than one class can be matched. It returns an array of nodes in either case, 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 have support for the native method, and versions of IE below 8, as well as some other older browsers, will fall back to the sifting method. You can add a quicker method than the sifter to 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 3

Many Ajax libraries provide this. For example YUI provides method

YAHOO.util.Element.getElementsByClassName (class )

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

I use it a lot and don't find any major slowdowns.

Answer 4

jQuery is free lightweight cross-browser script library.

It has tons of cool features and selecting all elements with a class name is as easy as

$('.foo');

Moreover, it comes with plenty of free plug-ins that will make your development job so easier.

For example, following code does exactly what it reads:

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

ie all p tags with neat class applied, add a new class ohmy and make it visible with slow animation. Cool eh?

Answer 5

You can use SizzleJs , this is also whats used inside jQuery.

var elements = Sizzle(".foo");

Answer 6

Alas, JavaScript doesn't natively include a function to do just that**. Most JavaScript libraries do offer a simple way to select elements by class, but they each have their own pros and cons.

If you don't want to use a JavaScript library (Which is fine; there are great reasons for not using additional libraries.), you could 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've assumed that each element with the desired class has the same tag. If necessary, you could do document.getElementsByTagName("*") to select all tags, but that would probably take longer for the browser to process.

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