HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM getElementsByClassName()メソッドの使い方を徹底解説

getElementsByClassName()メソッドとは

HTML DOM の getElementsByClassName() メソッドは、ドキュメント内で指定されたクラス名を持つすべての要素のコレクションを取得するためのメソッドです。戻り値は NodeList オブジェクトとして返され、インデックス番号を使用することで、コレクション内の任意の要素へアクセスできます。

さらに、このメソッドは document オブジェクトだけでなく、個々の要素に対しても呼び出すことが可能です。その場合、その要素の子孫要素の中から、指定したクラス名を持つ要素のみが取得されます。

構文

getElementsByClassName() メソッドの基本構文は以下のとおりです。

document.getElementsByClassName(classname)

ここで classname は文字列型の引数であり、アクセスしたい要素のクラス名を表します。スペースで区切って記述することで、複数のクラス名を同時に検索することもできます。

サンプルコード

それでは、getElementsByClassName() メソッドを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByClassName("PARA1");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByClassName() example</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM getElementsByClassName()メソッドの使い方を徹底解説

そして、「CHANGE」ボタンをクリックすると、以下のように表示が変化します。

HTML DOM getElementsByClassName()メソッドの使い方を徹底解説

コードの解説

この例では、まず classname="PARA1" を持つ2つの段落（<p> 要素）を作成しています。

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

次に、ユーザーがクリックすると changePara() 関数を実行する「CHANGE」ボタンを配置しています。

<button onclick="changePara()">CHANGE</button>

changePara() 関数では、document オブジェクトに対して getElementsByClassName() メソッドを呼び出し、クラス名 "PARA1" を持つ両方の <p> 要素を NodeList オブジェクトとして変数 p に格納しています。その後、インデックス番号を利用して、1つ目の段落のテキスト内容を書き換え、2つ目の段落には文字色や背景色のスタイルを適用しています。

function changePara() {
   var p = document.getElementsByClassName("PARA1");
   p[0].innerHTML = "This text has been changed";
   p[1].style.color = "red";
   p[1].style.backgroundColor = "yellow";
}
  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや