快捷導(dǎo)航

javascript之querySelector和querySelectorAll使用說(shuō)明

更新時(shí)間：2011年10月09日 00:09:44 作者：

其實(shí)關(guān)于querySelector和querySelectorAll的介紹說(shuō)明很多,在此主要是做個(gè)記錄

一開(kāi)始很多人都會(huì)拿jquery的選擇器來(lái)跟這兩個(gè)api做對(duì)比（我也是），比較異同本來(lái)沒(méi)事，但卻使一些同學(xué)對(duì)這兩個(gè)api在瀏覽器中的實(shí)現(xiàn)產(chǎn)生了誤解，特別是再dom element上調(diào)用此api時(shí)。

下面是我的jsFiddle示例，我就以此展開(kāi)說(shuō)明：

復(fù)制代碼代碼如下:

 
(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(); 
})(); 

誤解就在于對(duì)$('inner').querySelectorAll('#main h4.inside')的實(shí)現(xiàn)理解，不少人一開(kāi)始幾乎都認(rèn)為是直接從div[id='inner']的孩子中進(jìn)行查找（我也是），這個(gè)#main有點(diǎn)礙眼。實(shí)際上它還是根據(jù)selector string從整個(gè)document上查找，再返回屬于div[id='inner']的子節(jié)點(diǎn)。很多人會(huì)疑惑，那么為什么不按照直接按父節(jié)點(diǎn)找子節(jié)點(diǎn)的方式來(lái)實(shí)現(xiàn)呢？就像elem.getElementsByTagName，我的想法是靈活selector string吧。

querySelector只返回匹配的第一個(gè)元素，如果沒(méi)有匹配項(xiàng)，返回null。

querySelectorAll返回匹配的元素集合，如果沒(méi)有匹配項(xiàng)，返回空的nodelist(節(jié)點(diǎn)數(shù)組)。

并且返回的結(jié)果是靜態(tài)的，之后對(duì)document結(jié)構(gòu)的改變不會(huì)影響到之前取到的結(jié)果。

目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。

您可能感興趣的文章: