[js] querySelector、querySelectorAll、getElementById。封装选择器-CSDN博客

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <ul id='a'>
            <li class='b'>0</li>
            <li class='b'>1</li>
            <li class='b'>2</li>
            <li class='b'>3</li>
            <li class='b'>4</li>
        </ul>
        <script>
            //querySelector返回该元素后代元素中，第一个匹配选择器参数的后代元素。
            //如果没有匹配项，则返回 null。否则，返回第一个匹配的元素。
            
            //a与aa是一样的
            var a = document.body.querySelector('#a');
            console.log(a);
            console.log(a.innerText);
            var aa = document.body.querySelector('ul');
            console.log(aa);
            console.log(aa.innerText);
            
            //b与bb是一样的
            var b = document.body.querySelector('.b');
            console.log(b);
            console.log(b.innerText);
            var bb = document.body.querySelector('li');
            console.log(bb);
            console.log(bb.innerText);
            
            //querySelectorAll返回值是一个NodeList对象,所以不推荐使用 for...in去遍历它(会遍历出其他无关属性)
            //想要在它身上使用数组方法,必须先把它转换为真正的数组.
            var c = document.body.querySelectorAll('#a');
            console.info(c);
            console.info(c.innerText); //undefined    
            for (var i = 0; i < c.length; i++) {
                console.info(c[i]);
            }
            //for...in除了nodelist还会遍历出其他信息
            for (var k in c) {
                console.warn(c[k]);
            }
            
            //var d = document.body.querySelectorAll('#a').querySelector('.b');//不能这样用
            var e = document.getElementById("a").querySelector('.b');
            console.log(e);
            var f = document.getElementById("a").querySelectorAll('.b');
            console.log(f);
            var g = document.getElementById("a");
            console.log(g);
            var h = document.body.querySelector("#a");
            console.log(h);
            var i = document.body.querySelectorAll("#a");
            console.log(i);            
        </script>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,
            body,
            ul,
            li {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
        </style>
    </head>

    <body>
        <ul>
            <li class='branch bb'>1

                <div>aaa</div>
            </li>
            <li class='aa'>2
                <div>b</div>
            </li>
            <li class='aa'>3
                <div>c</div>
            </li>
            <li class='aa'>4
                <div>d</div>
            </li>
        </ul>

        <ul>
            <li class='branch bb'>1

                <div>axx</div>
            </li>
            <li class='aa'>2
                <div>b</div>
            </li>
            <li class='aa'>3
                <div>c</div>
            </li>
            <li class='aa'>4
                <div>d</div>
            </li>
        </ul>

        <script>
            var a = document.querySelectorAll('#trunk');
            var b = document.querySelectorAll('.branch');
            var c = document.querySelectorAll('.aa');
            var d = document.querySelectorAll('li');
            console.log(a);
            console.warn(b);
            console.log(c);
            console.log(d);
            var QM = (function() {
                var $ = function(Selector, Action, Func, Bind) {
                    if (Action) {
                        var i = 0;
                        var picker = document.querySelectorAll(Selector);
                        if (Bind !== 'off') {
                            while (i < picker.length) {
                                picker[i].addEventListener(Action, Func);
                                ++i;
                            }
                        } else {
                            while (i < picker.length) {
                                picker[i].removeEventListener(Action, Func);
                                ++i;
                            }
                        }
                    } else {
                        return document.querySelectorAll(Selector)[0];
                    }
                }
                return $;
            })();
            //          QM('#trunk', 'click', function() {
            //              console.log(this.innerHTML);
            //          });
            //          QM('.aa div', 'click', function() {
            //              console.log(this.innerHTML);
            //          });    
            QM('ul .bb div', 'click', function() {
                console.log(this.innerHTML);
            });
            QM('.bb').innerHTML = 'fsdfj123';
            (function($) {
                $.c = 'plus';
                $.d = function(v) {
                    console.log('xxoo', v);
                }
            })(QM);
            console.log(QM.c);
            QM.d('xx->');
        </script>
    </body>

</html>

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id选择器
                if(regResult[1]) {
                    if(regResult[3]) {
                        if(typeof document.querySelector === "function") {
                            result.push(document.querySelector(regResult[3]));
                        }
                        else {
                            result.push(document.getElementById(regResult[3]));
                        }
                    }
                }
                //如果是class选择器
                else if(regResult[2]) {
                    if(regResult[3]) {
                        if(typeof document.getElementsByClassName === 'function') {
                            var doms = document.getElementsByClassName(regResult[3]);
                            if(doms) {
                                result = converToArray(doms);
                            }
                        }
                        //如果不支持getElementsByClassName函数
                        else {
                            var allDoms = document.getElementsByTagName("*") ;
                            for(var i = 0, len = allDoms.length; i < len; i++) {
                                if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                                    result.push(allDoms[i]);
                                }
                            }
                        }
                    }
                }
                //如果是标签选择器
                else if(regResult[3]) {
                    var doms = document.getElementsByTagName(regResult[3].toLowerCase());
                    if(doms) {
                        result = converToArray(doms);
                    }
                }
                return result;
            }

            function converToArray(nodes){
                  var array = null;         
                  try{        
                        array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器         
                  }catch(ex){
                      array = new Array();         
                      for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
                          array.push(nodes[i])         
                      }         
                  }      
                  return array;
          }