Javascript原生实现id class tagName获取元素

最新推荐文章于 2022-03-17 21:51:11 发布

wx_lidysun

最新推荐文章于 2022-03-17 21:51:11 发布

阅读量868

点赞数

分类专栏： Javascript 文章标签： javascript jquery 元素js获取dom

本文链接：https://blog.csdn.net/lidysun/article/details/88847533

版权

Javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

JQuery固然很方便，但若抛开它，一样可以用原生javascript获取dom元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{margin:0;padding:0;}
            div{width:200px;line-height:20px;margin:5px auto 0;}
            div,p{padding:10px;border:2px solid #eee;}
        </style>
    </head>
    <body>
        <div id="box">
            div id = box
            <p>p标签</p>
        </div>
        <div class="box">div class = box</div>
        <div class="box">div class = box</div>
        <div>
          div标签
          <p>p标签</p>
        </div>
    </body>
    <script>
        /**
         * getElement获取元素
         * @param  {string} selector 选择器
         * @param  {boolean} returnArrayType 是否以数组形式返回HTMLcollection
         * @return {[HTML | HTMLCollection | Array]}
         */
        function getElement(selector,returnArrayType){
            if(selector){
                var reg = /^(?:\#([\w\-]+)|\.([\w\-]+)|([\w\-]+))$/,
                    result = reg.exec(selector),
                    id = result[1],
                    className = result[2],
                    tag = result[3],
                    arr = [],
                    element = null;
                if(result){
                    if(id){
                        element = document.getElementById(id);
                        returnArrayType && arr.push(element);
                    }
                    if(className){
                        // HTMLcollection伪数组
                        element = document.getElementsByClassName(className);
                        returnArrayType && arr.push.apply(arr,element);
                    }
                    if(tag){
                        // HTMLcollection伪数组
                        element = document.getElementsByTagName(tag);
                        returnArrayType && arr.push.apply(arr,element);
                    }
                    return returnArrayType ? arr : element;
                }
                return [];
            }else{
                throw '函数getElement参数(selector)错误!';
            }
        };

        getElement('#box').style.borderColor = '#999';

        getElement('.box',1).forEach(function(item){
            item.style.borderColor = '#ddd';
        });

        getElement('p',1).forEach(function(item){
            item.style.borderColor = '#ff6600';
        });

    </script>
</html>