クエリセレクター()
基本的に、querySelector() は、特定のテンプレートに存在する要素を取得する「this.template」とともに使用されます。複数の要素がある場合は、最初の要素のみが考慮されます。指定された要素がテンプレートに存在しない場合は、Null が返されます。セレクターをパラメーターとして受け取ります。これはクラス名タグにすることができます。 ID はサポートされません。場合によっては、クラスは同じでも値が異なることがあります。このシナリオでは、値に基づいて要素を取得する data-recid を使用する必要があります。
構文：
querySelector() 内でセレクターを指定する方法を見てみましょう。
- this.template.querySelector(セレクター)
- this.template.querySelector(‘[data-recid=”value”]’)
例: セレクターが h1 タグの場合、「h1」と指定する必要があります。
1. すべての例では、この「meta.xml」ファイルを使用します。各例ではこれを指定しません。 LWC コンポーネントは、レコード ページ、アプリ ページ、またはホームページに追加できます。
「1.0」 ?>
<ターゲット>
2. このガイドで説明するすべての例では、ロジックは「js」コードとして提供されます。その後、「js」コード全体を含むスクリーンショットを指定します。
例 1:
まず、HTML ファイル内にテキストを含む h1、div、span、および lightning-button タグを作成します。また、クリックされたときに前の要素を取得するボタンを作成します。 「js」ファイルでは、this.template.querySelector() を通じてこれら 4 つの要素すべての innerText を返します。
最初の例.html
<テンプレート><ライトニングカードのバリアント = '狭い' タイトル = 'こんにちは' アイコン- 名前 = 「標準:アカウント」 >
< h1 > こんにちは、LinuxHint です。私はh1にいます < / h1 >
< ディビジョン > こんにちは、LinuxHint です。私はディビジョンにいます < / ディビジョン >
< スパン > こんにちは、LinuxHint です。私はスパンにいる < / スパン >
<雷入力 タイプ = '文章' 変異体 = '標準' 名前 = '名前' ラベル = 「文字入力」 >
こんにちは、LinuxHint です。私は雷入力中です < / 雷入力>
<稲妻ボタンのバリアント = 'ベース' ラベル = 「詳細を取得」 クリック時 = { 詳細を取得する } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
最初の例.js
詳細を取得する ( ) {// h1タグの内部テキストを取得します。
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクター ( 'h1' ) 。 内部テキスト ) ;
// div タグの内部テキストを取得します。
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクタ ( 「ディビジョン」 ) 。 内部テキスト ) ;
//spanタグの内部テキストを取得します。
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクタ ( 'スパン' ) 。 内部テキスト ) ;
// lightning-input の内部テキストを取得します。
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクタ ( 「稲妻入力」 ) 。 内部テキスト ) ;
}
コード全体:
出力：
このコンポーネントを任意のオブジェクトの「レコード」ページに追加します (アカウントのレコード ページに追加しました)。このウィンドウを調べて、「コンソール」タブに移動します。
次に、「詳細を取得」ボタンをクリックします。その後、すべての要素の innerText がコンソールに表示されることがわかります。
例 2:
例 1 で説明したコンポーネントを利用します。HTML コンポーネントの「h1」タグで 2 つの要素を指定し、「js」ファイルの querySelector() を使用して「h1」の innerText を取得します。
最初の例.html
<テンプレート><ライトニングカードのバリアント = '狭い' タイトル = 'こんにちは' アイコン- 名前 = 「標準:アカウント」 >
< h1 > こんにちは、LinuxHint です。私は最初のh1です < / h1 >
< h1 > こんにちは、LinuxHint です。私は2番目のh1です < / h1 >
<稲妻ボタンのバリアント = 'ベース' ラベル = 「詳細を取得」 クリック時 = { 詳細を取得する } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
最初の例.js
詳細を取得する ( ) {// h1タグの内部テキストを取得します。
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクタ ( 'h1' ) 。 内部テキスト ) ;
}
コード全体:
出力：
同じタグを持つ要素が 2 つあります。したがって、querySelector() は最初の要素のみを選択します。 「詳細を取得」ボタンをクリックすると、最初の「h1」が表示され、内部テキストがコンソールに返されます。
例 3:
querySelector() を変数に保存し、この変数を使用して innerText を取得することもできます。テキストを含むspanタグを作成し、これを変数に格納してコンソールにinnerTextを返しましょう。
最初の例.html
<テンプレート><ライトニングカードのバリアント = '狭い' タイトル = 'こんにちは' アイコン- 名前 = 「標準:アカウント」 >
< スパン > こんにちは、LinuxHint です。私はスパンです < / スパン >< br >
<稲妻ボタンのバリアント = 'ベース' ラベル = 「詳細を取得」 クリック時 = { 詳細を取得する } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
最初の例.js
詳細を取得する ( ) {//spanタグの内部テキストを取得します。
彼にさせる = これ 。 テンプレート 。 クエリセレクタ ( 'スパン' ) 。 内部テキスト
コンソール。 ログ ( 彼 ) ;
}
コード全体:
出力：
例 4:
この例では、ボタンを作成し、件名を文字列として受け取るテキストを入力します (lightning-input)。 「lightning-input」をセレクターとして querySelector() メソッドに渡します。これは「computer_popular」変数に割り当てられます。このボタンをクリックすると、この変数に存在する値が表示されます。
2 番目の例.html
<テンプレート><稲妻カード タイトル = '主題' >
< 中心 >
<雷入力 ラベル = 「件名を入力してください」 価値 = { コンピュータ関連 } >< / 雷入力>
< p > 件名は次のとおりです: < b > {コンピュータ関連} < / b > < / p >
< / 中心 >
<稲妻ボタン ラベル = 「ここを選択してください」 クリック時 = { ハンドル件名 } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
2番目の例.js
コンピュータ関連ハンドル件名 ( イベント ) {
これ 。 コンピュータ関連 = これ 。 テンプレート 。 クエリセレクタ ( 「稲妻入力」 ) 。 価値 ;
}
コード全体:
出力：
例 5:
ここではdata-recidを利用します。 HTMLファイル内にrecidを「Span1」「Span2」「Span3」とした3つのspanタグを持つボタンを作成してみましょう。 querySelector() の data-recid に「Span1」を渡して、最初のスパンを選択します。
thirdExample.html
<テンプレート><稲妻カード タイトル = 「データIDに基づく識別」 >
< スパン データ読み取り = 「スパン1」 > 私はスパン-1にいます < / スパン >< br >
< スパン データ読み取り = 「スパン2」 > 私はスパン-2にいます < / スパン >< br >
< スパン データ読み取り = 「スパン3」 > 私はスパン-3です < / スパン >< br >
<稲妻ボタンのバリアント = 'ベース' ラベル = 「詳細を取得」 クリック時 = { 詳細を取得する } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
3番目の例.js
詳細を取得する ( ) {// Span1 の innerText を取得します
コンソール。 ログ ( これ 。 テンプレート 。 クエリセレクタ ( '[data-recid='Span1']' ) 。 内部テキスト ) ;
}
コード全体:
出力：
結論
querySelector() を利用して DOM 要素にアクセスする方法を学びました。 querySelector() は、「this.template」を使用して現在のテンプレート内の要素を選択します。これを変数に保存することも、直接使用することもできます。これらの両方について例を挙げて説明します。また、複数の要素を含む例も提供しました。この場合、querySelector() は最初の要素を返します。