JavaScript advanced selector Queryselector and Queryselectorall

The Queryselector and Queryselectorall methods are defined in the selectors API 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; };

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

Gets the element with page I property D as test:

1. Document. getElementById("test");
2. Or
3. Document. Queryselector("#test");
4. Document. Queryselectorall("#test") [0];

Gets the element with the Page class property of "red":

1. Document. Getelementsbyclassname(' Red ')
2. Or
3. Document. Queryselector('. Red ')
4. Or
5. Document. Queryselectorall('. Red ')

Differences between the Element.queryselector and Element.queryselectorall and the jquery (element). Find (selector) selector:

2. <divid="Test1"><ahref="http://www.hujuntao.com/"> design Hive < /a></div>
4. <pid="Bar">111</p>
6. <script>
8. var d1 = document. getElementById(' test1 '),
10. Obj1 = D1. Queryselector(' div a '),
12. Obj2 = D1. Queryselectorall(' div a ');
14. Obj3 = $(D1). Find(' div a ');
16. Console. Log(obj1)//<a href= "http://www.hujuntao.com/" > Design hive </a>
18. Console. Log(obj2. Length)//1
20. Console. Log(obj3)//null
22. </script>

Queryselectorall Find all the nodes within the document that match the selector description include the element itself
JQuery (Element). Find (selector) Find all the nodes within the document that match the selector description do not include the element itself

JavaScript advanced selector Queryselector and Queryselectorall