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

巴特西

Javascript:getElementsByClassName

最新文章

热门文章