javascript getElementsByClassName實現代碼

先來看一下代碼：（支援多個class查詢和在某個範圍內進行查詢） 複製代碼 代碼如下:/*
* 根據元素clsssName得到元素集合
* @param fatherId 父元素的ID，預設為document
* @tagName 子項目的標籤名
* @className 用空格分開的className字串
*/
function getElementsByClassName(fatherId,tagName,className){
node = fatherId&&document.getElementById(fatherId) || document;
tagName = tagName || "*";
className = className.split(" ");
var classNameLength = className.length;
for(var i=0,j=classNameLength;i<j;i++){
//建立匹配類名的正則
className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");
}
var elements = node.getElementsByTagName(tagName);
var result = [];
for(var i=0,j=elements.length,k=0;i<j;i++){//緩衝length屬性
var element = elements[i];
while(className[k++].test(element.className)){//最佳化迴圈
if(k === classNameLength){
result[result.length] = element;
break;
}
}
k = 0;
}
return result;
}

好，我們來測試一下： 複製代碼 代碼如下:<div id="container">
<span class="aaa zzz ccc"></span>
<div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>

複製代碼 代碼如下:window.onload = function(){
alert(getElementsByClassName(document,"div","aaa ccc").length);//2
alert(getElementsByClassName("container","div","aaa ccc").length);//1
alert(getElementsByClassName("container","span","aaa zzz").length);//1
}

正確的得到了結果。
原生的getElementsByClassName
有人會問，原生的方法調用效率是最高的，有很多瀏覽器已經將實現了getElementsByClassName這個方法，那為什這裡沒有先調用原生的再調用自訂的呢？
對，原生的效率是很高，它支援多個class條件的查詢，但是最大的問題是他不支援getElementsByClassName("container","div","aaa ccc")，這種在指定標籤中尋找指定元素為指定class的情況。
所以，這裡捨棄了原生的方法調用。
關於迴圈最佳化的問題
在代碼中，你會看到我將數組的length緩衝了起來，這樣可以提高效率。其實上，在這裡有一個很隱形問題，就是數組訪問length屬性和HtmlCollection訪問length有很在的區別。在數組中，length是一個普通的屬性，訪問時不會進行額外的操作，在來看看HTMLCollection,我們常常將HTMLCollection當作數組來使用，但實際上，它是一個根據DOM結構自動變化的實體物件。每次訪問一個HTMLCollection對象的屬性時，他都會對DOM內所有的節點進行一次完整的匹配。也就是說，每次訪問HtmlCollection對象的length時，都會更新一次集合對象，效能上消耗很大。所以一般情況之下，這種HtmlCollection的迴圈操作，都是建議緩衝length的。
額外的收穫
這是關於往數組裡放元素的方式間，效率比較的問題
來看一下代碼： 複製代碼 代碼如下://方式一
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr.push(i);
}
//方式二
var arr = [];
var start = new Date();
for(var i=0;i<100000;i++){
arr[arr.length]=i;
}

猜猜看，哪種效率更高呢！經過測試，第二種方式的效率要高於第一種。
提醒：
這個版本是不相容IE5的，以下是我給出的解釋：
1.當你從那千分之幾的統計資料裡，再去瘋錢的IE5測試人員的點擊和專業程式員對IE5的好奇心，估計就只剩IE5被焚燒後的灰燼了。
2.你要想信灰燼的利用價值趨於零
3.如果到現在還沒能說服你，那我想說，你很專業!即然這樣，那還有IE3,IE2,IE?FF1,NN4...，我想你應該一併實現了。
一些坦白：我也不怎麼說服得了我自已，唉，還是給一個IE5的解決方案吧：
IE5並不支援getElementByTagName("*")的形式，所以在這裡要處理一下：
var elements = (tagName==='*'&&node.all)?node.all:node.getElementsByTagName(tagName);
好了，不多說的，這個函數簡單實用，代碼上我也寫了注釋，看明白應該已經沒有什麼問題了