JS === 關於getElementsByClassName()

//練習：封裝一個函數，兼容所有瀏覽器，通過類名取得標簽。

//xxx.getElementsByClassName() IE8及以前的瀏覽器不兼容，定義一個函數，來實現這個功能

 

第一種 == 類名里面 只有一個

結構：

　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div class="red"></div>

 

JS：

function getClass(classname){
　　if(document.getElementsByClassName){                 // 如果有 true，執行
　　　　return document.getElementsByClassName(classname); 
　　}

　　//兼容IE8

　　var arr = [];   
　　var all = document.getElementsByTagName("*")  　　//getElementsByTagName("*") ===取得所有標簽

　　for(var i = 0 ; i <all.length;i++){
　　　　if(all[i].className == classname){
　　　　arr.push(all[i]);
　　}
}
return arr;
}

getClass("red");
alert(getClass("red").length);

 

 

第二種 == 類名里面 有多個，用空格隔開

結構：

　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div></div>
　　<div class="black red"></div>
　　<div class="red"></div>

 

JS：

function getClass(classname){
　　if(document.getElementsByClassName){
　　return document.getElementsByClassName(classname);
　}

　　var arr = [];
　　var all = document.getElementsByTagName("*")   

　　for(var i = 0 ; i <all.length;i++){
　　　　var text = all[i].split(" ");    // 多個類名的時候 用空格分隔開 在遍歷每一個
　　　　for(var j = 0 ; j < text.length; j++){
　　　　if(text[j].className == classname){   
　　　　　　arr.push(all[i]);
　　　　}
　　}
　}
　　return arr;
}

　　getClass("red");
　　alert(getClass("red").length);

解題思路：

1. 對於IE8 不支持getElementsByClassName() .. 

可以選擇 getElementsByTagName("*") == 用 * 取得所有標簽

遍歷每個標簽.className == classname 

如果是的話== 要返回，所以== 創建一個空數組，利用數組的 push方法，把每個符合條件的添加到數組中。

2. 多個類名== split()方法 = 在分成數組在遍歷小數組，如果有符合的 添加進去。

 

=== getElementsByTagName("*")