Question

有没有办法在DOM中搜索具有特定stylename类的元素？类似的东西：

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

如果是这样的话，如果我的页面中有2000个元素，这会非常慢吗？

由于

Answer 1

好吧，jQuery有一个类选择器：

$('.foo')

你可以在那里寻找实现。

Firefox支持原生getElementsByClassName() AFAIK。

Answer 2

如果浏览器不支持本机方法，您可以筛选每个标记并查找类名。此版本允许您指定要搜索的父级，并且可以匹配多个类。它会返回一个节点数组，而不是“实时”节点列表。

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;
}

//使用 -

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将支持本机方法，以及低于8的IE版本，以及其他一些旧版浏览器，将回归筛选方法。您可以向IE8添加比sifter更快的方法。 * /

(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

许多Ajax库都提供此功能。例如，YUI提供方法

YAHOO.util.Element.getElementsByClassName (class )

可在此处找到更多详细信息http://developer.yahoo.com/yui/docs/YAHOO.util.Element.html

我经常使用它，并没有发现任何重大减速。

Answer 4

jQuery是免费的轻量级跨浏览器脚本库。

它有很多很酷的功能，选择所有带有类名的元素就像

一样简单

$('.foo');

此外，它还附带了大量免费插件，可以让您的开发工作变得更加轻松。

例如，下面的代码完全符合它的内容：

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

即。应用了整齐的类的所有p标签，添加一个新的类ohmy并使用慢动画使其可见。酷呃？

Answer 5

您可以使用SizzleJs，这也是jQuery中使用的内容。

var elements = Sizzle（“。foo”）;

Answer 6

唉，JavaScript本身并没有包含这样做的功能**。大多数JavaScript库确实提供了一种按类选择元素的简单方法，但它们各有各的优缺点。

如果您不想使用JavaScript库（这很好;有很多理由不使用其他库。），您可以这样做：

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"; 
     }
}

在上面的代码中，我假设每个具有所需类的元素具有相同的标记。如有必要，您可以使用document.getElementsByTagName（“*”）来选择所有标签，但浏览器可能需要更长时间才能处理。

**更正/澄清：最新的浏览器支持document.getElementsByClassName。 IE8没有。（http://www.quirksmode.org/dom/w3c_core.html#t11）

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

6 个答案: