JavaScript中querySelector与querySelectorAll的使用详解

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标准）。