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';
    }
};