Javascript封装id、class与元素选择器方法示例

代码2020-05-12428 人已阅来源:网络

由于各个浏览器都支持的选择方法只有如下三种:

  • 1、document.getElementById()
  • 2、document.getElementsByName()
  • 3、document.getElementsByTagName()

所以在封装选择器的时候要考虑浏览器的兼容性

 <script>
    //封装id选择器
        function $(selector) {
            var c = selector.substring(0, 1); //获取第一个字符
            if (c == "#") {
                return document.getElementById(selector.substring(1, selector.length)); //返回相应的元素
            }
        }


    //封装class选择器
    function $(selector) {
        var className = selector.substring(1); //从索引为1的元素往后取
        //判断浏览器是否支持getElementsByClassName
        if (document.getElementsByClassName) {
            return document.getElementsByClassName(className)
            //document.querySelectorAll('.cls')兼容性有问题
        } else {
            //document.getElementsByTagName('*')+正则表达式
            //\s空白字符 ^开始 $结束
            var reg = new RegExp('^|\\s' + className + '$|\\s');
            var elems = document.getElementsByTagName("*"); //获取页面中所有元素
            var arr = []; //保存获取到的指定className的元素
            for (var i = 0; i < elems.length; i++) {
                if (reg.test(elems[i].className)) { //如果和模式匹配上
                    arr.push(elem[i]);
                }
            }
            return arr;
        }
    }

    //封装标签选择器  
    function $(element) {
        return document.getElementsByTagName(element);
    }
</script>