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 }