DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript之querySelector和querySelectorAll使用說明
javascript之querySelector和querySelectorAll使用說明
編輯:關於JavaScript     
一開始很多人都會拿jquery的選擇器來跟這兩個api做對比(我也是),比較異同本來沒事,但卻使一些同學對這兩個api在浏覽器中的實現產生了誤解,特別是再dom element上調用此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')的實現理解,不少人一開始幾乎都認為是直接從div[id='inner']的孩子中進行查找(我也是),這個#main有點礙眼。實際上它還是根據selector string從整個document上查找,再返回屬於div[id='inner']的子節點。很多人會疑惑,那麼為什麼不按照直接按父節點找子節點的方式來實現呢?就像elem.getElementsByTagName,我的想法是靈活selector string吧。

querySelector只返回匹配的第一個元素,如果沒有匹配項,返回null。

querySelectorAll返回匹配的元素集合,如果沒有匹配項,返回空的nodelist(節點數組)。

並且返回的結果是靜態的,之後對document結構的改變不會影響到之前取到的結果。

目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved