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ō)明：
(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的）。
下面是我的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的）。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)的卷簾效果,結(jié)合具體實(shí)例形式對(duì)比分析了javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)展開(kāi)與折疊效果的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了js獲取頁(yè)面description的方法,涉及javascript操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
使用JavaScriptCore實(shí)現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個(gè)重要組成部分，主要是對(duì)JS進(jìn)行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實(shí)現(xiàn)OC和JS交互的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-03-03
js判斷出兩個(gè)字符串最大子串的函數(shù)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷出兩個(gè)字符串最大子串的函數(shù)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
在JavaScript中,將年月日轉(zhuǎn)換為時(shí)間戳可以通過(guò)多種方式實(shí)現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法,感興趣的朋友跟隨小編一起看看吧2024-08-08
js 獲取計(jì)算后的樣式寫(xiě)法及注意事項(xiàng)
復(fù)合樣式：currentStyle;注意在獲取復(fù)合樣式時(shí)要單獨(dú)寫(xiě),不能寫(xiě)background,接下來(lái)將詳細(xì)介紹下實(shí)現(xiàn)方法，感興趣的你可不要錯(cuò)過(guò)了哈2013-02-02
JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
微信更新自家的Web開(kāi)發(fā)工具后無(wú)法使用原生 Promise，下面這篇教程教你引入第三方庫(kù)來(lái)使用 Promise，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
JavaScript中transform實(shí)現(xiàn)數(shù)字翻頁(yè)效果
本文主要介紹JavaScript中利用transform實(shí)現(xiàn)數(shù)字翻頁(yè)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
js中arguments,caller,callee,apply的用法小結(jié)
本篇文章只要是對(duì)js中arguments,caller,callee,apply的用法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01