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でも求めることができます。)
子要素ノード
子要素ノード
子要素ノード