解决浏览器兼容性问题-优快云博客

本文链接：https://blog.youkuaiyun.com/kumayato/article/details/71631980

目的：解决了浏览器对document.getElementsByClassName()的兼容问题。

思维导图：

这里写图片描述

代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            function getClass(classname,id)
            {
                //浏览器支持的
                if(document.getElementsByClassName)
                {
                    //有id的
                    if(id)
                    {
                        var seleid = document.getElementById(id);
                        return seleid.getElementsByClassName(classname);
                    }
                    else //没有id
                    {
                        return document.getElementsByClassName(classname) ;
                    }
                }

                //浏览器不支持的
                //有id的
                if(id)
                {
                    var seleid = document.getElementById(id);
                    var dom = seleid.getElementsByTagName("*");
                }
                else //没有id的
                {
                    var dom = document.getElementsByTagName("*");
                }
                var arr = [];
                for(var i=0; i<dom.length; i++)
                {
                    var txtarr = dom[i].className.split(" "); 
                    //把类名转化成了txt这个数组,用于分割类名。
                    for(var j=0; j<txtarr.length; j++)
                    {
                       if(txtarr[j] == classname)
                       {
                           arr.push(dom[i]); 
                           //我们要的是含有该classname的元素节点
                       }
                    }
                }
                return arr;
            }
            console.log(getClass("one","current").length); // 1
        }
    </script>
</head>
<body>
<div class="one"></div>
<div class="one"></div>
<div id="current">
    <div class='one'></div>
    <div class='two'></div>
</div>
<div class='two'></div>
</body>
</html>