美文网首页
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>

相关文章

  • ## JQuery选择器

    一、概要 使用jQuery 选择器选取元素,并封装为jQuery对象在JS原生DOM中,我们想要对DOM元素进行操...

  • jQuery选择器(全面)

    JS提供操作DOM元素的方法只有两种 jQuery选择器ID选择器 类选择器 标签选择器 后代选择器 父子选择器 ...

  • jQuery选择器

    1.JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: 2.jQuery选择器 ...

  • js dom元素选择器

  • jquery学习

    $("selector")支持所有css选择器 $("selector",dom)从指定dom中根据选择器查找元素...

  • jQuery DOM教辅

    jQuery 常用的函数 一、jQuery DOM 元素方法 .get() 获得由选择器指定的 DOM 元素。 ....

  • jQuery中的选择器

    基本选择器 层次选择器 通过DOM元素之间的层次关系来获取特定元素,如后代元素,子元素,相邻元素和兄弟元素. 过滤...

  • web自动化_dom

    js不能直接操作html元素,比如要修改元素的样式,需要通过dom对象操作html元素js ->dom对象->调用...

  • 移动端性能优化(4)

    脚本类 尽量使用id选择器 选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。 合理缓存DOM对象 ...

  • Dom操作02

    dom元素的操作 查询dom document.querySelector(选择器的名字) document.bo...

网友评论

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

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