通过className获取元素的方法 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>通过className获取元素的方法</title>
 6         <style type="text/css">
 7             #box1{
 8                 display: flex;
 9                 width: 200px;
10                 height: 200px;
11                 border: 1px red solid;
12                 flex-flow: row wrap;
13                 justify-content: space-between;
14                 align-items: center;
15             }
16             div[class ^= item]{
17                 width: 50px;
18                 height: 50px;
19                 border: 1px green solid;
20             }
21         </style>
22         <script type="text/javascript">
23             window.onload = function(){
24                 //思路：
25                 /*
26                  * 1、先获取元素集合--->通过要获取元素的tagName找到元素集合
27                  * 2、将每个元素的className分割为数组，并遍历该数组
28                  * 3、判断className数组中是否含有对应的要查找的className，并把找的的元素存到另一个数组中
29                  * 4、返回这个数组。
30                  * 
31                  */
32                 var oDiv = document.getElementById('box1');
33                 
34                 console.log(getElementByClassName(document,'div','item2'));
35                 
36                 function getElementByClassName(parentEle,tagName,_className){
37                     var aEles = parentEle.getElementsByTagName(tagName);
38                     var aClassName = [];
39                     var arr = [];//存放找到的元素
40                     for(var i = 0; i < aEles.length; i++){
41                         aClassName = aEles[i].className.split(' ');
42                         for(var j = 0; j<aClassName.length; j++){
43                             if(aClassName[j] == _className){
44                                 arr.push(aEles[i]);
45                                 break;
46                             }
47                         }
48                     }
49                     return arr;
50                 }
51             };
52         </script>
53     </head>
54     <body>
55         <div id="box1" class="item">
56             <div class="item1">
57                 
58             </div>
59             <div class="item2">
60                 
61             </div>
62             <div class="item2">
63                 
64             </div>
65             <div class="item3 item4">
66                 
67             </div>
68         </div>
69     </body>
70 </html>

 

posted @ 2017-04-16 08:45  寒雨落轩  阅读(451)  评论(0)    收藏  举报