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>
然后显示效果是依次将li元素且class为topMenu的元素的innerHTML弹出来哦。
时间： 2024-08-05 05:22:55