Javascript advanced selector querySelector and querySelectorAll

The following small series will bring you a comprehensive analysis of the javascript advanced selector querySelector and querySelectorAll. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the querySelector and querySelectorAll methods defined in the W3C Selectors API specification. Their role is to easily locate specified elements in the document according to the CSS selector specification.

Almost all mainstream browsers currently support them. Includes IE8 or later versions, Firefox, Chrome, Safari, and 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, we can see that Document, DocumentFragment, and Element all implement the NodeSelector interface. That is, all three types of elements have two methods. The parameters of querySelector and querySelectorAll must be a string that conforms to css selector. The difference is that querySelector returns an object, and querySelectorAll returns a set (NodeList ).

Get the elements whose page I property D is test:

1 document.getElementById("test");2 document.querySelector("#test");3 document.querySelectorAll("#test")[0];

Obtain the elements whose class attribute is "red" on the page:

document.getElementsByClassName('red')document.querySelector('.red')document.querySelectorAll('.red')

Ps:

Note that the elements in the returned nodeList set are non-real-time (no-live). To distinguish between real-time and non-real-time returned results, see the following example:

// First select the element container = document whose id is container on the page. getElementById ('# iner'); console. log (container. childNodes. length) // The result is 2 // then add a sub-element container to it by code. appendChild (document. createElement ('P'); // This element is not only added to the page, but the variable container automatically updates the console. log (container. childNodes. length) // The result is 3.

Through the above example, we can understand what elements are updated in real time. Document. getElementById returns the real-time result. After adding a child element to it, you can obtain the number of all child elements again, it has been updated from the original two to three (Some browsers, such as Chrome, will resolve the blank space as a subnode ).

Differences between Element. querySelector and Element. querySelectorAll and jQuery (element). find (selector) selectors:

  
   
Foot home
   
 
   
    
111
    
Script var d1 = document. getElementById ('test1'), obj1 = d1.querySelector ('P A'), obj2 = d1.querySelectorAll ('P A'); obj3 = $(d1 ). find ('P A'); console. log (obj1) // script home console. log (obj2.length) // 1 console. log (obj3) // null script
   
   

QuerySelectorAllFind all nodes that comply with the selector description in the document, including the Element itself.

JQuery (element). find (selector)Find all nodes in the document that conform to the selector description, excluding the Element itself.

The above javascript advanced selector querySelector and querySelectorAll are all the content shared by the editor. I hope you can give us a reference and support for me.