Native powerful Dom Selector Queryselector Introduction _ Basics

In traditional JavaScript development, finding DOM is often the first headache for developers, and native JavaScript offers little dom options, limited to finding by tag, name, ID, and so on, which is clearly far from enough if you want to A more precise choice of rows is to have to use a regular expression that looks very cumbersome, or to use a library. In fact, all browser vendors now offer support for both Queryselector and Queryselectorall, and even Microsoft has sent IE 8 as a proxy to support this feature, Queryselector and Queryselectorall as another way to look up the DOM, greatly facilitates the developer, using them, you can quickly find the node you need like using CSS selectors.

The use of Queryselector and Queryselectorall is very simple, as the title says, it is the same as the CSS, for front-end developers, this is almost zero difficulty for a study. If we have a DIV with the ID test, you might want to get to this element as follows:

document.getElementById ("test");
Now let's try using a new method to get this DIV:

Document.queryselector ("#test");
Document.queryselectorall ("#test") [0];

Here's a small demo:

I'm a div with the ID test

The difference is not very good, but if it is a slightly more complex situation, the original method will become very troublesome, at this time the advantages of Queryselector and Queryselectorall play out. For example, in the following example, we will select the first child element p of the div with the class test in document, of course it is very awkward, but using this new method to select this element is simpler than describing it in words.

Document.queryselector ("Div.test>p:first-child");
Document.queryselectorall ("Div.test>p:first-child") [0];

Here's a small demo:

I'm the P tag in the layer

You should now have a good idea of the parameters in the Queryselector, Queryselectorall method, and yes, it receives exactly the same parameters as the CSS selector. The difference between Queryselector and Queryselectorall is that queryselector is used to get an element, and Queryselectorall can get multiple elements. Queryselector returns the first element that matches to, or Null if there are no matching elements. Queryselectorall returns an array that contains the matching elements, and the returned array is empty if there are no matching elements. In the last example of this article, we use Queryselectorall to add bold to all elements of class emphasis.

var emphasistext = Document.queryselectorall (". emphasis");
for (var i = 0, j = emphasistext.length I < J; i++) {
  emphasistext[i].style.fontweight = ' bold ';
}

This is the native method, compared to jquery faster, the disadvantage is IE6, 7 does not support.

The specification of the Consortium and the realization in the library

Queryselector:return the matching Element node within the node ' s subtrees. If there is no such node, the method must return NULL. (returns the first in the collection of matching selector in the subtree of the specified element node, if no match, returns null)

Queryselectorall:return a nodelist containing all of the matching Element nodes within the node ' s subtrees, in document or Der. If There are no such nodes, the method must return a empty nodelist. (returns the set of nodes in the subtree of the specified element node that match selector, using a depth-first lookup; If there is no match, this method returns an empty collection)

This is baseelement for document, there is no problem, the implementation of the browser is basically the same, but when the baseelement for a normal DOM node (supporting the two methods of DOM node), the browser implementation is a bit strange, As an example:

<div class= "test"  id= "TestID" > 
   <p><span>Test</span></p> 
</div> 
<script type= "Text/javascript" >   
   var  testelement= document.getElementById (' TestID '); 
   var  element = Testelement.queryselector ('. test span '); 
   var  elementlist = Document.queryselectorall ('. test span '); 
   Console.log (Element); <span>Test</span>
   Console.log (elementlist);//1  
</script>

As the consortium understands, this example should return: element:null;elementlist:[] because there is no selectors matching child node in the testelement of BaseElement. , but the browser seems to ignore the baseelement, only care about selectors, that is baseelement near document; This is not the same as our expected results, perhaps with the continuous upgrade of the browser, this problem will get stick!

Man's wisdom is always infinite, Andrew DuPont invented a way to temporarily fix this weird problem, which is to specify the ID of baseelement in front of the selectors, to limit the range of matches; This method is widely used in various popular frames;

The implementation of jquery:

var  oldcontext = context, old
= Context.getattribute ("id"  ),
nid = Old | | ID,

Try  {
	if  (!relativehierarchyselector | | hasparent) {
   	return  Makearray ( Context.queryselectorall ("[id= '"  + nid + "']"  + query), extra);
 	} 
catch (Pseudoerror) {} 
finally {
	if  (!old) {
	 	oldcontext.removeattribute ("id"  );
	}

Just look at the rest of the code and see how he does it; This code is a fragment of JQuery1.6, and when BaseElement has no ID, set an id = "__sizzle__" and then add it to the front of the selectors when you use it. Do the scope limit; Context.queryselectorall ("[id= '" + nid + "']" + query; Finally, because this ID itself is not baseelement should have, so, Also need to remove: Oldcontext.removeattribute ("id"); , the implementation of MooTools:

var  currentid = _context.getattribute (' id '), slickid = ' slickid__ ';
_context.setattribute (' id ', slickid);
_expression = ' # ' +  Slickid + ' +  _expression;
context = _context.parentnode;

MooTools is similar to jquery: only slickid = ' slickid__ '; method compatibility: Ff3.5+/ie8+/chrome 1+/opera 10+/safari 3.2+;ie 8 : BaseElement is not supported as object;