javascript之querySelector和querySelectorAll使用介紹

一開始很多人都會拿jquery的選取器來跟這兩個api做對比（我也是），比較異同本來沒事，但卻使一些同學對這兩個api在瀏覽器中的實現產生了誤解，特別是再dom element上調用此api時。
下面是我的jsFiddle樣本，我就以此展開說明：
js代碼: 複製代碼 代碼如下:(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();
})();
(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();
})();

html代碼: 複製代碼 代碼如下:<div id="main">
<div id="inner">
<h4 class="inside">h4 inside 1</h4>
<h4 class="inside">h4 inside 2</h4>
<ul class="nodelist">
<li>list item one</li>
<li>list item two</li>
<li>list itme three</li>
</ul>
</div>
<div id="outter">
<h4 class="outside">h4 outside 1</h4>
<h4 class="outside">h4 outside 2</h4>
</div>
<div id="log"></div>

css代碼: 複製代碼 代碼如下:#log {
font-size: 10px;
}

誤解就在於對$('inner').querySelectorAll('#main h4.inside')的實現理解，不少人一開始幾乎都認為是直接從div[id='inner']的孩子中進行尋找（我也是），這個#main有點礙眼。實際上它還是根據selector string從整個document上尋找，再返回屬於div[id='inner']的子節點。很多人會疑惑，那麼為什麼不按照直接按父節點找子節點的方式來實現呢？就像elem.getElementsByTagName，我的想法是靈活selector string吧。
querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)。
並且返回的結果是靜態，之後對document結構的改變不會影響到之前取到的結果。
目前IE8+，ff，chrome都支援此api（IE8中的selector string只支援css2.1的）。