getByClass--获取指定标签且class为指定的所有元素

ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。

平时我们在工作中的时候，经常需要获取指定某个标签下的具有某个class的所有元素。

通过下面这种方法能很快的将这些元素获取到。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>getByClass--获取指定标签且class为指定的所有元素</title>
 6 <script>
 7 function getClass(tagName,sClass){
 8   if(document.getElementsByClassName) //支持这个函数
 9   {
10       return document.getElementsByClassName(sClass);  
11   }
12   else{
13       var tags = document.getElementsByTagName(tagName); //获取标签
14       var tagArr = []; //定义一个空数组，用于返回类名为sClass的元素。
15       for(var i=0;i<tags.length;i++){
16          if(tags[i].className == sClass){
17             tagArr[tagArr.length] = tags[i];  //保存满足条件的元素     
18          }  
19       }
20       return tagArr;
21   }    
22 }
23 window.onload = function(){
24    var topMenus = getClass('li','topMenu');
25    for(var i=0;i<topMenus.length;i++){
26       alert(topMenus[i].innerHTML);
27    }    
28 }
29 </script>
30 </head>
31 
32 <body>
33 <ul id="nav">
34 <li class="topMenu"><a href="#">产品介绍</a>
35     <ul class="subMenu">
36         <li><a href="#">产品1</a></li>
37         <li><a href="#">产品2</a></li>
38         <li><a href="#">产品3</a></li>
39         <li><a href="#">产品4</a></li>
40         <li><a href="#">产品5</a></li>
41         <li><a href="#">产品6</a></li>
42     </ul>
43 </li>
44 <li class="topMenu"><a href="#">服务介绍</a>
45     <ul class="subMenu">
46         <li><a href="#">服务1</a></li>
47         <li><a href="#">服务2</a></li>
48         <li><a href="#">服务3</a></li>
49         <li><a href="#">服务4</a></li>        
50     </ul>
51 </li>
52 <li class="topMenu"><a href="#">成功案例</a>
53     <ul class="subMenu">
54         <li><a href="#">案例1</a></li>
55         <li><a href="#">案例2</a></li>
56         <li><a href="#">案例3</a></li>
57         <li><a href="#">案例4</a></li>
58     </ul>
59 </li>
60 <li class="topMenu"><a href="#">关于我们</a>
61     <ul class="subMenu">
62         <li><a href="#">我们1</a></li>
63         <li><a href="#">我们2</a></li>
64         <li><a href="#">我们3</a></li>
65         <li><a href="#">我们4</a></li>
66     </ul>
67 </li>
68 <li class="topMenu"><a href="#">联系我们</a>
69     <ul class="subMenu">
70         <li><a href="#">联系1</a></li>
71         <li><a href="#">联系2</a></li>
72         <li><a href="#">联系3</a></li>
73         <li><a href="#">联系4</a></li>
74         <li><a href="#">联系5</a></li>
75         <li><a href="#">联系6</a></li>
76         <li><a href="#">联系7</a></li>
77     </ul>
78 </li>
79 </ul>
80 </body>
81 </html>

把js单独写出来就是：

 1 function getClass(tagName,sClass){
 2  8   if(document.getElementsByClassName) //支持这个函数
 3  9   {
 4 10       return document.getElementsByClassName(sClass);  
 5 11   }
 6 12   else{
 7 13       var tags = document.getElementsByTagName(tagName); //获取标签
 8 14       var tagArr = []; //定义一个空数组，用于返回类名为sClass的元素。
 9 15       for(var i=0;i<tags.length;i++){
10 16          if(tags[i].className == sClass){
11 17             tagArr[tagArr.length] = tags[i];  //保存满足条件的元素     
12 18          }  
13 19       }
14 20       return tagArr;
15 21   }    
16 22 }
17 23 window.onload = function(){
18 24    var topMenus = getClass('li','topMenu');
19 25    for(var i=0;i<topMenus.length;i++){
20 26       alert(topMenus[i].innerHTML);
21 27    }    
22 28 }

然后显示效果是依次将li元素且class为topMenu的元素的innerHTML弹出来哦。

当只有一个参数时候思路也是同理的。只不过要获取所有的标签。要用到通用符*

 1 function getElementsByClassName(n) { 
 2 var classElements = [],allElements = document.getElementsByTagName('*'); 
 3 for (var i=0; i< allElements.length; i++ ) 
 4 { 
 5 if (allElements[i].className == n ) { 
 6 classElements[classElements.length] = allElements[i]; 
 7 } 
 8 } 
 9 return classElements; 
10 }
11 var redClassElements = getElementsByClassName('aa'); 
12 for (var i=0; i<redClassElements.length; i++) { 
13       //要做的内容比如
14    alert(redClassElements[i].innerHTML);
15 }