The difference between Queryselectorall and Jquery.find and Htmlcollection

Queryselector and Queryselectorall

Specification definition

The Queryselector and Queryselectorall methods are defined in the selectors API Level 1 specification. Their role is to conveniently locate the specified element in the document according to the CSS selector specification.

They are now supported by almost all major browsers. Includes IE8, Firefox, Chrome, Safari, Opera.

Queryselector and Queryselectorall define the following interfaces in the specification:

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;};

In fact, there are two methods for any instance object of NodeList, Element, and the instance object of Document DocumentFragment. Such as:

• Document.queryselectorall
• Document.queryselector
• Nodelist.queryselectorall
• Nodelist.queryselector
• Element.queryselectorall
• Element.queryselector

Queryselectorall returns all node content that conforms to the Selector condition, is a nodelist;queryselector only returns the first node content that conforms to the Selector condition, and is node.

The Selector of JQuery

So how are we compatible with the lower version of the browser? Do not worry, there is JQuery, this hot stuff early to realize the selectors.

JAVASCRIPT JQuery Code:var alerts = $ ("p.warning, P.error");//return [<p class= "Warning" >this is a sample warning</p >,<p >this is a sample error</p>]

This is consistent with the use and Queryselectorall results.

The difference between the two

Then use Element.queryselectorall to see:

JAVASCRIPT Code:var foo= document.getElementById ("foo"); Foo.queryselectorall ("div > P");//return [<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")//Return []

Play smashed ... Why does the two return inconsistent results?

Let's look at the meaning of the incoming selector string, is it not looking for the P tag under the div tag under the <div id= "foo" > node?

<div id= "foo" > Node there is no div tag, of course, should return an empty nodeList. The result of JQuery's return is correct. Is it strange that all browsers that have implemented the Queryselector and Queryselectorall methods have not complied with the specification? This is too pit daddy!!

Wait, let's see what the spec definition says:

Queryselectorall  another sentence : Even though the method is invoked on a element, selectors is still evaluated in the context of the entire Document.  

In combination, the specification is defined as the selector to find all nodes that conform to the selector description in the entire document, to determine whether the returned NodeList is within the element subtree, and if it is within the element subtree, the nodes are composed of NodeList returned, The sort needs to be sorted with the original node of the document.

According to this definition, we look at the browser implementation:

• First Find all the P subnodes in the DIV tag in the document, they are [<p class= "Warning" >this is a sample warning</p> <p >this is a sample E rror</p>,<p>...</p>];
• Then compare the <div id= "foo" > node's subtree to see if these p elements are included. <div id= "foo" > Node subtree contains only [<p class= "Warning" >this is a sample warning</p>, <p >this is a sample err Or</p>] then return to them. This is consistent with the result of the previous problem example return.

So, the browser implementation is correct? Well, we can do a more outrageous test to see:

JAVASCRIPT Code:var foo= document.getElementById ("foo"); Foo.queryselectorall ("HTML body div > P");//return [<p class= "Warning" >this is a sample warning</p>,<p >this is a sample error</p>]

This example is the direct sub-label P for the DIV tag in the body tag in the HTML tag under the <div id= "foo" > node.

His return results are still [<p class= "Warning" >this is a sample warning</p>,<p >this was a sample error</p>]

This is consistent with the specification statement.

So, the browser itself does not have a problem, but jquery has a problem? In fact, this is not true, JQuery itself has not announced compliance with the selectors API Level 1 specification to achieve the search results, his selector API implementation is private.

For the selector range under element, JQuery thinks that it is looking from the current element and returns a conforming result set. The specification points out that the selector is only for the current document, and the selected result set is compared to the subtree of the current element.

It is because of these differences that they result in inconsistent returns.

The relationship between NodeList and htmlcollection?

The DOM collection interface in history. The main difference is that Htmlcollection is a collection of elements and NodeList is a collection of nodes (that is, it can contain elements or contain text nodes). So Node.childnodes returns NodeList, while Node.children and Node.getelementsbyxxx return htmlcollection.

The only thing to note is that although the Queryselectorall returned is NodeList, it is actually a collection of elements and is static (the Htmlcollection and NodeList returned by the other interfaces are live). In fact, in the future the browser will add the Queryall interface instead of the current Queryselectorall, returning Elements is the subclass of the array (so you can use the foreach, map, and so on array method). Historically, dom1, dom2 and even DOM3 standards are divided into core/xml and HTML parts. getElementsByTagName is in the core (that is, XML), so it is impossible to return to htmlcollection. But now the DOM standard has no core and HTML, reflecting the implementation of the browser.
， There is a difference between nodelist and htmlcollection that the former has no Nameditem () method The latter is there

The difference between Queryselectorall and Jquery.find and Htmlcollection