JavaScript通过class获取元素

在javascript中获取元素的class应该使用className来获取，实际应用中最好封装一个方法方便我们以后通过class来获取元素。 HTML：， <div class="box">第一个</div> <div class="box">第二个</div> <div class="box">第三个</div> 我们可以判断当元素的className为box的时候就返回获取的元素。但是如果包含多个class时就要注意javascript的写法了。

方法代码如下： 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; };

调用方法(实际使用)： window.onload=function (){ var aBox=getByClass("box"); for(var i=0;i<aBox.length;i++){ alert(aBox[i].innerHTML); } };

方法一分析： 此方法只适用于只有一个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完全相等时才获取。

解决包含多个class的元素获取。 分析： 如<div class="box aa bb"></div>，每个class：box  aa  bb 都相当于一个单词,配合正则表达式将需要获取的class当做验证模式，寻找包含匹配的字符串class就行了。

方法代码如下： 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; };

调用方法(实际使用)： window.onload=function (){ var aBox=getByClass("box"); for(var i=0;i<aBox.length;i++){ alert(aBox[i].innerHTML); } }; 此方法就可以解决包含多个class的元素获取了，是不是有点小激动？如果你对正则表达式不熟悉，呵呵.....且看下面的方法。

分析： 如<div class="box aa bb"></div>，我们可以将class通过空格拆分成数组，如果要获取的class满足数组中的一个元素，那么就获得此元素。

方法代码如下： 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; };

调用方法同上，此方法包含两个循环，外面为元素循环，里面为className拆分后的数组循环，简单容易理解。

上面的方法只是都传递一个参数：sClass，获取的是HTML中所有的标签 var aEle=document.getElementsByTagName('*');资源大大浪费。我们来做一下优化，只需要传递要获取class的父标签元素就行了， 优化代码： function getByClass(oParent,sClass){ var aResult=[]; var aEle=oParent.getElementsByTagName('*'); ... ... ... } 后面的内容上面的几种方法都可以，这样是不是优化了许多呢！