先來(lái)看一下代碼：（支持多個(gè)class查詢和在某個(gè)范圍內(nèi)進(jìn)行查詢）

/*
 * 根據(jù)元素clsssName得到元素集合
 * @param fatherId 父元素的ID，默認(rèn)為document
 * @tagName 子元素的標(biāo)簽名
 * @className 用空格分開(kāi)的className字符串
 */
function getElementsByClassName(fatherId,tagName,className){
	var node = fatherId&&document.getElementById(fatherId) || document;
	tagName = tagName || "*";
	className = className.split(" ");
	var classNameLength = className.length;
	for(var i=0,j=classNameLength;i<j;i++){
		//創(chuàng)建匹配類名的正則
		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)){//優(yōu)化循環(huán)
			if(k === classNameLength){
				result[result.length] = element;
				break;
			}	
		}
		k = 0;
	}
	return result;
}

好，我們來(lái)測(cè)試一下：

<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
}

正確的得到了結(jié)果。

關(guān)于class屬性

1.一個(gè)元素可以帶有多個(gè)class屬性值，它們通過(guò)空格分隔, 例：class='aa bb cc'。

2.class屬性值是可以包含'-'這個(gè)字符的，如:class='a-b',特別強(qiáng)調(diào)是因?yàn)樵谡齽t表達(dá)式中'-'是一個(gè)特殊字符。

3.在javascript中通過(guò)的獲取class屬性值的方式為element.className。

原生的getElementsByClassName

有人會(huì)問(wèn)，原生的方法調(diào)用效率是最高的，有很多瀏覽器已經(jīng)將實(shí)現(xiàn)了getElementsByClassName這個(gè)方法，那為什這里沒(méi)有先調(diào)用原生的再調(diào)用自定義的呢？

對(duì)，原生的效率是很高，它支持多個(gè)class條件的查詢，但是最大的問(wèn)題是他不支持getElementsByClassName("container","div","aaa ccc")，這種在指定標(biāo)簽中查找指定元素為指定class的情況。

所以，這里舍棄了原生的方法調(diào)用。

關(guān)于循環(huán)優(yōu)化的問(wèn)題

在代碼中，你會(huì)看到我將數(shù)組的length緩存了起來(lái)，這樣可以提高效率。其實(shí)上，在這里有一個(gè)很隱蔽的問(wèn)題，就是數(shù)組訪問(wèn)length屬性和HtmlCollection訪問(wèn)length有很在的區(qū)別。在數(shù)組中，length是一個(gè)普通的屬性，訪問(wèn)時(shí)不會(huì)進(jìn)行額外的操作，在來(lái)看看HTMLCollection,我們常常將HTMLCollection當(dāng)作數(shù)組來(lái)使用，但實(shí)際上，它是一個(gè)根據(jù)DOM結(jié)構(gòu)自動(dòng)變化的實(shí)體對(duì)象。每次訪問(wèn)一個(gè)HTMLCollection對(duì)象的屬性時(shí)，他都會(huì)對(duì)DOM內(nèi)所有的節(jié)點(diǎn)進(jìn)行一次完整的匹配。也就是說(shuō)，每次訪問(wèn)HtmlCollection對(duì)象的length時(shí)，都會(huì)更新一次集合對(duì)象，性能上消耗很大。所以一般情況之下，這種HtmlCollection的循環(huán)操作，都是建議緩存length的。

額外的收獲

這是關(guān)于往數(shù)組里放元素的方式間，效率比較的問(wèn)題

來(lái)看一下代碼：

//方式一
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;
}

猜猜看，哪種效率更高呢！經(jīng)過(guò)測(cè)試，第二種方式的效率要高于第一種。

提醒：

這個(gè)版本是不兼容IE5的，以下是我給出的解釋：

1.當(dāng)你從那千分之幾的統(tǒng)計(jì)數(shù)據(jù)里，再去瘋錢的IE5測(cè)試人員的點(diǎn)擊和專業(yè)程序員對(duì)IE5的好奇心，估計(jì)就只剩IE5被焚燒后的灰燼了。

2.你要想信灰燼的利用價(jià)值趨于零

3.如果到現(xiàn)在還沒(méi)能說(shuō)服你，那我想說(shuō)，你很專業(yè)!即然這樣，那還有IE3,IE2,IE?FF1,NN4...，我想你應(yīng)該一并實(shí)現(xiàn)了。

一些坦白：我也不怎么說(shuō)服得了我自已，唉，還是給一個(gè)IE5的解決方案吧：

IE5并不支持getElementByTagName("*")的形式，所以在這里要處理一下：

var elements = (tagName==='*'&&node.all)?node.all:node.getElementsByTagName(tagName);


好了，不多說(shuō)的，這個(gè)函數(shù)簡(jiǎn)單實(shí)用，代碼上我也寫了注釋，看明白應(yīng)該已經(jīng)沒(méi)有什么問(wèn)題了

總結(jié)

以上是生活随笔為你收集整理的我的getElementsByClassName实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。