javascript_javascript スキルにおける querySelector および querySelectorAll の使用の概要

最初は、多くの人が jquery のセレクターとこれら 2 つの API を比較します (私も同様です) 類似点と相違点を比較するのは問題ありませんが、特に dom でこの API を呼び出す場合、一部の学生がブラウザーでのこれら 2 つの 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 = {
コンストラクター: global.logger,
append: function(comment) {
this.logArr.push( '

' コメント '

');
},
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 = {
コンストラクター: global.logger,
append: function(コメント ) {
this.logArr.push('

' コメント '

');
},
flush: function() {
this.logElem.innerHTML = this.logArr.join('');
},
clear: function() {
this.logElem.innerHTML = ''; }
};
})(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
logger .append(items[i].innerHTML);
}
logger.flush()
})();


html コード:




コードをコピー

コードは次のとおりです。

;div id= "inner">

h4 内側 1

h4 内側 2

🎜>

• リスト項目 2
;/li>

h4 外側/h4>

h4 外側 2

🎜>

CSS コード:




コードをコピー


コードは次のとおりです:


#log {
font-size: 10px;
}

誤解は $('inner').querySelectorAll('#main h4 .inside') 多くの人は、最初は div[id='inner'] の子から直接検索されると考えています (私もです)、この #main は少し面倒です。実際、セレクター文字列に基づいてドキュメント全体を検索し、div[id='inner'] に属する子ノードを返します。多くの人は疑問に思うでしょう。それなら、親ノードに従って子ノードを直接検索することで実装すればいいのではないか？ elem.getElementsByTagName と同じように、私のアイデアは柔軟なセレクター文字列を持つことです。
querySelector は最初に一致した要素のみを返し、一致しない場合は null を返します。
querySelectorAll は、一致する要素のコレクションを返します。一致しない場合は、空のノードリスト (ノード配列) を返します。

返される結果は静的であり、ドキュメント構造に対する後続の変更は、以前に取得された結果には影響しません。 現在、IE8、ff、および chrome はすべてこの API をサポートしています (IE8 のセレクター文字列は css2.1 のみをサポートしています)。