手写getElementsByClassName函数解决兼容

getElementsByClassName()

通过元素的样式类名获取一组元素集合，在IE6-8下不兼容。

getElementsByClassName(“a1”)：写一个样式类名，只要包含这个样式类名就可以

getElementsByClassName(“a1 a2”)：
必须同时包含a1&&a2才可以，但是和样式的顺序以及中间有多少空格是无关的

getElementsByClassName(“b1”)：若没有b1，得到的是空集合
————————————————————————————————————————

解决兼容，重新写个函数getElementsByClass()：

function getElementsByClass(className,context){//className:要获取的样式类名，可能是一个或多个；context:获取元素的上下文，即范围，若不传context参数，默认为document
     context=context||document;

     var flag="getComputedStyle" in window;
     if(flag){//若是标准浏览器直接输出即可
        return listToArray(context.getElementsByClassName(className));
     }

    //IE6-8：
    //把传递进来的样式类名首位空格都去掉，再按照中间的空格把里面每一项拆分成数组
     var classNameAry=className.replace(/^ +| +$/g, "").split(/ +/g);
 
     var ary=[];
   //获取指定上下文中的所有元素标签，循环这些标签， 获取每一个标签的className的字符串
     var nodeList=context.getElementsByTagName("*");   //获取指定上下文中的所有元素标签
     for(var i=0,len=nodeList.length;i<len;i++){
           var curNode=nodeList[i];

    //判断curNode.className是否既包含a1也包含a2，如果两个都包含的话，curNode是想要的，否则不是想要的
           var isOk=true;  //假设curNode中包含了所有的样式
           for(var j=0;j<classNameAry.length;j++){
               var reg=new RegExp("(^| +)"+classNameAry[j]+"( +|$)");
               if(!reg.test(curNode.className)){
                   isOk=false;
                   break;
               }
            }
           if(isOk){  //拿每一个标签和所有样式类名比较后，如果结果还是true，说明当前元素标签包含了所有样式，即我想要的
                ary.push(curNode);
           }
     }
     return ary;
}