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>转载于:https://www.cnblogs.com/zymah/archive/2012/06/11/2545248.html
