JavaScript クラス単位で取得/設定する(getElementsByClassName)

nas

JavaScriptのクラス単位で取得/設定するサンプルです。
getElementsByClassNameメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

value値を取得/設定するサンプル

ボタンを押すとgetElementsByClassNameメソッドでvalue値の取得と設定を行い、テキストボックス内の文字が変化します。

コード

上記サンプルのコードです。

<div id="div1">
	<input type="text" value="赤" class="class1" maxlength="6">
	<input type="text" value="赤" class="class1" maxlength="6">
</div>
<input type="button" value="変更" onclick="clickBtn1()">

<script>
function clickBtn1(){
	const div1 = document.getElementById("div1");
	const class1 = div1.getElementsByClassName("class1");

	if (class1.item(0).value == "赤"){
		for (let i=0;i<class1.length;i++){
			(class1.item(i).value = "青");
		}
	}else{
		for (let i=0;i<class1.length;i++){
			(class1.item(i).value = "赤");
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv1です。
getElementsByClassNameメソッドの引数のclass1は、2,3行目のclass1クラスを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、valueに値を設定しています。

 

表示されている文字を取得/設定するサンプル(textContent)

ボタンを押すとgetElementsByClassNameメソッドとtextContentで文字が変わります。

赤

赤

コード

上記サンプルのコードです。

<div id="div2">
	<p class="class2">赤</p>
	<p class="class2">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn2()">

<script>
function clickBtn2(){
	const div2 = document.getElementById("div2");
	const class2 = div2.getElementsByClassName("class2");

	if (class2.item(0).textContent == "赤"){
		for (let i=0;i<class2.length;i++){
			(class2.item(i).textContent = "青");
		}
	}else{
		for (let i=0;i<class2.length;i++){
			(class2.item(i).textContent = "赤");
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv2です。
getElementsByClassNameメソッドの引数のclass2は、2,3行目のclass2クラスを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、textContentに値を設定しています。

 

CSSで文字の色を変更するサンプル

ボタンを押すとgetElementsByClassNameメソッドとCSSで文字の色が変わります。

赤

赤

コード

上記サンプルのコードです。

<div id="div3">
	<p class="class3">赤</p>
	<p class="class3">赤</p>
</div>
<input type="button" value="変更" onclick="clickBtn3()">

<script>
function clickBtn3(){
	const div3 = document.getElementById("div3");
	const class3 = div3.getElementsByClassName("class3");

	if (class3[0].style.color == "red"){
		for (let i=0;i<class3.length;i++){
			class3[i].style.color = "blue";
		}
	}else{
		for (let i=0;i<class3.length;i++){
			class3[i].style.color = "red";
		}
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv3です。
getElementsByClassNameメソッドの引数のclass3は、2,3行目のclass3クラスを指します。複数の要素(オブジェクト)を取得します。
14,18行目は、CSSで値を設定しています。

 

getElementsByClassNameメソッド

変数 = document.getElementsByClassName(クラス名);

HTMLCollection

  • HTMLCollectionとは、要素群の集合を表現したインターフェイスです。
  • 以下は、HTMLCollectionのイメージです。
  • メソッドとプロパティを使えます。
  • 以下はMDNのHTMLCollectionのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ単位で取得/設定する(getElementsByTagName)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 属性値を取得/設定する(getAttribute/setAttribute)
JavaScript 要素を追加/削除する(createElement/removeChild)
JavaScript ノードを置換するサンプル(replaceChild)

△上に戻る