ywork2020.com

Title

親要素の子要素ノードを取得する

目次 (INDEX)

childrenとは

ここで説明するchildren とは次の語句からなるjavascriptのプロパティです。
children
読み: チルドレン
意味: 子達、子供達

目次に戻る

childrenプロパティの概要

このプロパティは、親要素ノードに内包された全ての子要素ノードを生きているHTMLCollectionとして取得することができます。

これは読み取り専用プロパティなので、コレクションの取得しかできませんが、 itemメソッドか配列スタイルの記法を使ってコレクションに含まれる個々のノードにアクセスすることができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var children = Node.children;

目次に戻る

サンプルコードと実行結果

このサンプルはdiv要素のみで構成した親子要素を使って、識別子idParentの子要素ノードをHTMLCollectionとして取得し、 そのコレクションから「インデックス番号 = 1」の要素にスタイル属性を付与して背景色を設定してみました。

サンプルコード: CSS
<style>
	#idParent{
		counter-set: countChild -1;
		border: thick solid ##lightgreen;
	}
	.clsChildren{
		counter-increment: countChild;
		border: thin solid ##tomato;
		margin: 5px;
		padding: 5px;
	}
	.clsChildren::after{
		content: "[" counter(countChild) "]";
	}
</style>
  • 03, 07, 13: カウント (CSSで要素のカウントをとってインデックス番号を追加表示しています。)
サンプルコード: HTML
<body>
	<div id="idParent">
		<div class ="clsChildren">子要素ノード</div>
		<div class ="clsChildren">子要素ノード</div>
		<div class ="clsChildren">子要素ノード</div>
	</div>
</body>
  • 02: 親要素 (この要素の子要素ノードを取得します。)
  • 03-05: 子要素 (子要素です。この要素らがコレクションとなります。)
サンプルコード: script
<script>
	let elmParent = document.getElementById("idParent");
	let elmChildren = elmParent.children;
	elmChildren[1].setAttribute("style", "background-color: ##lightblue");
	elmParent.insertAdjacentText("afterend", "子要素数 = " + elmChildren.length);
</script>
  • 04: 結果の出力 (elmChildren[1]はインデックス番号でいうと2番目の要素になります。この要素のstyle属性にアクセスして背景色を変更しています。)
  • 05: 結果の出力 (子要素数を取得し、表示しています。childElementCountでも求めることができます。)
実行結果:
子要素ノード
子要素ノード
子要素ノード

目次に戻る