javascript用类名获得元素的方法-getElementsByClassName
2011-09-08 17:08:58
567
/*
作者：珠峰培训 http://www.zhufengpeixun.cn
通过类名来获取一组元素的方法
有三个参数，第一个参数必须要有表示类名，后两个参数可选
第二个ele是限定的范围，如果没有ele这个参数，则表示在整个文档的范围内返回所有的类名是className的元素
第三个参数是限定的标签名，表示取到此类名的元素的标签名必须是此参数传进来的名
*/
function getElementsByClassName(className,ele,tagName){//通过类名获取元素，后两可参数是可选的
var a=[];//用来存筛选用来的元素
var eles=null;
if(ele) {//如果指定了第二个参数，就是限定了获取元素的范围
if(tagName)//如果指定了第三个参数 就是限定了标记名
eles=ele.getElementsByTagName(tagName)
else
eles=ele.getElementsByTagName('*')
}else //如果没有传后两个参数
eles=document.getElementsByTagName('*');//则在所有的元素中做遍历
for(var i=0;i<eles.length;i++){
if(eles[i].className.search(new RegExp("\\b" + className + "\\b"))!=-1){//用正则表达式来判断是不是包含此类名
a.push(eles.item(i)) //如果满足条件，则存到数组里
}
}
return a
}
示例演示文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课堂示例-通过类名选取元素--珠峰培训</title>
</head>
<body>4
<div>3
<h1 class="a b c">2</h1>
<div id="p1">
<div class="a">1</div>
<div class="b c a">1</div>
<div class="aa b c">1</div>
<p>aa</p>
<span class="a">ssss</span>
<span>ssss</span>
</div>
<h2 class="b a d">H2</h2>
</div>
</body>
</html>
<student></student>
<script type="text/ecmascript">
/*
作者：珠峰培训 http://www.zhufengpeixun.cn
通过类名来获取一组元素的方法
有三个参数，第一个参数必须要有表示类名，后两个参数可选
第二个ele是限定的范围，如果没有ele这个参数，则表示在整个文档的范围内返回所有的类名是className的元素
第三个参数是限定的标签名，表示取到此类名的元素的标签名必须是此参数传进来的名
*/
function getElementsByClassName(className,ele,tagName){//通过类名获取元素，后两可参数是可选的
var a=[];//用来存筛选用来的元素
var eles=null;
if(ele) {//如果指定了第二个参数，就是限定了获取元素的范围
if(tagName)//如果指定了第三个参数 就是限定了标记名
eles=ele.getElementsByTagName(tagName)
else
eles=ele.getElementsByTagName('*')
}else //如果没有传后两个参数
eles=document.getElementsByTagName('*');//则在所有的元素中做遍历
for(var i=0;i<eles.length;i++){
if(eles[i].className.search(new RegExp("\\b" + className + "\\b"))!=-1){//用正则表达式来判断是不是包含此类名
a.push(eles.item(i)) //如果满足条件，则存到数组里
}
}
return a
}
var ele=document.getElementById('p1');
var a=getElementsByClassName('a',ele,'div');//获取id为p1的这个元素下类名为a并且标记名为div的元素
alert(a);
</script>
<script>
//经过优化之后的方法，修正一下正则表达式。
function getElementsByClassName(strClass,context){
context=context||document;
if(context.getElementsByClassName){
return context.getElementsByClassName(strClass);
}
strClass=strClass.replace(/^ +| +$/g,"");
var aClass=strClass.split(/ +/);
var eles=context.getElementsByTagName("*");
for(var i=0;i<aClass.length;i++){
var a=[]
var reg=new RegExp("(^| )"+aClass[i]+"( |$)");
for(var j=0;j<eles.length;j++){
var ele=eles[j];
if(reg.test(ele.className)){
a.push(ele);
}
}
eles=a;
}
return eles;
}
</script>
