检测document.getElementsByClassName 兼容性代码

最新推荐文章于 2022-08-25 20:25:22 发布

guangbing8877

最新推荐文章于 2022-08-25 20:25:22 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/guangbing8877/article/details/69218340

版权

我们知道jquery中可以对各个浏览器进行了兼容，在写jquery代码的时候，不用考虑兼容性。下面模拟一个兼容性处理的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content">aaa</div>
<span class="i">bbb</span>
<div id="head">
    <span class="i"></span>
</div>

</body>
<script>
    var support={
        getElementsByClassName:false
    };
    if (typeof document.getElementsByClassName === 'function') {
        //测试方法的执行结果是否跟我们预想的结果一样
        //1、手动创建一个div元素 ，span元素，并span元素成为div的子元素
        //2、给span标签添加一个class=i
        var div = document.createElement("div");
        var span = document.createElement("span");
        span.className = "i";
        div.appendChild(span);
        //3、查找div下面的class=1的第一个元素是不是就是我们的span元素
        if (typeof div.getElementsByClassName === 'function') {
            var spans = div.getElementsByClassName('i');
            if (spans && spans.length === 1 && spans[0] === span) {
                support.getElementsByClassName=true;
            }
        }
    }
    function getTags(tagName) {
        return document.getElementsByTagName(tagName);
    }

    function getId(idName) {
        return document.getElementById(idName);
    }

    function getClasses(className) {
        if(support.getElementsByClassName){
            //兼容
            return document.getElementsByClassName(className);
        }else{
            //不兼容
            var result=[];
            //兼容性处理代码：
            //1、首先获取页面中所有的元素
            var allTags=document.getElementsByTagName('*');
            //2、循环遍历每一个元素，判断这个元素是不是具有指定的className
            for (var i = 0; i < allTags.length; i++) {
                var dom=allTags[i];
                //.......2.1、先获取元素的className（获取class属性）
                var cName=dom.className;
                //.......2.2、将cName添加前后空格，再将className添加前后空格
                var index=(' '+cName+' ').indexOf(' '+className+' ');
                //.......2.3、如果index的值不是-1，那么就为了该dom元素是符合条件的
                if(index!=-1){
                    result.push(dom);
                }
            }
            //3、返回结果数组result
            return result;
        }

    }
    //增加 一个干扰，看能否检测出来
    document.getElementsByClassName = function () {
    };
    var result = getClasses('content');
    console.log(result);
</script>
</html>

guangbing8877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
检测document.getElementsByClassName 兼容性代码

我们知道jquery中可以对各个浏览器进行了兼容，在写jquery代码的时候，不用考虑兼容性。下面模拟一个兼容性处理的代码： Titleaaabbb var support={ getElementsByClassName:false }; if (typeof document.getElements
复制链接

扫一扫