querySelector スキルと querySelectorAll_javascript スキルの違いと関連性について話しましょう

まず、W3C 仕様に従ってこれら 2 つのメソッドが何を返す必要があるかについて説明します。
querySelector:

ノードのサブツリー内に最初に一致する Element ノードを返します。そのようなノードがない場合は、メソッドは null を返す必要があります (指定された要素ノードのサブツリー内のセレクターに一致するセット内の最初のものを返します。一致しない場合は null を返します)

querySelectorAll:

ノードのサブツリー内の一致する要素ノードをすべて含む NodeList をドキュメント順に返します。そのようなノードが存在しない場合、メソッドは空の NodeList を返す必要があります (指定されたサブツリー内の一致するセレクターを返します)。要素ノード。ノード セットは深さ優先の事前検索を使用します。一致しない場合、このメソッドは空のセットを返します。

使用法:

コードをコピーします コードは次のとおりです:

var element =baseElement.querySelector(selectors);
var elementList =baseElement。 querySelectorAll(selectors);

BaseElement がドキュメントの場合は問題なく、各ブラウザの実装は基本的に同じですが、BaseElement が通常の dom ノード (これらをサポートする dom ノード) の場合は問題ありません。 2 つのメソッド)、ブラウザの実装は少し奇妙です。例:

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

テスト

< スクリプトタイプ="text/javascript">
var testElement= document.getElementById('testId');
var element = testElement.querySelector('.test switch'); var elementList = document.querySelectorAll('.test span');
console.log(element); //
console.log(elementList); >

W3C の理解によれば、この例は次のように返されるはずです。しかし、ブラウザは、baseElement を無視し、セレクタのみを考慮しているようです。これは、現時点では、baseElement がほぼドキュメント化されていることを意味します。おそらく、ブラウザがアップグレードを続けるにつれて、この問題は統合されるでしょう。

人間の知恵は常に無限です。Andrew Dupont は、この奇妙な問題を一時的に修正するメソッドを発明しました。これは、セレクターの前に BaseElement の ID を指定して、一致する範囲を制限するというもので、このメソッドは主要な一般的なフレームワークで広く使用されています。
Jquery 実装:

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

var oldContext = context,

old = context.getAttribute( "id" ),
nid = old || id,
try {
if ( !relativeHierarchySelector || hasParent ) {
return makeArray( context.querySelectorAll( "[id='" nid "'] " query ), extra );
}
} catch(pseudoError) {}
finally {
if ( !old ) { oldContext.removeAttribute( "id" );}
}


このコードの他の場所ではなく、このコードが JQuery1.6 フラグメントであるこのメソッドがどのように実装されているかだけを見てください。 ;baseElement に ID がない場合は、id = "__sizzle__" を設定し、範囲を制限するために使用するときにセレクターの前に追加します。最後に、この ID 自体は、baseElement が持つべきものではないため、削除する必要があります: oldContext.removeAttribute( "id" ); Mootools 実装:

コードをコピーします コードは次のとおりです: var currentId = _context.getAttribute('id'), slickid = 'slickid__'; setAttribute。 ('id', slickid);

_expression = '#' slickid ' ' _expression;

context = _context.parentNode;


Mootools は、slickid = ' slickid__ を除いて Jquery に似ています。 '; 実際、意味は同じです。

メソッドの互換性: FF3.5 /IE8 /opera 10 /Safari 3.2;

IE 8:baseElement はオブジェクトとしてサポートされていません。 ;

Daniel JK さんからの返信と別の方法の提供、誠にありがとうございます。