美文网首页
js dom元素选择器

js dom元素选择器

作者: 何必自找失落_ | 来源:发表于2016-12-06 17:34 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js的选择器集合</title>
    </head>
    <body>
        <div class="class reg">
            <div id="div" class="class">
                <div>
                    <a class="class" href="#"></a>
                    <div id="wo">dada</div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function (){
                var get = {
                    "getclass" : function (className,parent){
                        var eles = this.gettag("*",parent);
                        var reg = new RegExp("(^|\\s)"+className+"(\\s|$)");
                        var arr = [];
                        for( var i = 0 , len = eles.length ; i < len ; i ++ ){
                            if (reg.test(eles[i].className)) {
                                arr.push(eles[i]);
                            }
                        }
                        return arr;
                    },
                    "gettag" : function (tag,parent){
                        return ( parent || document).getElementsByTagName(tag);
                    },
                    "getid" : function (id,parent){
                        return ( parent || document).getElementById(id);
                    },
                    "find" : function (selector,parent){
                        var parent = parent || document;
                        //去除空行
                        var selector = selector.replace(/(^\s*)|(\s*$)/g,"");
                        var parts = selector.split(/\s+/);
                        //这次需要查找的元素 它的形式可能是 .class #id div 这种形式
                        var eles =  parts[0];
                        switch (eles.charAt(0)) {
                            case ".":
                            eles = get.getclass(eles.substring(1),parent);
                                break;
                            case "#":
                            var str = eles;
                            eles = [];
                            eles[0] = get.getid(str.substring(1));
                                break;
                            default:
                            eles = get.gettag(eles,parent);
                                break;
                        }
                        // 截取第二个元素之后的数组 并转成字符串
                        // var test = test.splice(1).join(" ");
                        var test = "";
                        for( var i = 1 ; i < parts.length ; i ++ ){
                            test += parts[i] + " ";
                        }
                        // 承接数组
                        var arr = [];
                        for( var i = 0 , len = eles.length ; i < len ; i ++ ){
                            if (test) {
                                var arr1 = this.find(test,eles[i]);
                                arr = arr.concat(arr1);
                            }else{
                                arr.push(eles[i]);
                            }
                        }
                        return arr;
                    }
                }
                console.log(get.find('body #div div'));
            }
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:js dom元素选择器

          本文链接:https://www.haomeiwen.com/subject/nbprmttx.html