【兼容封装】选择器getElementById || getElementsByClassName（兼容IE） || getElementsByTagName

最新推荐文章于 2021-10-10 10:23:46 发布

@Umbrella

最新推荐文章于 2021-10-10 10:23:46 发布

阅读量363

点赞数 1

CC 4.0 BY-SA版权

分类专栏：【兼容与封装】文章标签： getElementById getElementsByClassName getElementsByTagName js选择器

本文链接：https://blog.youkuaiyun.com/Umbrella_Um/article/details/97040339

【兼容与封装】专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript封装的选择器函数，该函数兼容IE浏览器，并能通过ID、类名或标签名查找DOM元素。同时，文章提供了一个兼容getElementsByClassName的方法，用于按类名查找元素。

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

封装 – 原生js选择器

简单的封装一个选择器函数（带兼容IE）

 /* 封装一个选择器 */
   function seletor(param, obj) {
        obj = obj || document;
        //根据id名查找元素
        if (param[0] === "#")
            // console.log("param",param.charAt(0))
            return document.getElementById(param.slice(1));
        // 根据指定类名查找元素
        if (param.indexOf(".") === 0)
            return getByClass(param.substring(1), obj);
        //根据标签名查找
        return obj.getElementsByTagName(param);
    }

//类名查找元素实现方法 -- 兼容一下getElementsByClassName
    function getByClass(className, obj) {
        obj = obj || document;
        if (obj.getElementsByClassName)
            return obj.getElementsByClassName(className);

        var result = [];
        var tags = obj.getElementsByTagName("*");
        for (var i = 0, len = tags.length; i < len; i++) {
            var classNames = tags[i].className.split(" "); // 获取当前遍历元素的类名
            for (var j = 0, l = classNames.length; j < l; j++) {
                if (className === classNames[j]) { // 找到所需要进行查找的一个元素
                    result.push(tags[i]);
                    console.log("result",result)
                    break;
                }
            }
        }
        return result;
    }