提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

再谈querySelector和querySelectorAll的区别与联系

区别 联系 再谈 querySelector querySelectorAll
2023-06-13 09:14:33 时间
先按W3C的规范来说这两个方法应该返回的内容吧：
querySelector：

returnthefirstmatchingElementnodewithinthenode"ssubtrees.Ifthereisnosuchnode,themethodmustreturnnull.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）

querySelectorAll：

returnaNodeListcontainingallofthematchingElementnodeswithinthenode"ssubtrees,indocumentorder.Iftherearenosuchnodes,themethodmustreturnanemptyNodeList.（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）

使用方法：
复制代码代码如下:

varelement=baseElement.querySelector(selectors);
varelementList=baseElement.querySelectorAll(selectors);

这在BaseElement为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement为一个普通的domNode的时候（支持这两个方法的domNode），浏览器的实现就有点奇怪了，举个例子：
复制代码代码如下:

<divclass="test"id="testId">
<p><span>Test</span></p>
</div>
<scripttype="text/javascript">
vartestElement=document.getElementById("testId");
varelement=testElement.querySelector(".testspan");
varelementList=document.querySelectorAll(".testspan");
console.log(element);//<span>Test</span>
console.log(elementList);//1
</script>

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];因为作为baseElement的testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，AndrewDupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：
复制代码代码如下:
varoldContext=context,
old=context.getAttribute("id"),<BR>nid=old||id,
try{
if(!relativeHierarchySelector||hasParent){
returnmakeArray(context.querySelectorAll("[id=""+nid+""]"+query),extra);
}
}catch(pseudoError){}<BR>finally{
if(!old){oldContext.removeAttribute("id");}
}

先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id="__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll("[id=""+nid+""]"+query；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute("id");
，Mootools的实现：
复制代码代码如下:
varcurrentId=_context.getAttribute("id"),slickid="slickid__";
_context.setAttribute("id",slickid);
_expression="#"+slickid+""+_expression;
context=_context.parentNode;

Mootools和Jquery类似：只不过slickid="slickid__"；其实意义是一样的；

方法兼容性：FF3.5+/IE8+/Chrome1+/opera10+/Safari3.2+;

IE8：不支持baseElement为object；

非常感谢大牛JK的回复，提供了另外一种方法。

相关文章