DOM getElementsByClassName IE兼容方案

平时写HTML时多用class来命名，为很少用id来命名，主要原因就是class使用起来比较灵活。

但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElementsByTagName两个方法来查找DOM。

这时候就很尴尬了，就不得不在HTML里加入各种各样的id。看了就烦，不爽

Js有提供一个通过class名查找DOM的方法：getElementsByClassName();

但是。。。。。。只支持ie9+   -.-,哎呀好尴尬。。。

只好自己写一个兼容IE的getElementsByClassName()方法出来：

 // indexOf兼容
 if (!Array.prototype.indexOf) {
     Array.prototype.indexOf = function(x) {
         var result = -1;
         if (this.length == 0) {
             return result;
         }
         for (var i = 0; i < this.length; i++) {
             if (this[i] === x) {
                 result = i;
                 break;
             }
         }
         return result;
     }
 }
 // getElementsByClassName兼容
 if (!document.getElementsByClassName) {
     document.getElementsByClassName = function(c_name, ele) {
         //用于输出找到的匹配的DOM元素
         var arr = [];
         // 查找元素,并计算数组长度
         var allTag = (ele || document).getElementsByTagName('*');
         var tagLength = allTag.length;
         // 对传进来的c_name参数进行分割,并计算数组长度
         var cNameList = c_name.split(' ');
         var cNameLength = cNameList.length;
         // 对所有的tag元素进行遍历
         for (var i = 0; i < tagLength; i++) {
             // 对每一个tag的class属性进行分割,并计算数组长度
             var classList = allTag[i].className.split(' ');
             var listLength = classList.length;
             // 定义一个空数组
             var judge = [];
             for (var t = 0; t < cNameLength; t++) {
                 // 如果cNamelist可以在classList中找到，就给judge push一个true
                 if (classList.indexOf(cNameList[t]) !== -1) {
                     judge.push(true);
                 }
             }
             // 判断judge是否相等cNameLength，如果相等，表示是我们需要的元素
             if (judge.length === cNameLength) {
                 arr.push(allTag[i]);
             }
         }
         return arr;
     }
 }

 <div id="box">
     <div class="one two"></div>
     <div class="one three"></div>
     <div class="one"></div>
     <div class="one"></div>
 </div>
 <div class="one"></div>
 <div class="one"></div>

这个兼容代码可以实现：

1. document.getElementsByClassName("one two");

　　只找到<div class="one two"></div>

2. document.getElementsByClassName("one");

　　找到所有div中存在class名为one的元素

3.document.getElementsByClassName("one",document.getElementById("box"));

　　找到box下的所有存在class名为one的元素