getElementsByClassName的原生實現

DOM 提供了一個名為 getElementById() 的方法，這個方法將返回一個對象，這個對象就是參數 id 所對應的元素節點。另外，getElementByTagName() 方法會返回一個對象的數組，每一個對象分別對應著文檔裡有給定標籤的一個元素。這個方法的參數是 html 標籤的名字。現在我們考慮一個問題，能不能通過標籤的類名class name來擷取該對象呢？下面是這個猜想的程式實現（支援多個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);//2alert(getElementsByClassName("container","div","aaa ccc").length);//1alert(getElementsByClassName("container","span","aaa zzz").length);//1}

正確的得到了結果。

有人會問，原生的方法調用效率是最高的，有很多瀏覽器已經將實現了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;}

猜猜看，哪種效率更高呢！經過測試，第二種方式的效率要高於第一種。好了，不多說的，這個函數簡單實用，代碼上我也寫了注釋，看應該已經沒有什麼問題了。