javascript学习之通过class获取元素

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>通过class获取元素</title>
 6     <style type="text/css">
 7     ul li{ list-style: none; height: 20px; padding: 10px;line-height: 20px;}
 8     ul li.red{ background: #999;}
 9     </style>
10     <script type="text/javascript">
11     /*
12     //第一种
13     function getByClass(obj,attr){
14         var aEle = obj.getElementsByTagName('*');
15         var arr = [];
16         for(var i=0;i<aEle.length;i++){
17             if(aEle[i].className == attr){
18                 arr.push(aEle[i]);
19             }
20         }
21         return arr;
22     }*/
23     /*
24     //第二种
25     function getByClass(obj,sClass){
26         var aEle = obj.getElementsByTagName("*");
27         var aRes = [];
28         for(var i=0;i<aEle.length;i++){
29             if(aEle[i].className.indexOf(sClass) != -1){
30                 aRes.push(aEle[i]);
31             }
32         }
33         return aRes;
34     }*/
35     function findAttr(obj,sClass){
36         for(var i=0;i<obj.length;i++){
37             if(obj[i] == sClass) return true;
38         }
39         return false;
40     }
41     function getByClass(obj,sClass){
42         if(obj.getElementsByClass){//这个getElementsByClass不兼容Ie8以下的，
43             var aEle = obj.getElementsByClass(sClass);
44             return aEle;
45         }else{
46             var aEle = obj.getElementsByTagName("*");
47             var aRes = [];
48             for(var i=0;i<aEle.length;i++){
49                 var aTmp = aEle[i].className.split(' ');
50                 if(findAttr(aTmp,sClass)){
51                     aRes.push(aEle[i]);
52                 }
53             }
54             return aRes;
55         }
56     }
57     window.onload = function(){
58         var oDiv = document.getElementById("div1");
59         var oUl = getByClass(oDiv,'ul1');
60         var aLi = getByClass(oUl[0],'red');
61         alert(aLi.length);
62     }
63     </script>
64 </head>
65 <div id="div1">
66     <ul class="ul1">
67         <li class="red">11111</li>
68         <li>22222</li>
69         <li class="red blue">3333</li>
70         <li>55555</li>
71         <li class="red">5555</li>
72         <li>6666</li>
73     </ul>
74 </div>
75 </html>

View Code

javascript不像Jquery那样可以很容易的获取元素，今天写了一个小方法Javascript通过class获取元素

1.用'=='来判断，这个判断如果class有多个会获取不到

2.用indexOf来判断，这个判断如果class有包含你要的找的class也会获取到，如：你要找class='test',但是有一个class='tests'也会被获取到

3.这个不会出错