欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript之querySelector和querySelectorAll使用介紹

 更新時間:2011年12月20日 01:47:53   投稿:mdxy-dxy  
其實關于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的)。

相關文章

最新評論