ネイティブで強力な DOM セレクター querySelector の詳細な紹介 (コードは添付されています)

この記事では主に、ネイティブの強力な DOM セレクター querySelector に関する関連知識を紹介します。必要な方は参考にしてください。

従来の JavaScript 開発では、DOM を見つけることが開発者にとって最初の悩みの種となることがよくありますが、ネイティブ JavaScript には多くの DOM が用意されていません。選択方法は、タグ、名前、ID などによる検索に限定されています。これでは明らかに十分ではありません。これは非常に面倒に思えますが、正規表現を使用する必要があります。図書館。実際、すべてのブラウザ メーカーが querySelector メソッドと querySelectorAll メソッドをサポートするようになっており、Microsoft もこの機能をサポートするために、開発者にとっては非常に便利な方法として、querySelector と querySelectorAll を提供しています。 CSS セレクターを使用するのと同じくらい早く、必要なノードを見つけることができます。

querySelector と querySelectorAll の使用は非常に簡単で、フロントエンド開発者にとっては、CSS とまったく同じように記述できます。 id が test の p がある場合、この要素を取得するには、次のようなことを実行します:

document.getElementById("test");
次に、この p を取得する新しいメソッドを使用してみましょう。

document.querySelector("#test");
document.querySelectorAll("#test")[0];

以下はちょっとしたデモです:

testのIDを持つpです

あまり違いがないように感じますが、もう少し複雑な状況になると元のメソッドは非常に面倒になりますこのとき、querySelectorとquerySelectorAllの利点が活きてきます。たとえば、次の例では、ドキュメント内のクラス test を持つ p のサブ要素 p の最初の子要素 ​​p を選択します。もちろん、これは一口ではありますが、この記事の新しいメソッドを使用してこれを選択します。要素を言葉で説明するよりもさらに簡単です。

document.querySelector("p.test>p:first-child");
document.querySelectorAll("p.test>p:first-child")[0];

ここに小さなデモンストレーションを示します:

私はレイヤーの p タグです

これで、querySelector メソッドと querySelectorAll メソッドのパラメーターについて非常に明確に理解できるはずです。はい、受け取るパラメーターはまったく同じです。 CSSセレクター。 querySelector と querySelectorAll の違いは、querySelector が 1 つの要素を取得するために使用されるのに対し、querySelectorAll は複数の要素を取得できることです。 querySelector は最初に一致した要素を返します。一致する要素がない場合は Null を返します。 querySelectorAll は、一致する要素を含む配列を返します。一致する要素がない場合、返される配列は空です。この記事の最後の例では、querySelectorAll を使用して、クラスを強調するすべての要素を太字にします。

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
  emphasisText[i].style.fontWeight = "bold";
}

これは、jquery よりも高速なネイティブ メソッドです。欠点は、IE6 と 7 がサポートしていないことです。

ライブラリ内の W3C 仕様と実装

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

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

BaseElement の場合、これは問題ありません。各ブラウザの実装は基本的に同じですが、BaseElement が通常の dom ノード (これら 2 つのメソッドをサポートする dom ノード) の場合、ブラウザの実装は少し異なります。 W3C 理解するには、この例は次のように返される必要があります: element: null; elementList: [];今回は、baseElement がドキュメントに近づいていますが、これは予想される結果と一致しません。おそらく、ブラウザがアップグレードされ続けるにつれて、この問題は統合されるでしょう。

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

<p class= "test"  id= "testId" > 
   <p><span>Test</span></p> 
</p> 
<script type= "text/javascript" >   
   var  testElement= document.getElementById( &#39;testId&#39; ); 
   var  element = testElement.querySelector( &#39;.test span&#39; ); 
   var  elementList = document.querySelectorAll( &#39;.test span&#39; ); 
   console.log(element); // <span>Test</span>
   console.log(elementList); // 1  
</script>

var  oldContext = context,
old = context.getAttribute( "id"  ),
nid = old || id,

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

var  currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#'  + slickid + ' '  + _expression;
context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement为object；

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Node.Js实现端口重用步骤详解

js继承中的方法重写重点讲解

js方法的重写和重载的技巧详解

以上がネイティブで強力な DOM セレクター querySelector の詳細な紹介 (コードは添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。