HTML5 practice and Analysis of CSS selector querySelectorAll (2)

Previously, we introduced the selector querySelector (1) In HTML5 ). Today, we will continue to share with you the newly added selector querySelectorAll (2) in HTML5 ).

The parameters received by the querySelectorAll () method are also CSS delimiters, but all matching elements are returned, while the querySelector () method returns the First Matching Element.

The querySelectorAll () method returns a NodeList instance. NodeList is an instance with all attributes and methods. Its underlying implementation is equivalent to a snapshot of a group of elements, and is not a dynamic query of documents for search. This avoids performance problems that may occur when NodeList objects are used.

As long as the parameters in the querySelectorAll () method are valid, no matter how many elements are found in this method, a NodeList object is returned. If no matching element is found, NodeList is null. The following is a small example to better illustrate.

 

 

HTML code

<Div id = "all" class = "all"> <I> Menglong xiaozhan </I> <p class = "box"> <em class = "span"> Menglong xiaozhan </em> </p> <I class = "span"> Menglong xiaozhan </I> <p class = "box"> <em> Menglong xiaozhan </em> </p> </div>

 

JavaScript code

// Obtain all <I> elements in the <div> class named all, similar to getElementsByTagName ("I") var I = document. getElementById ("all "). querySelectorAll ("I"); // obtain all elements of the class named span. var span = document. querySelectorAll (". sppan "); // obtain all <em> element var em = document in all <p> labels. querySelectorAll ("p em ");

 

To obtain each element in the returned NodeList, you can use the item () method or square brackets syntax. The following is a small example.

 

 

HTML code

 

<Div id = "all" class = "all"> <I> Menglong xiaozhan </I> <p class = "box"> <em class = "span"> Menglong xiaozhan </em> </p> <I class = "span"> Menglong xiaozhan </I> <p class = "box"> <em> Menglong xiaozhan </em> </p> </div>

JavaScript code

// Obtain all <em> elements var em = document in all <p> tags. querySelectorAll ("p em"); var I, len, emOne; for (I = 0, len = em. length; I <len; I ++) {emOne = em [I]; // or em. item (I); emOne. className = "meng ";}

 

If an unsupported selectorall or a syntax error exists in the parameters of the querySelectorAll () method, the querySelectorAll () method returns an error.

The CSS selector -- querySelectorAll () for HTML5 practice and analysis is introduced here. The querySelectorAll () method is only a small part of html5. On the road to HTML5 learning, we digest every small piece of knowledge and step by step towards the end.