document.getElementsByClassName使用方法

分类：Javascript| 发布：camnprbubuol| 查看：7076 | 发表时间：2013/6/27

document.getElementsByClassName 故名思议就是根据Class名获取元素集合。但是这个方法是新生的，我们也可以自己来实现它。原理如下：

document.getElementsByTagName这个函数是获取指定标签名的节点集，通常先使用getElementsByTagName("*")取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防错误。

01//三个参数都是必需的，查找一网页中5007个类名为“cell”的元素，IE8历时1828 ~ 1844毫秒，
02//IE6为4610 ~ 6109毫秒，FF3.5为46 ~ 48毫秒，opera10为31 ~ 32毫秒，Chrome为23~ 26毫秒，
03//safari4为19 ~ 20毫秒
04function getElementsByClassName(oElm, strTagName, strClassName){
05    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
06        oElm.getElementsByTagName(strTagName);
07    var arrReturnElements = new Array();
08    strClassName = strClassName.replace(/\-/g, "\\-");
09    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
10    var oElement;
11    for(var i=0; i < arrElements.length; i++){
12        oElement = arrElements[i];
13        if(oRegExp.test(oElement.className)){
14            arrReturnElements.push(oElement);
15        }
16    }
17    return (arrReturnElements)
18}