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

57 阅读 0 评论 38 点赞

我是靠谱客的博主成就楼房，最近开发中收集的这篇文章主要介绍JavaScript通过Class Name获取一个对象的数组，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

 1 <script type="text/javascript">
 2 /*
 3 * 根据元素clsssName得到元素集合
 4 * @param fatherId 父元素的ID，默认为document
 5 * @tagName 子元素的标签名
 6 * @className 用空格分开的className字符串
 7 */
 8 function getElementsByClassName(fatherId,tagName,className){
 9 　　node = fatherId&&document.getElementById(fatherId) || document;
10 　　tagName = tagName || "*";
11 　　className = className.split(" ");
12 　　var classNameLength = className.length;
13 　　for(var i=0,j=classNameLength;i<j;i++){
14 　　//创建匹配类名的正则
15 　　　　className[i]= new RegExp("(^|\s)" + className[i].replace(/-/g, "\-") + "(\s|$)");
16 　　}
17 　　var elements = node.getElementsByTagName(tagName);
18 　　var result = [];
19 　　for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性
20 　　　　var element = elements[i];
21 　　　　while(className[k++].test(element.className)){//优化循环
22 　　　　　　if(k === classNameLength){
23 　　　　　　　　result[result.length] = element;
24 　　　　　　　　break;
25 　　　　　　}
26 　　　　}
27 　　　　k = 0;
28 　　}
29 　　return result;
30 }
31 </script>

测试一

 1 <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>
 6 <script type="text/javascript">
 7 　　window.onload = function(){
 8 　　　　alert(getElementsByClassName(document,"div","aaa ccc").length);//2
 9 　　　　alert(getElementsByClassName("container","div","aaa ccc").length);//1
10 　　　　alert(getElementsByClassName("container","span","aaa zzz").length);//1
11 　　}
12 </script>

测试二

1 <script type="text/javascript">
2 　　window.onload = function(){
3 　　　　var e=getElementsByClassName(document,"div","c_ad_block");
4 　　　　if(e){if(typeof(e.length)=='undefined'){e.parentNode.removeChild(e);}else{for(var i=0;i<e.length;i++){e[i].parentNode.removeChild(e[i]);}}}
5 　　}
6 </script>