このチュートリアルでは、任意の属性値に基づいて DOM 要素を見つける手順について説明します。
属性値に基づいて DOM 内の要素を検索/取得する方法は?
属性値に基づいて DOM 内の要素を見つけるには、「 querySelector() ' 方法。指定された CSS セレクター値に一致する、ドキュメント内で見つかった最初の要素を提供します。
ノート : 指定したセレクタ値に一致するすべての要素を取得するには、「 querySelectorAll() ' 方法。
構文
「querySelector()」メソッドを使用するには、次の構文を使用します。
書類。 クエリセレクター ( セレクタ ) ;
ここで、セレクターは「 #id 」、「 。クラス 」：
属性値に基づいて要素を見つけるために、指定された構文を使用することもできます。
書類。 クエリセレクター ( '[selector='値']' ) ;
上記の構文では、「 セレクタ 」になります「 ID ' また ' クラス '、 または ' 価値 」になります「 ID名 ' また ' クラス名 」。
例
HTML ファイルで、h4 要素を使用した見出し、 タグを使用したプレーン テキスト、および id が割り当てられたメッセージの div を含む div 要素を作成します。 メッセージ 」：
< 部門ID = 「分割」 スタイル = 'text-align:center;' >< h4 クラス = 「秒」 ID = '見出し' > を見つける エレメント DOMベースで 属性 価値 h4 >
< スパンID = 'いらっしゃいませ' > Linuxhint へようこそ スパン >
< 部門ID = 'メッセージ' >
< ピッド ID = 「メッセージ」 > こんにちはみんな ! Linuxhint JavaScript チュートリアルへようこそ p >
分周 >
分周 >
ページは次のようになります。
これで、id「 メッセージ 」は、「 querySelector() ' 方法：
各要素 = 書類。 クエリセレクター ( '＃メッセージ' )最後に、コンソールに要素を出力します。
コンソール。 ログ ( エレメント ) ;出力では、「 分周 ” 要素は割り当てられた ID と共に表示されます “ メッセージ 」は、必要な要素が正常に取得されたことを示します。
指定された構文を使用して要素を取得することもできます。ここでは、id が「」である要素を取得します。 メッセージ 」：
各要素 = 書類。 クエリセレクター ( '[id='msg']' ) ;出力
次に、「 スタイル ' 財産：
エレメント。 スタイル . 色 = '青' ;ご覧のとおり、テキストは「 緑 」色、そして今では「 青 」：
以上で、属性値に基づいて DOM 内の要素を見つけることができました。
結論
属性値に基づいて DOM 内の要素を見つけるには、「 querySelector() 指定された CSS セレクター値に一致するドキュメント内の最初の要素を与える」メソッド。さらに、指定されたセレクタ値に一致するすべての要素を取得するには、「 querySelectorAll() ' 方法。このチュートリアルでは、任意の属性値に基づいて DOM 要素を見つける手順について説明しました。