JavaScript Tutorial: Queryselector () method

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).5 years of well-developed UI front-end framework!

CurrentlyIE8/9 and Firefox/chrome/safari/operaThe latest version has been supported for them.

The Queryselector () method takes a CSS query and returns the first descendant element of the matching pattern, and returns null if there are no matching elements. Take a look at the following example:

//gets the BODY element varbody=document.queryselector (" body ");   Gets the element Varmydiv=document.queryselecotr ("#myDiv") with ID mydiv;   Gets the first element that contains the class selected Varselected=document.queryselector (". selected"); Gets the first image element that contains a class button 

 

Varimg=document.body.queryselector (" Img.button "), when the Queryselector () method is applied on the document type, It tries to start the matching pattern from the document element. If applied with the element type, the query will only attempt to find a match from the descendant nodes of the element.

CSS queries can be complex or simplistic as needed. If there is a syntax error in the query or if the selector is not supported, then Queryselector () or throws an error.       
the
Queryselector () method also accepts the optional second parameter, which is a namespace parser, a function that accepts a namespace prefix and returns its associated URI, similar to:

varnsresolver=function (prefix) {switch (prefix) {case" W3CMM ": Return" http://www.w3cmm.com "; Other code here}}; 

 

　　
The namespace parser is useful for executing queries in XHTML documents embedded in other languages such as SVG or MathML, as well as in XML documents. The namespaces in a CSS query are specified using a pipe, as follows:

varsvgimage=document.queryselector (" Svg|svg ", function (prefix) {switch (prefix) {case:" SVG ": Return"/HTTP/   Www.w3.rog/2000/svg "; }   });

 

　　
This example returns the first SVG image by looking in the document for an element defined as <svg:svg>. When an SVG namespace prefix is encountered in a query, the namespace parser function is called to determine the URI. Without a namespace parser, an error is thrown because the query engine cannot recognize the SVG namespace prefix.
5 years of well-developed UI front-end framework!   
implementation differences between Queryselector and Queryselectorall in each browser

If you want to get the element with the Page class property "Red", you can use Document.queryselector ('. Red ') In addition to using document.getelementsbyclassname (' Red '). and Document.queryselectorall ('. Red ').

But the implementations of Element.queryselector and Element.queryselectorall have errors, as follows

<div id= "D1" > <p><a href=http://www.jcodecraeer.com>sina</a></p> </div> <     Script type= "Text/javascript" > function $ (ID) {return document.getElementById (ID);}     var D1 = $ (' D1 ');     var obj1 = d1.queryselector (' div a ');     var obj2 = D1.queryselectorall (' div a '); alert (OBJ1); -http://www.jcodecraeer.com alert (obj2.length); 1 </script>

 

In the browsers that support both methods, you can see that the" http://www.sina.com.cn/"and" 1 "are ejected separately. The description is queried to the desired element or collection of elements. This is not the same as the definition of the world wide, according to the definition should be within the scope of the element D1 "div a", and D1 there is no div inside. Therefore, you should return null, an empty collection, respectively. Only Document.queryselectorall is used in

jQuery1.4.2 and previous versions, and Element.queryselectorall is not used. jQuery1.4.3 after the use of Element.queryselectorall, but did a repair. A "#__sizzle__" is added to the selector to force it to find within the specified element (3903-3918 rows). Simplified under   well-developed UI front-end framework for 5 years ！   

function $ (ID) {return document.getElementById (ID);} var D1 = $ (' D1 '); var obj1 = d1.queryselector (' div a '); var obj2 = D1.queryselectorall (' div a '); var old = d1.id, id = d1.id = "__sizzle__";     try {var query = ' # ' + ID + ' div a ';     Alert (d1.queryselector (query)); Alert (d1.queryselectorall (query). length); } catch (e) {} finally {old? d1.id = Old:d1.removeAttribute ("id");}

 

The implementation is ingenious, the specified range of elements if there is an ID, leave it in old, "__sizzle__" assigned it as a temporary ID, before the selector "div a" to specify the look range is "#__sizzle__", that is, D1. The finally statement is eventually cleaned up, and if the specified range of elements itself has an ID to revert to old, no temporary id attribute "__sizzle__" is removed.

JavaScript Tutorial: Queryselector () method