js解决getElementByClassName

最新推荐文章于 2025-05-18 18:13:19 发布

原创最新推荐文章于 2025-05-18 18:13:19 发布 · 2.7w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #浏览器兼容

原生JS 同时被 2 个专栏收录

7 篇文章

订阅专栏

校招常见题

7 篇文章

订阅专栏

本文介绍了一种在不支持 document.getElementsByClassName 的浏览器中通过编写自定义函数实现获取指定类名元素的方法。该方法首先检查浏览器是否原生支持 getClassElementByClassName 方法，如果不支持，则遍历所有元素并收集匹配类名的元素。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <script>
        /*JS写getElementByClassName;
        我发现chorm、firefox、ie都支持document.getElementsByClassName */
           window.onload = function(){
               var adom = document.getElementsByClassName('a1');
               for(var i = 0;i<adom.length;i++)
                    adom[i].style.backgroundColor="red";
           };
           function getElementByClassName(className){
               var elems = [];
               if(!document.getElementsByClassName){
                   alert("no exit");
                   var dom = document.getElementByTagName('*');
                   for(var i = 0;i<dom.length;i++){
                       if(dom[i].className == className)
                            elems.push(dom[i]);
                   }
                }else{
                    elems = document.getElementsByClassName(className);
                    alert('exit');
                }
                return elems;
           }
    </script>
</head>

<body>
    <div id="a1">a1</div>
    <div class="a1">a1</div>
    <div class="a1">a1</div>
    <div id="a1">a1</div>
    <div class="a1">a1</div>
</body>

</html>

结果：