JavaScript通过class获取元素
1、在javascript中获取元素的class应该使用className来获取，实际应用中最好封装一个方法方便我们以后通过class来获取元素。
HTML：，
<div class="box">第一个</div>
<div class="box">第二个</div>
<div class="box">第三个</div>
我们可以判断当元素的className为box的时候就返回获取的元素。但是如果包含多个class时就要注意javascript的写法了。
1、方法代码如下：
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
/*当className相等时添加到数组中*/
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
};
2、调用方法(实际使用)：
window.onload=function (){
var aBox=getByClass("box");
for(var i=0;i<aBox.length;i++){
alert(aBox[i].innerHTML);
}
};
3、方法一分析：
此方法只适用于只有一个class的元素，如果包含多个class，
HTML：
<div class="box aa bb">第一个</div>
<div class="box dd">第二个</div>
<div class="box">第三个</div>
那么第一个和第二个元素就无法获取了。
原因：
判断条件是if(aEle[i].className==sClass)，只有当className与要选的class完全相等时才获取。
1、解决包含多个class的元素获取。
分析：
如<div class="box aa bb"></div>，每个class：box aa bb 都相当于一个单词,配合正则表达式将需要获取的class当做验证模式，寻找包含匹配的字符串class就行了。
2、方法代码如下：
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
/*正则模式*/
var re=new RegExp("\\b" + sClass + "\\b","g");
for(var i=0;i<aEle.length;i++){
/*字符串search方法判断是否存在匹配*/
if(aEle[i].className.search(re) != -1){
aResult.push(aEle[i]);
}
}
return aResult;
};
3、调用方法(实际使用)：
window.onload=function (){
var aBox=getByClass("box");
for(var i=0;i<aBox.length;i++){
alert(aBox[i].innerHTML);
}
};
此方法就可以解决包含多个class的元素获取了，是不是有点小激动？如果你对正则表达式不熟悉，呵呵.....且看下面的方法。
1、分析：
如<div class="box aa bb"></div>，我们可以将class通过空格拆分成数组，如果要获取的class满足数组中的一个元素，那么就获得此元素。
2、方法代码如下：
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
/*将每个className拆分*/
var arr=aEle[i].className.split(/\s+/);
for(var j=0;j<arr.length;j++){
/*判断拆分后的数组中有没有满足的class*/
if(arr[j]==sClass){
aResult.push(aEle[i]);
}
}
}
return aResult;
};
3、调用方法同上，此方法包含两个循环，外面为元素循环，里面为className拆分后的数组循环，简单容易理解。
1、上面的方法只是都传递一个参数：sClass，获取的是HTML中所有的标签
var aEle=document.getElementsByTagName('*');资源大大浪费。我们来做一下优化，只需要传递要获取class的父标签元素就行了，
优化代码：
function getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
...
...
...
}
后面的内容上面的几种方法都可以，这样是不是优化了许多呢！