JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)

JavaScriptのクラス名を指定して要素ノードを取得するサンプルです。
getElementsByClassNameメソッドを使用します。
要素とは、<input type="button" value="ボタン">とある場合、inputが要素です。typeとvalueは属性で、"button"と"ボタン"は属性値です。

getElementsByClassNameメソッド

  • document.getElementsByClassName('クラス名')
  • クラス名を指定して要素ノードを取得します。
  • 取得する要素ノードは複数の場合があります。
  • キーを指定して取得する方法をダイレクトアクセスといいます。
  • 以下はMDNのgetElementsByClassNameメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

サンプル

getElementsByClassNameメソッドのサンプルです。
下の「あいう」と「かきく」は同じクラスが指定されています。
<p class="p1">あいう</p> <p class="p1">かきく</p>
「表示」ボタンを押すと、getElementsByClassNameメソッドでclass="p1"を取得してテキストに表示します。

あいう

かきく

結果:

コード

上記サンプルのコードです。
5行目は、getElementsByClassNameメソッドで18,19行目を取得します。
7-9行目は、取得した要素を配列に格納しています。

<script>
function btn1_click(){
	var arr1 = [];
	// クラスのp1を指定
	var list1 = document.getElementsByClassName('p1');
	// ループ文で配列に格納
	for (var i=0;i<list1.length;i++){
		arr1.push(list1.item(i).innerHTML);
	}
	// 値を表示
	document.getElementById("r1").innerHTML = arr1;
}
function btn2_click(){
	document.getElementById("r1").innerHTML = "";
}
</script>
<body >
<p class="p1">あいう</p>
<p class="p1">かきく</p>
<p>結果:<span id="r1"></span></p>
<input type="button" value="表示" onclick='btn1_click()'>
<input type="button" value="クリア" onclick='btn2_click()'>
</body>

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)



△上に戻る