强大大

导航

querySelectorAll选择器的js实现

自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情。但是某些浏览器还是不支持。使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如下

    function getByClass(sele,parent){
            var parent = parent||document;
            if(parent.querySelectorAll){
                return parent.querySelectorAll(sele);
            }else if(parent.getElementsByClassName){
                return parent.getElementsByClassName(sele.slice(1));
            }else{
                var tags = parent.getElementsByTagName("*");
                var targets=[];
                for(var i=0;i<tags.length;i++){
                    if(tags[i].className.indexOf(sele.slice(1))>-1){
                        targets.push(tags[i]);
                    }
                }
                return targets;
            }
        }
        function find(sele,parent){
            var parent=parent||document;
            // console.log("sele:",sele,";parent:",parent);
            var selectorArr = sele.split(/\s+/);
            var selector = selectorArr.shift();
            // console.log("selector:",selector);
            var targets=[];
            if(selector.indexOf("#")>-1){
                targets.push(document.getElementById(selector.slice(1)));
            }else if(selector.indexOf(".")>-1){
                targets=getByClass(selector,parent);
            }else{
                targets = parent.getElementsByTagName(selector);
            }
            var result=[];
            if(selectorArr.length>0){
                for(var i=0;i<targets.length;i++){
                    var tempResult=Array.prototype.slice.call(find(selectorArr.join(" "),targets[i]),0);
                    result=result.concat(tempResult);
                }
            }else{
                return targets;
            }
            return result;
        }

原理是将网友传入的参数分解,前面的通过迭代选择不断的更新父元素,最后一个选择器就是在父元素的子元素中选择匹配的元素。

案例网址:http://imgad0.pconline.com.cn/ivy/image/20172/21/14876672047970.html

posted on 2017-02-21 16:54  强大大  阅读(486)  评论(0编辑  收藏  举报