JavaScript では、「 querySelectorAll() 」メソッドは、指定された CSS セレクターに正確に一致する最初の要素を取得します。このメソッドは、このタスクを実行するために DOM ツリーの走査を開始します。要素が見つかると、スクリプト セクションで定義された JavaScript の組み込みプロパティまたはメソッドが適用され、特別なタスクが実行されます。この方法は通常、要件に応じて対象の要素を選択するために使用されます。これにより、ユーザーは、指定されたセレクターに一致するすべての要素、または指定されたインデックスに配置された特定の要素を選択できます。
このガイドでは、JavaScript での「querySelectorAll()」メソッドの使用方法を説明します。
JavaScript で「querySelectorAll()」メソッドを使用する方法
「」を使用するには querySelectorAll() ”メソッドでは引数にCSSセレクターを指定します。 CSS セレクターには「Type、Class、id」が含まれます。 CSS セレクターが無効な場合は構文エラーを返し、それ以外の場合は静的な NodeList オブジェクトを標準出力として返します。
構文
document.querySelectorAll ( CSSセレクター )
上記の構文では、「 CSSセレクター 」は、すべての有効な CSS セレクターを指します。
上記で定義した構文を実際に使ってみましょう。
HTMLコード
指定された HTML コードの概要:
< h2 クラス = 'デモ' > 最初の見出し h2 >< h3 クラス = 'デモ' > 2番目の見出し h3 >
< p クラス = 'デモ' > 第一段落 p >
< p クラス = 'デモ' > 第 2 段落 p >
< ボタン クリック時 = 「jsFunc()」 > ここをクリック ！ ボタン >
上記のコード行では次のようになります。
- ” ” タグは、クラス「デモ」を持つ小見出しを追加します。
- ” ” タグは、「demo」という名前の同じクラスを持つ 2 番目の小見出しを定義します。
- ” ”タグには、同じクラス、つまり「デモ」を持つ段落ステートメントが埋め込まれます。
- ” <ボタン> 」タグには、「jsFunc()」関数を実行する「onclick」マウス イベントを持つ新しいボタンが含まれています。
ノート： このガイドでは、特定の HTML コードに従っています。
例 1: 「querySelectorAll()」メソッドを適用して同じクラスを持つ要素を選択し、その色を変更する
この例では、「querySelectorAll()」メソッドを利用して、「demo」クラスを使用するすべての要素を選択します。
JavaScript コード
以下のコードの概要を見てみましょう。
< 脚本 >関数 jsFunc ( ) {
const list = document.querySelectorAll ( '。デモ' ) ;
ために ( させて 私 = 0 ;私 < リストの長さ; i++ ) {
リスト [ 私 ] .style.color = 'オレンジレッド' ;
}
}
脚本 >
上記のコード行では次のようになります。
- ” jsFunc() 」関数が定義されています。
- その定義では、「list」変数は「 querySelectorAll() 」メソッドを使用して、クラス「demo」を持つすべての要素を選択します。
- 次に、「 ために ' ループはノード リストを初期化し、クラス ' を持つ見つかったすべての HTML 要素に沿って反復処理します。 デモ 」を使用してテキストの色を変更します。 スタイル.カラー ' 財産。
出力
上記の出力では、同じクラス名、つまり「demo」を構成する要素のテキストの色が、ボタンをクリックすると変更されることがわかります。
例 2: 「querySelectorAll()」メソッドを適用して特定のインデックス付き要素を選択する
すべての要素とは別に、ユーザーはクラス「demo」を持つ特定のインデックス付き要素を選択することもできます。
JavaScript コード
指定された JavaScript コードを考えてみましょう。
< 脚本 >関数 jsFunc ( ) {
const list = document.querySelectorAll ( 「h2.デモ」 ) ;
リスト [ 0 ] .style.color = '緑' ;
}
脚本 >
上記のコード スニペットでは次のようになります。
- 「list」変数は、「」を使用してクラスが「demo」である「h2」要素を選択します。 querySelectorAll() ' 方法。
- その後、変数「list」にh2要素のインデックスを指定することで、インデックス「0」に配置された「H2」要素の文字色を変更します。
出力
出力は、インデックス 0 に配置された「H2」要素のテキストの色が、ボタンのクリック時に変更されたクラス「demo」を持っていることを示しています。
例 3: 「querySelectorAll()」メソッドを適用して同じクラスを持つ要素の数を取得する
この例では、「querySelectorAll()」メソッドを使用して、同じクラスを持つ要素の数を取得します。
HTMLコード
まず、「例 1」の変更された HTML コードを見てください。
< p ID = 'ために' > p >
上記の HTML コードでは、「例 1」の HTML コードの最後に ID「para」を持つ空の段落を追加します。
JavaScript コード
次に、JavaScript コードを続けます。
< 脚本 >関数 jsFunc ( ) {
const nodelist = document.querySelectorAll ( 「h3」 ) ;
document.getElementById ( 'ために' ) .innerHTML = ノードリスト.長さ;
}
脚本 >
上記のコード スニペットによると、次のようになります。
- 関数「jsFunc()」は、まず「」を使用してすべての「
」要素を選択します。 querySelectorAll() ' 方法。
- その後、「 getElementById() 」メソッドは、その ID「para」を通じて追加された空の段落にアクセスし、適用された「length」プロパティの戻り値を追加します。
出力
ご覧のとおり、上記の出力は、指定された CSS クラス セレクター「demo」に一致する合計「4」の要素を示しています。
結論
” querySelectorAll() ”メソッドは、値にCSSセレクターを指定することで簡単に利用できます。このメソッドは、各 HTML 要素を照合し、指定されたセレクターに一致する要素を選択します。要素が選択されると、スクリプト セクションで定義された要素に対して必要なタスクが実行されます。このガイドでは、JavaScript での「querySelectorAll()」メソッドの使用法を簡単に説明しました。