logo

TechCodeview

JavaScriptクエリセレクター

querySelector は、要素の検索において重要な役割を果たす JavaScript メソッドです。

このセクションでは、querySelector () メソッドとその使用法を理解して説明し、querySelector () メソッドの概念を実際に理解するための例も見ていきます。

JavaScriptのquerySelector()メソッドの紹介

ドキュメント内の最初の要素を検索して返すことができる要素インターフェイス メソッド。指定された CSS セレクターまたはセレクターのグループのいずれかと一致する要素が検索されます。ただし、一致する要素が見つからない場合は null を返します。 querySelector() メソッドは、Document インターフェースのみのメソッドです。ドキュメント インターフェイスは、 html 、 XML 、またはその他の種類のドキュメントの共通メソッドとプロパティを記述するインターフェイスです。

querySelector () メソッドはどのように検索を実行しますか

要素の検索に使用できるさまざまな種類の検索があることはわかっています。ただし、querySelector() メソッドは 深さ優先の事前注文 ドキュメントのノードのトラバース。その中で、走査はドキュメントのマークアップの最初の要素から始まり、子ノードの数の順序で連続したノードを走査します。

文字列メソッド

構文 

 element = document.querySelector(selectors);

querySelector()メソッドはドキュメントインターフェースのメソッドなのでこのような構文になっています。

これには、DOM 文字列である「selectors」という 1 つのパラメーターがあり、1 つ以上の有効な CSS セレクターがあります。

戻り値の型

一致するものが見つからない場合は「null」を返す場合があり、最初の要素が指定された CSS セレクター (存在する場合) に一致する場合は、その要素を返します。

ただし、有効な CSS セレクターがない場合は、「SyntaxError」例外がスローされます。

実装例を見る前に、さまざまなタイプの CSS セレクターについて知っておく必要があります。ご存知ない場合は、こちらをご覧ください https://www.javatpoint.com/css-selector CSS チュートリアルのセクション。

Java列挙型

そこで、CSS セレクターをカバーし、querySelector () メソッドを使用してその最初の要素の値を保持する例を実装します。

querySelector() の実装例

以下は、querySelector () メソッドの動作を理解するためのコード例です。

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e);

ここで、最初の例で querySelector () メソッドを使用したコードと、最初に一致したセレクター値のみを出力したコードとの違いがわかります。しかし、この 2 番目の例の出力を観察すると、指定されたセレクターまたはセレクターのグループの一致する値がすべて返されていることがわかります。上記のコードの出力を以下に示します。

JavaScriptクエリセレクター

コードの説明

  • 上記のコードは html と JavaScript を組み合わせたものです。
  • コードにさまざまな CSS セレクターを実装しました。
  • JavaScript セクションでは、querySelectorAll () メソッドを使用し、CSS の要素セレクターを呼び出しました。
  • そのため、querySelectorAll () メソッドは、深さ優先事前順序付けメソッドを使用してトラバースするコードに移動し、querySlectorAll () メソッドのパラメーターとして指定されたすべての一致する要素の値を返します。

したがって、同様に、他のさまざまなタイプの CSS セレクターにも querySelectorAll () メソッドを使用でき、引数として指定されたセレクターの一致する値をすべて返します。このメソッドを実装するには、さまざまなセレクターの querySelector () メソッドを querySelectorAll () メソッドに置き換えます。このメソッドは一致を見つけて、指定された要素の少なくとも 1 つの一致する値を返します。