getElementsByClassName 原生实现

DOM 提供了一个名为 getElementById() 的方法，这个方法将返回一个对象，这个对象就是参数 id 所对应的元素节点。另外，getElementByTagName() 方法会返回一个对象的数组，每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题，能不能通过标签的类名class name来获取该对象呢？下面是这个猜想的程序实现（支持多个class查询和在某个范围内进行查询）：

	/* 
	* 根据元素clsssName得到元素集合 
	* @param fatherId 父元素的ID，默认为document 
	* @tagName 子元素的标签名 
	* @className 用空格分开的className字符串 
	*/
	function getElementsByClassName(className,tagName,fatherId){ 
		/*
		* node = fatherId&&document.getElementById(fatherId)||document;
		* 这句代码可以拆成两部分来看 
		* fatherId&&document.getElementById(fatherId) 如果fatherID为false则直接返回false、如果fathreId为true则执行docu~~~并返回结果
		* (前半部分的结果)||document 如果前半部分的结果为true则直接返回、否则返回document
		* 整句话其实类似三元操作符
		*/
		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;
	}

 

Test：

<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("aaa ccc","div").length);//2 
	alert(getElementsByClassName("aaa ccc","div","container").length);//1 
	alert(getElementsByClassName("aaa zzz","span","container").length);//1 
}