JS中兼容各浏览器通过ClassName获取元素

最新推荐文章于 2021-01-27 03:25:30 发布

a3p9j2327

最新推荐文章于 2021-01-27 03:25:30 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/newObj/p/8916706.html

版权

核心代码

 
    function getByClass(sClass,oParent){ 
//考虑到会有从某个父元素中获取 有className名的元素 的情况（如下示例'aaa'）；
//所以传入第二个参数为父元素，先做一个判断，不传参数的话默认为document是更为常用的情况
        var  Parent = oParent || document;
//先获取所有的子元素
        var oEle = Parent.getElementsByTagName('*'); 
//声明一个空数组用来存放获取到的元素 
        var newArr=[];
//如果是常规浏览器，document.getelementsByClassName方法为true，则直接使用
        if(Parent.getElementsByClassName){
            return Parent.getElementsByClassName(sClass);
//没有这种方法的话，则需要拿到所有的子元素，再做判断
        }else{  
//遍历所有的子元素，得到所有的className；
            for(var i=0;i<oEle.length;i++){
//将得到的 className 用数组保存
                var cn =  oEle[i].className;
                var arr = cn.split(" ");
//遍历得到的className，做判断
//需要注意的是，避免使用indexOf方法，原因：比如取test1，含有testtest1这个类名的元素也将被取到

//将含有className的元素放入新数组
                for(var j=0;j<arr.length;j++){
                    if(arr[j] == sClass){ 
                        newArr.push(oEle[i]); 
                        break; 
                    }  
                }   
            }
                return newArr;
        }
    } 
 
   
 

测试如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="aaa">
11         <div class="bbb">
12 
13         </div>
14     </div>
15     <div class="bbb">
16 
17     </div>
18     <div class="bbb">
19 
20     </div>
21     <script>
22 
23 function getByClass(sClass,oParent){
24 
25  　　　　var Parent = oParent || document;
26 
27  　　　　var oEle = Parent.getElementsByTagName('*');
28 
29  　　　　var newArr=[];
30 
31 　　　　 if(Parent.getElementsByClassName){
32 
33 　　　　　　 return Parent.getElementsByClassName(sClass);
34 
35 　　　　 }else{
36  
37 　　　　　　for(var i=0;i<oEle.length;i++){
38 
39 　　　　　　　　 var cn = oEle[i].className;
40 
41 　　　　　　　　 var arr = cn.split(" ");
42 
43                 　　for(var j=0;j<arr.length;j++){
44 
45                     　　if(arr[j] == sClass){
46  
47                         　　newArr.push(oEle[i]);
48  
49                         　　break; 
50 
51                     　　}  
52                 　　}   
53             }
54                 return newArr;
55         }
56     } 
57 
58 //获取ID为'aaa'的div中class为'bbb'的元素
59 var a = document.getElementById('aaa');
60 var cd = getByClass('bbb',a);
61 console.log(cd);//Array[div.bbb]
62     </script>
63 
64 </body>
65 </html>

总结：考虑到有从父元素直接获取子元素的情况，所以把document修改成了父元素，并且不传参数的话父元素默认为document

　　　在获取className的元素的时候，会有两个class名的情况，这时候之前的代码就会出现不适用的情况，所以做出修改，即再加一层判断（详见注释处）

转载于:https://www.cnblogs.com/newObj/p/8916706.html

a3p9j2327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中兼容各浏览器通过ClassName获取元素

核心代码function getByClass(sClass,oParent){ //考虑到会有从某个父元素中获取有className名的元素的情况（如下示例'aaa'）；//所以传入第二个参数为父元素，先做一个判断，不传参数的话默认为document是更为常用的情况 var Parent = oParent || document;//先获取所有...
复制链接

扫一扫