document.getElementsByClassName的理想实现

来自: 司徒正美 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;
    }
  }