标签:
背景:
由于原生的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
标签:
原文地址:http://www.cnblogs.com/kevinCoder/p/4605277.html