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