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

180 阅读 0 评论 119 点赞

我是靠谱客的博主苹果豌豆，这篇文章主要介绍js通过Class Name获取一个对象的数组，现在分享给大家，希望可以做个参考。

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

/*

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

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

 04  * @tagName 子元素的标签名

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

 06  */

 07 function 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">

    <span class="aaa zzz ccc"></span>

    <div class="aaa bbb ccc"></div>

</div>

<div class="aaa bbb ccc"></div>

window.onload = function(){

    alert(getElementsByClassName(document,"div","aaa ccc").length);//2

    alert(getElementsByClassName("container","div","aaa ccc").length);//1

    alert(getElementsByClassName("container","span","aaa zzz").length);//1

}