ywork2020.com

Title

要素のclass属性値でHTMLCollectionを取得する

目次 (INDEX)

getElementsByClassNameとは

getElementsByClassName とは次の語句から命名されたメソッドです。
Get
読み: ゲット
意味: 取得する
Element
読み: エレメント
意味: 要素
By
読み: バイ
意味: 経由して
ClassName
読み: クラスネーム
意味: クラス名

目次に戻る

getElementsByClassNameの概要

これはDocumentオブジェクトのメソッドの1つです。 Documentオブジェクトはdocument変数、またはdocumentプロパティから参照します。

このメソッドはHTML要素に使われるclass属性値を参照してHtmlCollectionオブジェクトを取得します。 このオブジェクトは配列風のオブジェクトであり、NodeListに似ています。 なお、このHtmlCollectionは要素の生きたHtmlCollectionであり、コレクションの内容はページ要素の変化と共に更新されるものとなります。

HtmlCollectionオブジェクトを使って要素を特定する場合には、配列を操作する場合と同様に[インデックス番号]を 使う方法でも、itemメソッドからインデックス番号を指定する方法でも利用できます。

それでは次に実際の検証サンプルとコードで確認してみましょう。

目次に戻る

実機サンプル

3つのb要素: class="clsElementsB"
<b class="clsElementsB">b要素1</b>
<b class="clsElementsB">b要素2</b>
<b class="clsElementsB">b要素3</b>

実行: class="clsElementsB"を持つ要素のinnerHTMLプロパティを書き換えます

目次に戻る

サンプルコード

<body>
	<b class ="clsElementsB">b要素1</b><br>
	<b class ="clsElementsB">b要素2</b><br>
	<b class ="clsElementsB">b要素3</b><br>
	<input type="button" value="ボタン" onclick="evtName()">
	<script>
		document.open();
		function evtName(){
			document.getElementsByClassName("clsElementsB")[1].innerHTML = "HELLO WORLD!";
			document.getElementsByClassName("clsElementsB").item(2).innerHTML = "こんにちは、世界!";
		}
		document.close();
	</script>
</body>

目次に戻る

サンプルコードの要点

  1. まず、検証用の要素としてb要素を3つ用意してclass属性に"clsElementsB"を指定しました。
  2. 実行ボタンをクリックするとevtName()関数を呼び出します。
  3. evtName()関数の内容はgetElementsByClassNameメソッドでクラス名が"clsElementsB"の要素をHTMLコレクションとして取得します。 コレクション[インデックス番号1]に対して"HELLO WORLD!"を代入し、[インデックス番号2]に対して"こんにちは、世界!"を代入しています。
  4. インデックス番号は0から始まるので、今回は3つの要素ですから0,1,2までの番号で参照することになりました。

目次に戻る

補足説明

getElementsByClassNameメソッドは要素のクラス名から要素配列を取得するためのメソッドですが、 類似したメソッドが他にもありますので、興味がある方は関連リンクを参照して下さい。

目次に戻る