本文详细解析JavaScript中querySelector和querySelectorAll两个API的使用方法与核心区别。重点澄清了在DOM元素上调用这些方法时，选择器字符串仍基于整个document进行匹配，而非仅局限于父节点子集。文章通过代码示例说明了两者在返回结果类型、静态快照特性及浏览器兼容性方面的具体表现，帮助开发者避免常见误解。
querySelector与querySelectorAll的核心区别
起初，许多开发者习惯将jQuery的选择器与这两个原生API进行对比，我也曾如此。探讨它们的异同本身并无不妥，但这种做法容易让部分同学对这两个API在浏览器中的实际实现机制产生误解，尤其是在DOM元素上直接调用这些方法时。
以下通过一个jsFiddle示例来展开具体说明：
相关代码如下：
(function(global) {
global.doc = document;
global.body = doc.getElementsByTagName('body')[0];
global.$ = function(id) {
return doc.getElementById(id);
}
global.Logger = function(id) {
this.logElem = $(id);
this.logArr = [];
};
global.Logger.prototype = {
constructor: global.logger,
append: function(comment) {
this.logArr.push('<p>' + comment + '</p>');
},
flush: function() {
this.logElem.innerHTML = this.logArr.join('');
},
clear: function() {
this.logElem.innerHTML = '';
this.logArr = [];
}
};
} })(this);
(function() {
var logger = new Logger('log');
var items = $('inner').querySelectorAll('#main h4.inside');
logger.append(items.length);
for(var i = 0, len = items.length; i < len; i++) {
logger.append(items[i].innerHTML);
}
logger.flush();
})(); DOM元素上调用的实现原理
常见的误解在于对$('inner').querySelectorAll('#main h4.inside')这一实现方式的理解。许多人起初几乎都以为它是直接从id为'inner'的div元素的子节点中进行查找（包括我最初也是这么认为的），这导致'#main'这个选择器看起来有些突兀。实际上，它依然是根据选择器字符串在整个document中进行查找，然后筛选出属于div[id='inner']的子节点。很多人会疑惑，为什么不直接按照父节点找子节点的方式来实现呢？就像elem.getElementsByTagName那样。我的理解是，这样做是为了支持更灵活的选择器字符串。
querySelector仅返回匹配的第一个元素，如果没有找到匹配项，则返回null。
querySelectorAll返回匹配的元素集合，如果没有找到匹配项，则返回一个空的NodeList（节点数组）。
此外，返回的结果是静态的，这意味着后续对document结构的修改不会影响之前获取到的结果集合。
目前，IE8及以上版本、Firefox和Chrome都支持此API（需要注意的是，在IE8中，选择器字符串仅支持CSS2.1标准）。