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 class="one two"></div>

2. document.getElementsByClassName("one");

　　找到全部div中存在class名爲one的元素

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

　　找到box下的全部存在class名爲one的元素