你的位置:首页 > Java教程

[Java教程]DOM getElementsByClassName IE兼容方案


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

 

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

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

 

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

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

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

 

 1 // indexOf兼容 2 if (!Array.prototype.indexOf) { 3   Array.prototype.indexOf = function(x) { 4     var result = -1; 5     if (this.length == 0) { 6       return result; 7     } 8     for (var i = 0; i < this.length; i++) { 9       if (this[i] === x) {10         result = i;11         break;12       }13     }14     return result;15   }16 }17 // getElementsByClassName兼容18 if (!document.getElementsByClassName) {19   document.getElementsByClassName = function(c_name, ele) {20     //用于输出找到的匹配的DOM元素21     var arr = [];22     // 查找元素,并计算数组长度23     var allTag = (ele || document).getElementsByTagName('*');24     var tagLength = allTag.length;25     // 对传进来的c_name参数进行分割,并计算数组长度26     var cNameList = c_name.split(' ');27     var cNameLength = cNameList.length;28     // 对所有的tag元素进行遍历29     for (var i = 0; i < tagLength; i++) {30       // 对每一个tag的class属性进行分割,并计算数组长度31       var classList = allTag[i].className.split(' ');32       var listLength = classList.length;33       // 定义一个空数组34       var judge = [];35       for (var t = 0; t < cNameLength; t++) {36         // 如果cNamelist可以在classList中找到,就给judge push一个true 37         if (classList.indexOf(cNameList[t]) !== -1) {38           judge.push(true);39         }40       }41       // 判断judge是否相等cNameLength,如果相等,表示是我们需要的元素42       if (judge.length === cNameLength) {43         arr.push(allTag[i]);44       }45     }46     return arr;47   }48 }

 

1 <div id="box">2   <div class="one two"></div>3   <div class="one three"></div>4   <div class="one"></div>5   <div class="one"></div>6 </div>7 <div class="one"></div>8 <div class="one"></div>

这个兼容代码可以实现:

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

  只找到<div ></div>

2. document.getElementsByClassName("one");

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

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

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

 

遗憾:

第三个实现方式不是很满意,毕竟在原生的js中只要使用:

document.getElementById("box").getElementsByClassName("one")就可以实现了,但是这个实现方式还没有想出来,还请高手不吝赐教,谢谢~(^_^)