背景:
由于原生的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