Javascript:getElementsByClassName

背景：

由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况，所以，这里舍弃了原生的方法调用

 

方法一:

function getElementByClassName(parent,tagName,className) {

	/*
	*参数说明：
	*@parent:父元素，默认为document
	*@tagName：子元素的标签名
	*@className： 用空格分开的className字符串
	*/
	
	var aEls=parent.getElementsByTagName(tagName);

	var arr=[];

	for(var i=0;i<aEls.length;i++){

        var aClassName=aEls[i].className.split(' ');//注意，是用' '(空格)拆分

        for(var j=0;j<aClassName.length;j++){

        	if(aClassName[j] == className){
        		arr.push(aEls[i]);
        		break;
        	}
        }


	}

	return arr;
}

 

方法二：

function getElementByClassName(parent,tagName,className) {

	/*
	*参数说明：
	*@parent:父元素，默认为document
	*@tagName：子元素的标签名
	*@className： 用空格分开的className字符串
	*/
	
	var aEls=parent.getElementsByTagName(tagName);

	var arr=[];

	for(var i=0;i<aEls.length;i++){

	if(aEls[i].classList.contains(className)){
        arr.push(aEls[i]);
	}
		
	}

	return arr;
}

 

测试：

<div id="area">
	<p class="p1">1</p>
	<p class="p1">2</p>
	<p class="p2 p3">3</p>
	<p class="p1 p3">4</p>
	<p class="p2 p2">5</p>
</div>



<script type="text/javascript">
var oArea=document.getElementById('area');	
var aP1=getElementByClassName(oArea,'p','p1');
var aP2=getElementByClassName(oArea,'p','p2');

console.log(aP1);
console.log(aP2);

</script>

 

方法一，测试结果：

 

 

方法二，测试结果：

 

 

了解更多：

 

1#支持多个class查询和在某个范围内进行查询的getElementsByClassName实现

http://www.cnblogs.com/fool/archive/2010/10/09/1846424.html

 

2#getElementsByClassName的理想实现

http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html