js根据类名获取元素——自定义getElementsByClass()

在原生js中，有根据id属性获取元素的方法document.getElementById()，却没有根据class属性获取元素的方法，要知道，我们在项目中经常会有这个需求，为了方便，我们可以自定义一个getElementsByClass()方法。

/*根据类名（class值）获取元素 *  * author:Howing Towne * edit_time:2015-08-26 *  * api: getElementsByClass(oParent, target) *  * 参数说明: * oParent:父节点，在该节点的子节点中进行遍历 * target:目标类名（class值） */function getElementsByClass(oParent, target) {       var aEle = oParent.getElementsByTagName('*');       var aResult = [];       var reg = new RegExp('\\b' + target + '\\b', 'i');       var i = 0;       for(i = 0; i < aEle.length; i++) {              if(reg.test(aEle[i].className)) {                  aResult.push(aEle[i]);              }       }       return aResult;}

其中使用了正则表达式进行判断，可以适配一个元素有多个类名的情况，如带有aa、bb、cc三个类名的元素，通过查找aa类名同样可以获取该元素。

应用：

window.onload = function() {    var oUl = document.getElementById('oUl');    var aLi = getElementsByClass(oUl, 'active df');    for(var i = 0; i < aLi.length; i++) {        aLi[i].style.fontSize = '22px';    }};