getElementsByClassName() メソッドは、クラス名の値を通じて要素を選択または取得するために使用されます。この DOM メソッドは、指定されたクラス名を持つすべての要素で構成される配列のようなオブジェクトを返します。特定の要素に対して getElementsByClassName() メソッドを呼び出すと、ドキュメント全体が検索され、指定されたクラス名に一致する要素のみが返されます。

構文

 var ele=document.getELementsByClassName('name'); 

ここで、name は渡される必須の引数です。これは、一致する単一のクラス名または複数のクラス名を指定する文字列です。

getElementsByClassName() メソッドの例

このメソッドの実際の実装を知り、理解するために、いくつかの例を見てみましょう。

例

これは、変数 x を呼び出すと配列のようなオブジェクトを返す単純なクラス実装です。

 <h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName(&apos;Class&apos;); document.write(&apos;On calling x, it will return an arrsy-like object: <br>&apos;+x); 

出力：

同様に、複数のクラスの要素のコレクションを返す getElementsByClassName() メソッドを実装できます。

getElementsByClassName()、querySelector()、および querySelectorAll() メソッドの違い

getElementsByClassName(): 指定されたクラス名を持つ要素を照合し、一致した要素のセットを返します。返される要素は、要素のライブ HTML コレクションです。これらのライブ要素は、ドキュメント オブジェクト モデルに変更が加えられた場合にさらに更新できます。

querySelector(): 指定されたクラス名に一致する要素を 1 つだけ返します。一致する要素が見つからない場合は、null を返します。

理解すべき主な点は、上記で説明したすべてのメソッドは 1 つの要素またはリストのいずれかを返しますが、getELementsByClassName() メソッドは、 動的 他の 2 つの方法は更新に役立ちます。 静的 。