JavaScript advanced Selector Queryselector and Queryselectorall Comprehensive parsing _ Basics

The Queryselector and Queryselectorall methods are defined in the selectors API specification of the consortium. Their role is to conveniently locate the specified element in the document based on the CSS selector specification.

They are now supported by almost all mainstream browsers. including IE8 (incl.) version, 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; };

From the interface definition you can see that document, DocumentFragment, element all implement the Nodeselector interface. That is, these three types of elements are owned by two methods. Queryselector and Queryselectorall parameters must be strings that conform to the CSS selector. The difference is that Queryselector returns an object, Queryselectorall returns a collection (NodeList).

Get the elements of page I property D as test:

1 document.getElementById ("test");
2 Document.queryselector ("#test");
3 Document.queryselectorall ("#test") [0];

Gets the element with the page class attribute of "red":

Document.getelementsbyclassname (' red ')
document.queryselector ('. Red ')
document.queryselectorall ('. Red ') )

Ps:

Note, however, that the elements in the returned NodeList collection are Non-real-time (no-live) and want to distinguish between real-time and non-real-time return results, see the following example:

 <div id= "Container" >
   <div></div>
   <div></div>
 </div>

First, select the element
Container=document.getelementbyid (' #container ') in the page with ID container;
Console.log (container.childNodes.length)//result is 2
//Then add a child element to it by code
Container.appendchild ( Document.createelement (' div '));
This element is not only added to the page, here the variable container also automatically updated
console.log (container.childNodes.length)//result is 3

The above example is a good way to understand what elements are updated in real time. document.getElementById returns the real time result, after adding a child element to it, gets the number of all the child elements again, has been updated by the original 2 to 3 (here is not considered some browsers such as Chrome will also resolve the white space as a child node).

Element.queryselector and Element.queryselectorall and jquery (Element). Find (Selector) selector difference:

<span style= "font-size:15px" ><divid= "test1" ><ahref= "http://www.jb51.net/" > Cloud-dwelling Community </a></ div> 
<pid= "Bar" >111</p> 
<script> 
var d1 = document.getElementById (' test1 '), 
Obj1 = D1.queryselector (' div a '), 
obj2 = D1.queryselectorall (' div a '); 
OBJ3 = $ (D1). Find (' div a '); 
Console.log (obj1)//<a href= "http://www.jb51.net/" > Yun-Habitat Community </a> 
Console.log (obj2.length)//1 
Console.log (obj3)//null 
</script> 

queryselectorall Find all nodes in the document that match the selector description including the element itself

jQuery (Element). Find (selector) finding all nodes in the document that match the selector description does not include the element itself

Above this JavaScript advanced selector Queryselector and Queryselectorall comprehensive analysis is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.