getElementsByClassName()

最新推荐文章于 2025-05-16 15:18:00 发布

颓废的四哥

最新推荐文章于 2025-05-16 15:18:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/Var_YanGuangYing/article/details/78983784

js 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种兼容多种浏览器的通过类名获取DOM元素的方法，并提供了一个实用的JavaScript函数实现。该函数解决了getElementsByClassName()方法在某些浏览器中不可用的问题。

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

通过类名获取元素：

因为浏览器兼容性问题，导致getElementsByClassName()的可用性降低，但是通过类名获取元素可以提高写代码的效率，所以封装一下。

 function getByClassName(classStr, context) {
        context=context||document;
        if(typeof document.getElementsByClassName === 'function'){
            return listToArray(document.getElementsByClassName(classStr))
        }
        let aryClass= classStr.replace(/(^ +)|( +$)/g,"").split(/ +/g);
        let eles=document.getElementsByTagName("*");
        for(let i=0;i<aryClass.length;i++){
            let curClass=aryClass[i];
            let reg=new RegExp("(^| +)"+curClass+"( +|$)");
            let ary=[];
            for(let j=0;j<eles.length;j++){
                reg.test(eles[j].className)?ary.push(eles[j]):null;
            }
            eles=ary;
        }
        return eles;
    }

listToArray是将类数组转化为数组的方法。

function listToArray(arg) {
        let ary=[];
        try {
            ary=[].slice.call(arg,0)
        }catch (e){
            for (let i=0;i<arg.length;i++){
                ary[ary.length]=arg[i];
            }
        }
        return ary
    }