このチュートリアルでは、JavaScript で DOM 要素を選択するためのさまざまな方法を示します。
JavaScriptでDOM要素を選択するさまざまな方法は何ですか?
JavaScript で DOM 要素を選択するには、次の方法を使用します。
- getElementById() メソッド
- getElementsByClassName() メソッド
- getElementsByTagName() メソッド
- querySelector() メソッド
- querySelectorAll() メソッド
方法 1: 「getElementById()」メソッドを使用して DOM 要素を選択する
DOM 要素を選択するには、「 getElementById() 要素に割り当てられた ID に基づくメソッド。このメソッドは、一意の「 ID ' 属性。指定された id を持つ要素への参照を提供し、「 ヌル 」 一致する要素が見つからない場合。
構文
getElementById() メソッドには、以下の構文を使用します。
書類。 getElementById ( 「ID名」 )
ここで、「 ID名 」は、要素に割り当てられた id 属性の名前です。
例
HTML ファイルで、「 h4 ' 鬼ごっこ。 id を div 要素と見出し「h4」要素に割り当て、「 分周 ' と ' 見出し '、 それぞれ。 div 要素に style 属性を追加して、中央に配置します。また、クラスを割り当てます」 セクション 」から、色が変わる 2 番目の見出しに移動します。
< 分周 ID = 「分割」 スタイル = 'text-align:center;' >< h4 ID = '見出し' > さまざまな方法を使用して DOM 要素にアクセスする < / h4 >
< h4 クラス = 'セクション' ID = '見出し' > 「getElementById()」メソッドを使用して JavaScript で DOM 要素を選択する
< / h4 >
< / 分周 >
今、私たちは「 分周 」の助けを借りて割り当てられたIDを使用する要素 getElementById() ' 方法：
だった getById = 書類。 getElementById ( 「分割」 ) ;ID に対して要素を出力します。 分周 」コンソールで：
コンソール。 ログ ( getById ) ;必要な HTML 要素が正常に取得されたことがわかります。
方法 2: 「getElementsByClassName()」メソッドを使用して DOM 要素を選択する
「」の助けを借りて、割り当てられたクラスを使用してDOM要素を選択することもできます getElementsByClassName() ' 方法。クラス名で要素のリストを選択します。これは、指定されたクラス名を持つすべての要素を含む配列のようなオブジェクトであるライブ HTMLCollection オブジェクトを出力します。
構文
「getElementsByClassName()」メソッドには、次の構文が使用されます。
書類。 getElementsByClassName ( 'クラス名' )例
ここでは、クラス「」を含む要素を取得します。 セクション 」とコンソールに出力します。
だった getByClass = 書類。 getElementsByClassName ( 'セクション' ) ;コンソール。 ログ ( getByClass ) ;
出力からわかるように、長さ 1 の配列が返され、要素「 h4 「クラスに所属する人」 セクション 」：
方法 3: 「getElementsByTagName()」メソッドを使用して DOM 要素を選択する
要素に ID またはクラスが割り当てられていない場合は、「 getElementsByTagName() 」メソッドを使用して、タグ名で要素を取得します。また、ライブ HTMLCollection オブジェクトも返します。これは、指定されたタグ名を持つすべての要素を含む配列のようなオブジェクトです。
構文
タグ名に基づいて要素を選択するには、次の構文に従います。
getElementsByTagName ( タグ名 )例
タグ名を渡して「getElementsByTagName()」メソッドを呼び出します h4 」。次に、指定したタグ名に一致する要素のリストをコンソールに出力します。
だった getByTag = 書類。 getElementsByTagName ( 'h4' ) ;コンソール。 ログ ( getByTag ) ;
出力
方法 4: 「querySelector()」メソッドを使用して DOM 要素を選択する
使用 ' querySelector() 」メソッドを使用して DOM 要素を取得します。指定された CSS セレクターに一致する単一の要素を選択します。ドキュメント内で最初に一致した要素を返します。一致する要素がない場合、「 ヌル 」。
構文
「querySelector()」メソッドには、以下の構文が使用されます。
書類。 クエリセレクター ( 属性 )ここで、属性は「 id や class などの CSS セレクターです。 ＃私のID 」 「 。私のクラス 」。
例
「querySelector()」メソッドを呼び出して、id「 ＃見出し 」を使用して、同じ ID を含む要素を取得します。
だった getByquery = 書類。 クエリセレクター ( '＃見出し' ) ;コンソール。 ログ ( getByquery ) ;
最初に一致した要素を出力として提供します。
方法 5: 「querySelectorAll()」メソッドを使用して DOM 要素を選択する
指定した属性 (id またはクラス) を含むすべての要素を選択する場合は、「 querySelectorAll() ' 方法。特定の定義済み CSS セレクターに一致する要素のリストを選択します。特定の CSS セレクターに一致したドキュメント内のすべての要素を含む NodeList オブジェクトを提供します。
構文
要素のリストを取得するには、次の構文を使用します。
書類。 querySelectorAll ( 属性 )例
id を含む一致した要素のリストを取得するには「 見出し ' とともに ' querySelectorAll() 」メソッドとコンソールの要素への出力:
だった getByqueryAll = 書類。 querySelectorAll ( '＃見出し' ) ;コンソール。 ログ ( getByqueryAll ) ;
出力
JavaScript で DOM 要素を選択する方法は以上です。
結論
JavaScript で DOM 要素を選択するには、「 getElementById() 」、「 getElementsByClassName() 」、「 getElementsByTagName() 」、「 querySelector() '、 または ' querySelectorAll() ' 方法。これらのメソッドは、一意の識別子、クラス名、タグ名、または CSS セレクターに基づいて、DOM から要素を選択するさまざまな方法を提供します。このチュートリアルでは、JavaScript で DOM 要素を選択するさまざまな方法を示しました。