JavaScript中document.getElementsByClassName()方法的使用详解

作者:佚名     字体:[增加 减小]    类型:转载
HTML元素的class属性值是一个以空格隔开的列表,可以为空或包含多个标识符。在JavaScript中我们可以使用方法document.getElementsByClassName()通过CSS类选取元素。

HTML元素的class属性值是一个以空格隔开的列表,可以为空或包含多个标识符。它描述一种方法来定义多组相关的文档元素:在它们的class属性中有相同标识符的任何元素属于该组的一部分。在JavaScript中class是保留字,所以客户端JavaScript使用className属性来保存HTML的class属性值。class属性通常与CSS样式一起使用,对某组内的所有元素应用相同的样式。尽管如此,HTML定义了getElementsByClassName()方法,它基于其class属性中的标识符来选取组的文档元素。

类似getElementsByTagName()(如果对此方法不熟悉,请查看本站原创文章《JavaScript中document.getElementsByTagName()方法的使用详解》),在HTML文档和HTML元素上都可以调用getElementsByClassName(),它的返回值是一个实时的NodeList对象,包含文档或元素所有匹配的后代节点。document.getElementsByClassName()只需要一个字符串参数,但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配,但是标识符的顺序是无关紧要的。注意,class属性和getElementsByClassName()方法的类标识符之间都是用空格隔开的,而不是逗号。

//查找其class属性值中包含“warning”的所有元素
var aWarning = document.getElementsByClassName('warning');
//查找以“log”命名并且有“error”和“fatal”类的元素的所有后代
var log = document.getElementById('log').getElementsByClassName('fatal error');

如今的Web浏览器依赖于文档开头处对<!DOCTYPE>声明的严格程度来选择“怪异模式”或“标准模式”方式显示HTML文档。怪异模式是为了向后兼容性而存在的,其中一个怪异行为就是在class属性中CSS样式表中类标识符不区分大小写。getElementsByClassName()方法使用样式表的匹配算法。如果文档以怪异模式渲染,该方法将执行大小写的字符串比较;否则,该比较区分大小写

在写作本文时,除了IE8及其较低的版本,getElementsByClassName()在所有当前的浏览器中都实现了。如果不支持getElementsByClassName()方法,我们可以自己写一个方法,或者使用querySelectorAll()方法,或者使用jQuery的选择器。

下面是自定义的一个getElementsByClassName

var getElementsByClassName = function(searchClass, node, tag) { 
    if (document.getElementsByClassName) { 
        return document.getElementsByClassName(searchClass) 
    } else { 
        node = node || document; 
        tag = tag || "*"; 
        var classes = searchClass.split(" "), 
        elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag), 
        patterns = [], 
        returnElements = [], 
        current, 
        match; 
        var i = classes.length; 
        while (--i >= 0) { 
            patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)")); 
        } 
        var j = elements.length; 
        while (--j >= 0) { 
            current = elements[j]; 
            match = false; 
            for (var k = 0, kl = patterns.length; k < kl; k++) { 
                match = patterns[k].test(current.className); 
                if (!match) break; 
            } 
            if (match) returnElements.push(current); 
        } 
        return returnElements; 
    } 
}