The querySelector and querySelectorAll methods are defined in the W3C Selectors API specification. Their function is to conveniently locate specified elements in the document according to the CSS selector specification.
Currently, they are supported by almost mainstream browsers. Including IE8 (inclusive) and above versions, 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, and Element all implement the NodeSelector interface. That is, all these three types of elements have two methods. The parameters of querySelector and querySelectorAll must be strings that conform to css selector. The difference is that querySelector returns an object, and querySelectorAll returns a collection (NodeList).
Get the element whose page I attribute D is test:
1 document.getElementById("test");2 document.querySelector("#test");3 document.querySelectorAll("#test")[0];Get the element with the page class attribute "red":
document.getElementsByClassName('red')document.querySelector('.red')document.querySelectorAll('.red')document.querySelectorAll('.red')ps:
But it should be noted that the elements in the returned nodeList collection are non-live. If you want to distinguish between what is a real-time non-real-time return result, please see the following example:
<div id="container"> <div></div> <div></div> </div>
//First select the element with id container in the page with container=document.getElementById('#container');console.log(container.childNodes.length)//The result is 2//Then add a child element to it through the code container.appendChild(document.createElement('div'));//This element is not only added to the page, but the variable container here also automatically updates console.log(container.childNodes.length)//The result is 3Through the example above, we can understand what elements that will be updated in real time. document.getElementById returns the real-time result. After adding a child element to it, the number of all child elements is obtained again, and the original 2 has been updated to 3 (not considering that some browsers such as Chrome will also parse the blank into a child node).
The difference between Element.querySelector and Element.querySelectorAll and jQuery(element).find(selector) selectors:
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="//www.VeVB.COM/">Wulin.com</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="//www.VeVB.COM/">Wulin.com</a> console.log(obj2.length)//1 console.log(obj3)//null </script> </SPAN>querySelectorAll finds all nodes that meet the selector description in the document, including the Element itself
jQuery(element).find(selector) Find all nodes that meet the selection description in the document and do not include the Element itself
The above comprehensive analysis of the above javascript advanced selector querySelector and querySelectorAll is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.