The Difference and connection between querySelector and querySelectorAll

First, according to W3C specifications, the content of the two methods should be returned:
QuerySelector:

Return the first matching Element node within the node's subtrees. if there is no such node, the method must return null. (return the first child tree of the specified element node that matches the selector set. If no child tree matches the selector, return 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 an empty NodeList. (return the node set that matches the selector in the subtree of the specified element node, which adopts the depth-first pre-query. If no match exists, this method returns an empty set)

Usage: Copy codeThe Code is as follows: var element = baseElement. querySelector (selectors );
Var elementList = baseElement. querySelectorAll (selectors );

When BaseElement is document, there is no problem. The implementations of various browsers are basically the same. However, when BaseElement is a common dom Node (dom Node that supports these two methods), it is a bit strange to implement the browser. For example:Copy codeThe Code is 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>

According to W3C's understanding, this example should return: element: null; elementList: []; because the testElement of the baseElement does not match the selectors matched subnode at all; however, the browser seems to ignore baseElement and only care about selectors. That is to say, baseElement is close to document at this time. This is not consistent with our expected results. Maybe, as the browser continues to upgrade, this problem will get a unified explanation!
The wisdom of people is always infinite. Andrew Dupont invented a method to temporarily correct this strange problem, that is, to specify the baseElement id before selectors and limit the matching range; this method is widely used in various popular frameworks;
Jquery implementation:Copy codeThe Code is 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 );
}
} Catch (pseudo error) {}< BR> finally {
If (! Old) {oldContext. removeAttribute ("id ");}
}

Instead of looking at other aspects of the code, we only want to see how it implements this method. This code is a snippet of JQuery1.6. When baseElement does not have an ID, set an id = "_ sizzle _" for him, and add it to the front of selectors when it is used, so that the range is limited; context. querySelectorAll ("[id = '" + nid + "']" + query; finally, because the ID itself is not a baseElement, you also need to remove: oldContext. removeAttribute ("id ");
, Implementation of Mootools:Copy codeThe Code is as follows: var currentId = _ context. getAttribute ('id'), slickid = 'slickid __';
_ Context. setAttribute ('id', slickid );
_ Expression = '#' + slickid + ''+ _ expression;
Context = _ context. parentNode;

Mootools is similar to Jquery: Except slickid = 'slickid _ ', the meaning is the same;

Method compatibility: FF3.5 +/IE8 +/Chrome 1 +/opera 10 +/Safari 3.2 +;

IE 8: baseElement is not supported as an object;

I am very grateful to Daniel JK for his reply and provided another method.