自從標準瀏覽器增加了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

總結

以上是生活随笔為你收集整理的querySelectorAll选择器的js实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。