javascript_javascript スキルでの querySelector および querySelectorAll の使用手順

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

追加: function(comment) {
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)

})(); >
誤解は、$('inner').querySelectorAll('#main h4.inside') の実装の理解にあります。当初、多くの人は div[id=' の子から直接検索していると考えていました。 inner'] (私もです)、この #main はちょっと目障りです。実際、セレクター文字列に基づいてドキュメント全体を検索し、div[id='inner'] に属する子ノードを返します。多くの人は疑問に思うでしょう。それなら、親ノードに従って子ノードを直接検索することで実装すればいいのではないか？ elem.getElementsByTagName と同じように、私のアイデアは柔軟なセレクター文字列を持つことです。

querySelector は最初に一致した要素のみを返し、一致しない場合は null を返します。

querySelectorAll は、一致する要素のコレクションを返します。一致する要素がない場合は、空のノードリスト (ノード配列) を返します。

返された結果は静的であり、ドキュメント構造に対する後続の変更は、以前に取得された結果には影響しません。

現在、IE8、ff、および chrome はすべてこの API をサポートしています (IE8 のセレクター文字列は css2.1 のみをサポートしています)。