js通过Class Name获取一个对象的数组

来源：互联网发布：淘宝查假冒伪劣处罚编辑：程序博客网时间：2024/05/16 15:58

DOM 提供了一个名为 getElementById() 的方法，这个方法将返回一个对象，这个对象就是参数 id 所对应的元素节点。另外，getElementByTagName() 方法会返回一个对象的数组，每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题，能不能通过标签的类名class name来获取该对象呢？下面是这个猜想的程序实现（支持多个class查询和在某个范围内进行查询）：

/*

02 * 根据元素clsssName得到元素集合

03 * @param fatherId 父元素的ID，默认为document

04 * @tagName 子元素的标签名

05 * @className 用空格分开的className字符串

06 */

07function getElementsByClassName(fatherId,tagName,className){

08    node = fatherId&&document.getElementById(fatherId) || document;

09    tagName = tagName || "*";

10    className = className.split(" ");

11    var classNameLength = className.length;

12    for(var i=0,j=classNameLength;i<j;i++){

13        //创建匹配类名的正则

14        className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");

15    }

16    var elements = node.getElementsByTagName(tagName);

17    var result = [];

18    for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性

19        var element = elements[i];

20        while(className[k++].test(element.className)){//优化循环

21            if(k === classNameLength){

22                result[result.length] = element;

23                break;

24            }  

25        }

26        k = 0;

27    }

28    return result;

29}

测试

<div id="container">
2    <span class="aaa zzz ccc"></span>
3    <div class="aaa bbb ccc"></div>
4</div>
5<div class="aaa bbb ccc"></div>

1window.onload = function(){
2    alert(getElementsByClassName(document,"div","aaa ccc").length);//2
3    alert(getElementsByClassName("container","div","aaa ccc").length);//1
4    alert(getElementsByClassName("container","span","aaa zzz").length);//1
5}