JavaScript children 全ての子の要素を取得/設定する

nas2017/04/13

JavaScriptの全ての子の要素を取得/設定するサンプルです。

目次

説明 childrenプロパティ
サンプル value値を取得/設定するサンプル
  textContentで文字を取得/設定するサンプル
  CSSで文字の色を変更するサンプル

childrenプロパティ

変数 = 要素.children;
  • 指定した要素の全ての子要素(HTMLCollection)を取得します。
  • childrenプロパティに似た名前にchildnodesプロパティがありますが、childnodesプロパティは要素以外のノードも取得します。

以下は、chromeのconsole.logで見た時のHTMLCollectionです。2つの要素があります。

 

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

ボタンを押すとchildrenプロパティで全ての子の要素を取得し、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 child1 = div1.children;

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

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

 

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

ボタンを押すとchildrenプロパティで全ての子の要素の取得しtextContentで文字が変わります。

赤

赤

コード

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

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

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

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

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

 

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

ボタンを押すとchildrenプロパティで全ての子の要素の取得しCSSで文字の色が変わります。

赤

赤

コード

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

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

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

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

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

以下は、MDNのParentNode.childrenのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/children

関連の記事

JavaScript nextElementSibling DOMで次に移動
JavaScript 要素を追加/削除する(createElement他)

△上に戻る