querySelectorAll 与jquery.find 与htmlcollection 的区别

querySelector 和 querySelectorAll

规范定义

querySelector 和 querySelectorAll 方法是 W3C Selectors API Level 1规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口：

module dom {
 [Supplemental, NoInterfaceObject]
 interface NodeSelector {
  Element querySelector(in DOMString selectors);
  NodeList querySelectorAll(in DOMString selectors);
 };
 Document implements NodeSelector;
 DocumentFragment implements NodeSelector;
 Element implements NodeSelector;
};

其实就是任何 NodeList 、Element 的实例对象和 Document DocumentFragment 的实例对象都有这两个方法。如：

• document.querySelectorAll
• document.querySelector
• nodeList.querySelectorAll
• nodeList.querySelector
• element.querySelectorAll
• element.querySelector

querySelectorAll 返回符合 Selector 条件的所有节点内容，是个 NodeList；querySelector 仅返回符合 Selector 条件的第一个节点内容，是个 Node。

JQuery 的 Selector

那我们怎么兼容低版本的浏览器呢？不用着急，有 JQuery 呢，这个火爆的东东早早就实现了 Selectors。

JAVASCRIPT JQuery CODE:
var alerts = $("p.warning, p.error");
// 返回 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]

这与使用 和querySelectorAll 结果一致。

两者间差异

再用用 element.querySelectorAll 看看：

JAVASCRIPT CODE:
var foo= document.getElementById("foo");
foo.querySelectorAll("div > p");
// 返回 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]
        

JAVASCRIPT JQuery CODE:
var foo= document.getElementById("foo");
$(foo).find("div > p")
// 返回 []

玩砸了……为什么两者返回结果不一致了呢？

我们看下传入的选择器字符串含义，不就是在 <div id="foo"> 节点下寻找 div 标签下的 p 标签么？

<div id="foo"> 节点下没有 div 标签了，当然应该返回一个空 nodeList。JQuery 返回的结果是正确的。很奇怪，难道说所有实现了 querySelector和 querySelectorAll 方法的浏览器都没遵守规范？这也太坑爹了！！

等等，我们还是先看看规范定义怎么说：

querySelectorAll : when invoked, return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order.
还有一句 :Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document.  

结合起来看，规范定义为选择器在以整个文档为基准，查找全部符合选择器描述的节点，判断返回的 NodeList 是否在 Element 子树内，如果是在 Element 子树内，则这些节点组成 NodeList 返回，其排序需与文档原始节点排序一致。

根据这个定义，我们看浏览器实现：

• 先是在文档中找到所有处于 div 标签内的 p 子节点，他们是 [<p class="warning">This is a sample warning</p>, <p >This is a sample error</p>,<p>...</p>]；
• 然后对比 <div id="foo"> 节点的子树中是否含有这些 p 元素。<div id="foo"> 节点的子树中仅含有[<p class="warning">This is a sample warning</p>, <p >This is a sample error</p>]，那么就返回他们吧。这与之前问题例子返回结果一致。

这么说，浏览器实现没错？好吧，我们可以再做个更离谱的测试来看看：

JAVASCRIPT CODE:
var foo= document.getElementById("foo");
foo.querySelectorAll("html body div > p");
// 返回 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]

这次的例子是在 <div id="foo"> 节点下寻找 html 标签中的body 标签中的 div 标签的直接子标签 P。

他的返回结果依然是 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]

这与规范说明一致。

这么说，浏览器本身实现并没有问题，而是JQuery有问题了？其实这也并不尽然，JQuery 本身并没有宣布遵守 W3C Selectors API Level 1 规范实现查找结果，他的选择器 API 实现是私有的。

对于 Element 下的选择器范围，JQuery 认为是从当前元素开始查找，返回符合的结果集。而规范恰恰指出的是选择器只针对当前文档，选择出的结果集再与当前元素的子树比较。

正是由于以上的不同导致了他们返回结果不一致。

NodeList 和 HTMLCollection之间的关系？

历史上的DOM集合接口。主要不同在于HTMLCollection是元素集合而NodeList是节点集合（即可以包含元素，也可以包含文本节点）。所以 node.childNodes 返回 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection 。

唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ，但是实际上是元素集合，并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）。事实上，将来浏览器将增加 queryAll 接口取代现在的 querySelectorAll，返回 Elements 是 Array 的子类（因而可以使用Array上的forEach、map等方法）。

历史上dom1、dom2乃至dom3标准都是分core/XML和HTML部分的。getElementsByTagName是在core里的（即XML也有的），所以不可能返回HTMLCollection。但是现在的dom标准已经不分core和html了，反映的是浏览器的实现。
，NodeList跟HTMLCollection有个差异是前者没有namedItem()方法后者是有的