document.getElementsByClassName的理想实现

最新推荐文章于 2022-06-15 09:29:56 发布

Jsheng

最新推荐文章于 2022-06-15 09:29:56 发布

阅读量127

点赞数

分类专栏： Web Javascript

本文链接：https://blog.csdn.net/lanjiasheng/article/details/84117537

版权

Javascript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Web

27 篇文章 0 订阅

订阅专栏

来自: 司徒正美 blog

http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html

先看一下各浏览器对document.getElementsByClassName的支持

当然如果游览器原生支持，就用原生的。

各主流游览器的支持情况
IE8	IE7	IE6	FF3	FF2	Saf3	Op9	Op10	Chrome
N	N	N	Y	N	Y	Y	Y	Y

(中间省略.......)

综合以上方案，我得出了一个最理想的实现——兼容IE5，让后面两个参数是可选的，能原生的原生，利用字面量与倒序循环提高效率……

 
         //查找一网页中5007个类名为“cell”的元素，IE8历时1828 ~ 1844毫秒， 
        
         //IE6为125 ~ 172毫秒，IE8为93 ~ 94毫秒，FF3.5为0~1毫秒，opera10为0毫秒，Chrome为1毫秒， 
        
         //safari4为0毫秒 
        
         var 
         getElementsByClassName =  
         function 
         (searchClass,node,tag) { 
        
         if 
         (document.getElementsByClassName){ 
        
         return  
         document.getElementsByClassName(searchClass) 
        
         } 
         else 
         {     
        
         node = node || document; 
        
         tag = tag ||  
         '*' 
         ; 
        
         var 
         returnElements = [] 
        
         var 
         els =  (tag ===  
         "*" 
         && node.all)? node.all : node.getElementsByTagName(tag); 
        
         var 
         i = els.length; 
        
         searchClass = searchClass.replace(/\-/g,  
         "\\-" 
         ); 
        
         var 
         pattern =  
         new 
         RegExp( 
         "(^|\\s)" 
         +searchClass+ 
         "(\\s|$)" 
         ); 
        
         while 
         (--i >= 0){ 
        
         if 
         (pattern.test(els[i].className) ) { 
        
         returnElements.push(els[i]); 
        
         } 
        
         } 
        
         return 
         returnElements; 
        
         } 
        
         }

用法：

 
         var 
         collections = getElementsByClassName( 
         "red" 
         );

但它还是不如原生的getElementsByClassName，不能同时检索多个class

 
         < 
         h2 
         class 
         = 
         "red cell title" 
         >安装支持</ 
         h2 
         > 
        
         < 
         span 
         class 
         = 
         "cell red  " 
         >jjj</ 
         span 
         > 
        
         < 
         div 
         class 
         = 
         "filament_table  red cell" 
         >这是DIV</ 
         div 
         > 
        
         #利用 var dd = getElementsByClassName("cell red") ，这三个元素都应该能被检索到！

因此，最最终的方案为：

 
         var 
         getElementsByClassName =  
         function 
         (searchClass, node,tag) { 
        
         if 
         (document.getElementsByClassName){ 
        
         var 
         nodes =  (node || document).getElementsByClassName(searchClass),result = []; 
        
         for 
         ( 
         var 
         i=0 ;node = nodes[i++];){ 
        
         if 
         (tag !==  
         "*" 
         && node.tagName === tag.toUpperCase()){ 
        
         result.push(node) 
        
         } 
         else 
         { 
        
         result.push(node) 
        
         } 
        
         } 
        
         return 
         result 
        
         } 
         else 
         { 
        
         node = node || document; 
        
         tag = tag ||  
         "*" 
         ; 
        
         var 
         classes = searchClass.split( 
         " " 
         ), 
        
         elements = (tag ===  
         "*" 
         && node.all)? node.all : node.getElementsByTagName(tag), 
        
         patterns = [], 
        
         current, 
        
         match; 
        
         var 
         i = classes.length; 
        
         while 
         (--i >= 0){ 
        
         patterns.push( 
         new 
         RegExp( 
         "(^|\\s)" 
         + classes[i] +  
         "(\\s|$)" 
         )); 
        
         } 
        
         var 
         j = elements.length; 
        
         while 
         (--j >= 0){ 
        
         current = elements[j]; 
        
         match =  
         false 
         ; 
        
         for 
         ( 
         var 
         k=0, kl=patterns.length; k<kl; k++){ 
        
         match = patterns[k].test(current.className); 
        
         if 
         (!match)   
         break 
         ; 
        
         } 
        
         if 
         (match)  result.push(current); 
        
         } 
        
         return 
         result; 
        
         } 
        
         }