JavaScript 最初の子の要素を取得して移動する(firstElementChild)

nas

JavaScriptの最初の子の要素を取得して移動するるサンプルです。
firstElementChildとnextElementSiblingを使用します。動くサンプルもあります。

確認環境
・Windows10
・Google Chrome

目次

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

ボタンを押すとfirstElementChildプロパティで最初の子の要素を取得しnextElementSiblingで移動してvalue値を取得/設定します。

コード

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

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

<script>
function clickBtn1(){
	const div1 = document.getElementById("div1");
	let child1 = div1.firstElementChild;

	while(child1){
		if (child1.value == "赤"){
			child1.value = "青";
		}else{
			child1.value = "赤";
		}
		child1 = child1.nextElementSibling;
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv1です。firstElementChildプロパティで2行目が対象になります。
14,16行目は、valueに値を設定しています。
18行目は、nextElementSiblingで次の要素に移動しています。

 

textContentで文字を取得/設定するサンプル

ボタンを押すとfirstElementChildプロパティで最初の子の要素を取得しnextElementSiblingで移動してtextContentで文字を取得/設定します。

赤

赤

コード

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

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

<script>
function clickBtn2(){
	const div2 = document.getElementById("div2");
	let child2 = div2.firstElementChild;

	while(child2){
		if (child2.textContent == "赤"){
			child2.textContent = "青";
		}else{
			child2.textContent = "赤";
		}
		child2 = child2.nextElementSibling;
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv2です。firstElementChildプロパティで2行目が対象になります。
14,16行目は、textContentで文字を設定しています。
18行目は、nextElementSiblingで次の要素に移動しています。

 

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

ボタンを押すとfirstElementChildプロパティで最初の子の要素を取得しnextElementSiblingで移動してCSSで文字の色を変更します。

赤

赤

コード

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

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

<script>
function clickBtn3(){
	const div3 = document.getElementById("div3");
	let child3 = div3.firstElementChild;

	while(child3){
		if (child3.style.color == "red"){
			child3.style.color = "blue";
		}else{
			child3.style.color = "red";
		}
		child3 = child3.nextElementSibling;
	}
}
</script>

5行目のボタンを押すと8行目の関数を実行します。
10行目の先頭はdocumentではなく、9行目で取得したdiv3です。firstElementChildプロパティで2行目が対象になります。
14,16行目は、CSSで文字の色を設定しています。
18行目は、nextElementSiblingで次の要素に移動しています。

 

firstElementChild

変数 = ノード.firstElementChild;
  • 指定したノード配下の最初の子の要素を取得します。
  • 取得する要素がない場合は、nullを返します。
  • firstElementChildプロパティに似た名前にfirstChildプロパティがあります。firstChildプロパティは要素以外のノードも取得します。
  • 以下はMDNのfirstElementChildのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/ParentNode/firstElementChild

nextElementSibling

変数 = 要素(参照).nextElementSibling;

関連の記事

JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 最後の子の要素を取得して移動する(lastElementChild)

△上に戻る