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

最新推荐文章于 2025-03-27 20:58:18 发布

HowieTowne

最新推荐文章于 2025-03-27 20:58:18 发布

阅读量1.4w

点赞数 2

分类专栏： javascript 文章标签： class javascript

本文链接：https://blog.csdn.net/yonnangel/article/details/48003975

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在原生JavaScript中自定义getElementsByClass方法的技术。此方法允许开发者通过类名选择DOM元素，适用于没有直接提供此类功能的浏览器环境。文章提供了完整的实现代码，并演示了如何使用该方法来修改特定类名的元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在原生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';
    }
};