Comprehensive analysis of javascript advanced selectors querySelector and querySelectorAll_Basic knowledge

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 CSS selector specifications.

At present, almost all major browsers support them. Including IE8 (inclusive) and above, 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, these three types of elements all 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 I attribute D is test on the page:

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

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

document.getElementsByClassName('red')
document.querySelector('.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 real-time and non-real-time return results, please see the following example:

 <div id="container">
   <div></div>
   <div></div>
 </div>

//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

Through the above example, you can have a good understanding of what elements are that update in real time. document.getElementById returns the real-time result. After adding a sub-element to it, the number of all sub-elements is obtained again, which has been updated from the original 2 to 3 (this does not take into account that some browsers such as Chrome will blank also resolves to a child node).

The difference between Element.querySelector and Element.querySelectorAll and jQuery(element).find(selector) selector:

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.jb51.net/">脚本之家</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="http://www.jb51.net/">脚本之家</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN> 

querySelectorAll Find all nodes in the document that match the selector description, including the Element itself

jQuery(element).find(selector) Find all nodes in the document that match the selector description, excluding the Element itself

The above comprehensive analysis of the javascript advanced selectors querySelector and querySelectorAll is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.