javascript之querySelector和querySelectorAll使用說明
更新時間：2011年10月09日 00:09:44 作者：
其實關(guān)于querySelector和querySelectorAll的介紹說明很多,在此主要是做個記錄
一開始很多人都會拿jquery的選擇器來跟這兩個api做對比（我也是），比較異同本來沒事，但卻使一些同學(xué)對這兩個api在瀏覽器中的實現(xiàn)產(chǎn)生了誤解，特別是再dom element上調(diào)用此api時。
下面是我的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();
})();
誤解就在于對$('inner').querySelectorAll('#main h4.inside')的實現(xiàn)理解，不少人一開始幾乎都認為是直接從div[id='inner']的孩子中進行查找（我也是），這個#main有點礙眼。實際上它還是根據(jù)selector string從整個document上查找，再返回屬于div[id='inner']的子節(jié)點。很多人會疑惑，那么為什么不按照直接按父節(jié)點找子節(jié)點的方式來實現(xiàn)呢？就像elem.getElementsByTagName，我的想法是靈活selector string吧。
querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節(jié)點數(shù)組)。
并且返回的結(jié)果是靜態(tài)的，之后對document結(jié)構(gòu)的改變不會影響到之前取到的結(jié)果。
目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。
下面是我的jsFiddle示例，我就以此展開說明：
復(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();
})();
誤解就在于對$('inner').querySelectorAll('#main h4.inside')的實現(xiàn)理解，不少人一開始幾乎都認為是直接從div[id='inner']的孩子中進行查找（我也是），這個#main有點礙眼。實際上它還是根據(jù)selector string從整個document上查找，再返回屬于div[id='inner']的子節(jié)點。很多人會疑惑，那么為什么不按照直接按父節(jié)點找子節(jié)點的方式來實現(xiàn)呢？就像elem.getElementsByTagName，我的想法是靈活selector string吧。
querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節(jié)點數(shù)組)。
并且返回的結(jié)果是靜態(tài)的，之后對document結(jié)構(gòu)的改變不會影響到之前取到的結(jié)果。
目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。
相關(guān)文章
這篇文章主要介紹了JS+DIV實現(xiàn)的卷簾效果,結(jié)合具體實例形式對比分析了javascript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性實現(xiàn)展開與折疊效果的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了js獲取頁面description的方法,涉及javascript操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
使用JavaScriptCore實現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個重要組成部分，主要是對JS進行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實現(xiàn)OC和JS交互的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
js判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷出兩個字符串最大子串的函數(shù)實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
在JavaScript中,將年月日轉(zhuǎn)換為時間戳可以通過多種方式實現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時間戳的操作方法,感興趣的朋友跟隨小編一起看看吧2024-08-08
復(fù)合樣式：currentStyle;注意在獲取復(fù)合樣式時要單獨寫,不能寫background,接下來將詳細介紹下實現(xiàn)方法，感興趣的你可不要錯過了哈2013-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單可拖動的模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信更新自家的Web開發(fā)工具后無法使用原生 Promise，下面這篇教程教你引入第三方庫來使用 Promise，文中通過圖文介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
JavaScript中transform實現(xiàn)數(shù)字翻頁效果
本文主要介紹JavaScript中利用transform實現(xiàn)數(shù)字翻頁效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
js中arguments,caller,callee,apply的用法小結(jié)
本篇文章只要是對js中arguments,caller,callee,apply的用法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01