getElementsByClassName兼容IE6/7/8的实现方法

all know: 除IE8及以下版本，getElementsByClassName方法在所有浏览器中都实现了。

 

本文来分析总结下不同框架或库中，getElementsByClassName的兼容IE8-的实现方法。

框架：NEJ

库： jQuery

 

一、NEJ框架的实现方法

__getElementsByClassName = function(_element,_class){
    var _result = [],
        _regexp = new RegExp('(\\s|^)(?:'+_class.replace(/\s+/g,'|')+')(?=\\s|$)');
    _u._$forEach(
        _element.getElementsByTagName('*'),
        function(_node){
            if (_regexp.test(_node.className)){
                _result.push(_node);
            }
        }
    );
    return _result;
};
            	

以上代码不可以直接使用，对nej框架中的其他API有依赖。

但其设计原理是很清晰的：

1、新建 匹配类名的 正则表达式 ；

2、用HTMLElement元素的getElementByTagName方法选出该元素包含的所有子元素；

3、对选出的每个子元素 用正则表达式判断，看子元素类名中是否包含指定类名；如果包含，则把它推到result数组。

二、在网友 Ruby’s Louvre 的一篇总结的基础上稍加改进，并调试通过 得到的一种方法：

注：该段代码可以直接使用，不依赖任何框架或库！

/* 第一个参数是必须的，后两个参数是可选的，兼容IE6/7/8 */
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){
	        if(tag !== "*" && node.tagName === tag.toUpperCase()){
	          result.push(node);
	        }
	    }else{
	    	result.push(node);
	    }
      }
      return result;
    }else{
      node = node || document;
      tag = tag || "*";
      var result = [];
      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,n=0, kl=patterns.length; k<kl; k++){
          match = patterns[k].test(current.className);
          if (match)  n++;
        }
        if(n == kl){
        	result.push(current);
        }
        
      }
      return result;
    }
}
getElementsByClassName("filament_table red cell") ;
getElementsByClassName("filament_table red cell",document,"div") ;

 三、jQuery库 中 类选择器的实现，是集成在sizzle选择器引擎中的，其中用到了大量的正则表达式。

　　具体可参考Aaron的一篇文章。