Talking about the difference and connection _javascript skill of queryselector and Queryselectorall

First, according to the rules of the World of the world, these two methods should return the content:
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 order. 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)

How to use:

Copy Code code as follows:

var element = Baseelement.queryselector (selectors);
var elementlist = Baseelement.queryselectorall (selectors);

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:

Copy Code code as follows:

<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:

Copy Code code as follows:

var Oldcontext = context,
Old = Context.getattribute ("id"),<br> nid = Old | | Id
try {
if (!relativehierarchyselector | | hasparent) {
Return Makearray (Context.queryselectorall ("[id= '" + Nid + "]" + query), extra);
}
The catch (Pseudoerror) {} <br>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:

Copy Code code as follows:

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

MooTools and jquery are similar: just slickid = ' slickid__ '; in fact, the meaning is the same;

Method Compatibility: Ff3.5+/ie8+/chrome 1+/opera 10+/safari 3.2+;

IE 8: BaseElement is not supported as object;

Thanks to Daniel JK's reply, it offers another method.