javascript之querySelector和querySelectorAll使用介紹
一開始很多人都會拿jquery的選擇器來跟這兩個api做對比(我也是),比較異同本來沒事,但卻使一些同學對這兩個api在瀏覽器中的實現(xiàn)產(chǎn)生了誤解,特別是再dom element上調(diào)用此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')的實現(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的)。
相關文章
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對比)
很多時候需要用到限制文本框的數(shù)字輸入,試過許多方法,都不太理想,遂決定自己實現(xiàn)一個來玩玩,接下來介紹曾經(jīng)使用過的方法與自定義方法的對比,感興趣的朋友可以了解下啊2013-01-01CocosCreator怎樣使用cc.follow進行鏡頭跟隨
這篇文章主要介紹了CocosCreator怎樣使用cc.follow進行鏡頭跟隨,想要學習follow的同學,一定要看一下2021-04-04JavaScript前端控制網(wǎng)絡并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請求的并發(fā)數(shù),即限制同一時間內(nèi)進行處理的請求數(shù)量,是一種有效的策略,本文將詳細介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對大家有所幫助2023-12-12pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet p
這篇文章主要為大家介紹了pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies報錯解決2023-06-06