getElementsByClassName实现-阿里云开发者社区

getElementsByClassName实现

2017-05-31 1177

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

先来看一下代码：（支持多个class查询和在某个范围内进行查询）

 
       01 
       /* 
      
       02 
         * 根据元素clsssName得到元素集合  
      
       03 
         * @param fatherId 父元素的ID，默认为document  
      
       04 
         * @tagName 子元素的标签名  
      
       05 
         * @className 用空格分开的className字符串  
      
       06 
         */  
      
       07 
        function getElementsByClassName(fatherId,tagName,className){  
      
       08 
            var node = fatherId&&document.getElementById(fatherId) || document;  
      
       09 
            tagName = tagName || "*";  
      
       10 
            className = className.split(" ");  
      
       11 
            var classNameLength = className.length;  
      
       12 
            for(var i=0,j=classNameLength;i<j;i++){  
      
       13 
                //创建匹配类名的正则  
      
       14 
                className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");  
      
       15 
            }  
      
       16 
            var elements = node.getElementsByTagName(tagName);  
      
       17 
            var result = [];  
      
       18 
            for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性  
      
       19 
                var element = elements[i];  
      
       20 
                while(className[k++].test(element.className)){//优化循环  
      
       21 
                    if(k === classNameLength){  
      
       22 
                        result[result.length] = element;  
      
       23 
                        break;  
      
       24 
                    }    
      
       25 
                }  
      
       26 
                k = 0;  
      
       27 
            }  
      
       28 
            return result;  
      
       29 
       }

好，我们来测试一下：

 
       1 
        <div id="container">  
      
       2 
            <span class="aaa zzz ccc"></span>  
      
       3 
            <div class="aaa bbb ccc"></div>  
      
       4 
       </div> 
      
       5 
        <div class="aaa bbb ccc"></div>

 
       1 
        window.onload = function(){  
      
       2 
            alert(getElementsByClassName(document,"div","aaa ccc").length);//2  
      
       3 
            alert(getElementsByClassName("container","div","aaa ccc").length);//1  
      
       4 
            alert(getElementsByClassName("container","span","aaa zzz").length);//1  
      
       5 
       }

正确的得到了结果。

关于class属性

1.一个元素可以带有多个class属性值，它们通过空格分隔, 例：class='aa bb cc'。

2.class属性值是可以包含'-'这个字符的，如:class='a-b',特别强调是因为在正则表达式中'-'是一个特殊字符。

3.在javascript中通过的获取class属性值的方式为element.className。

原生的getElementsByClassName

有人会问，原生的方法调用效率是最高的，有很多浏览器已经将实现了getElementsByClassName这个方法，那为什这里没有先调用原生的再调用自定义的呢？

对，原生的效率是很高，它支持多个class条件的查询，但是最大的问题是他不支持getElementsByClassName("container","div","aaa ccc")，这种在指定标签中查找指定元素为指定class的情况。

所以，这里舍弃了原生的方法调用。

关于循环优化的问题

在代码中，你会看到我将数组的length缓存了起来，这样可以提高效率。其实上，在这里有一个很隐蔽的问题，就是数组访问length属性和HtmlCollection访问length有很在的区别。在数组中，length是一个普通的属性，访问时不会进行额外的操作，在来看看HTMLCollection,我们常常将HTMLCollection当作数组来使用，但实际上，它是一个根据DOM结构自动变化的实体对象。每次访问一个HTMLCollection对象的属性时，他都会对DOM内所有的节点进行一次完整的匹配。也就是说，每次访问HtmlCollection对象的length时，都会更新一次集合对象，性能上消耗很大。所以一般情况之下，这种HtmlCollection的循环操作，都是建议缓存length的。

额外的收获

这是关于往数组里放元素的方式间，效率比较的问题

来看一下代码：

 
       01 
       //方式一 
      
       02 
        var arr = [];  
      
       03 
        var start = new Date();  
      
       04 
        for(var i=0;i<100000;i++){  
      
       05 
            arr.push(i);  
      
       06 
       } 
      
       07 
         
       08 
       //方式二 
      
       09 
        var arr = [];  
      
       10 
        var start = new Date();  
      
       11 
        for(var i=0;i<100000;i++){  
      
       12 
            arr[arr.length]=i;  
      
       13 
       }