先按W3C的規范來說這兩個方法應該返回的內容吧：
querySelector：
return the first matching Element node within the node's subtrees. If there is no such node, the method must return null.（返回指定元素節點的子樹中匹配selector的集合中的第一個，如果沒有匹配，返回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. （返回指定元素節點的子樹中匹配selector的節點集合，采用的是深度優先預查找；如果沒有匹配的，這個方法返回空集合）
使用方法： 復制代碼 代碼如下:
var element = baseElement.querySelector(selectors);
var elementList = baseElement.querySelectorAll(selectors);
這在BaseElement 為document的時候，沒有什麼問題，各浏覽器的實現基本一致；但是，當BaseElement 為一個普通的dom Node的時候（支持這兩個方法的dom Node），浏覽器的實現就有點奇怪了，舉個例子：
復制代碼 代碼如下:
<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>
按照W3C的來理解，這個例子應該返回：element：null；elementList：[];因為作為baseElement的 testElement裡面根本沒有符合selectors的匹配子節點；但浏覽器卻好像無視了baseElement，只在乎selectors，也就是說此時baseElement近乎document；這和我們的預期結果不合，也許隨著浏覽器的不斷升級，這個問題會得到統一口徑！
人的智慧總是無窮的，Andrew Dupont發明了一種方法暫時修正了這個怪問題，就是在selectors前面指定baseElement的id，限制匹配的范圍；這個方法被廣泛的應用在各大流行框架中；
Jquery的實現：
復制代碼 代碼如下:
var oldContext = context,
old = context.getAttribute( "id" ),<BR> nid = old || id,
try {
if ( !relativeHierarchySelector || hasParent ) {
return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
}
} catch(pseudoError) {} <BR>finally {
if ( !old ) {oldContext.removeAttribute( "id" );}
}
先不看這點代碼中其他的地方，只看他如何實現這個方法的；這點代碼是JQuery1.6的片段；當baseElement沒有ID的時候，給他設置一個id = "__sizzle__”，然後再使用的時候加在selectors的前面，做到范圍限制；context.querySelectorAll( "[id='" + nid + "'] " + query ；最後，因為這個ID本身不是baseElement應該有的，所以，還需要移除：oldContext.removeAttribute( "id" );
，Mootools的實現：
復制代碼 代碼如下:
var currentId = _context.getAttribute('id'), slickid = 'slickid__';
_context.setAttribute('id', slickid);
_expression = '#' + slickid + ' ' + _expression;
context = _context.parentNode;
Mootools和Jquery類似：只不過slickid = 'slickid__'；其實意義是一樣的；
方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;
IE 8 ：不支持baseElement為object；
非常感謝大牛JK的回復，提供了另外一種方法。