首页 > 代码库 > getByClass--获取指定标签且class为指定的所有元素
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>
然后显示效果是依次将li元素且class为topMenu的元素的innerHTML弹出来哦。
getByClass--获取指定标签且class为指定的所有元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。