childElementCountとは
- ここで説明するchildElementCount とは次の語句からなるjavascriptのプロパティです。
- child
- 読み: チャイルド
意味: 子、子供 - element
- 読み: エレメント
意味: 要素 - count
- 読み: カウント
意味: 数、数える
childElementCountプロパティの概要
このプロパティは、指定した要素に内包される全ての子要素のカウントを求めることができます。
求められる値は、符号なし長整数型となり、読み取り専用の値となります。
構文
サンプルを見る前に構文を確認しておきます。
var count = Node.childElementCount;サンプルコードと実行結果
このサンプルではol要素を親要素として、要素に内包されるli要素の数を求めます。 今回はol要素が親ということもあり、li要素のみのカウントとなりますが、根本的には子要素の数を求めるプロパティですので 子要素として別の要素が混じっている場合は、全ての子要素のカウントとなります。
サンプルコード: CSS
<style>
#idOl{
counter-reset: countLi;
list-style: "☆";
}
#idOl li{
text-decoration: underline dotted ##mediumvioletred;
counter-increment: countLi;
}
#idOl li::after{
content: counter(countLi);
}
</style>
サンプルコード: HTML
<body>
<ol id="idOl">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
</body>
- 02: ol要素 (リストの親要素です。この要素の子要素数をプロパティで求めます。)
- 03-05: li要素 (リストです。今回はこの要素の数を求めます。)
サンプルコード: script
<script>
let elmOl = document.getElementById("idOl");
elmOl.insertAdjacentText("afterend", "子要素数: " + elmOl.childElementCount);
</script>
- 02: エレメント変数 (elmOl = idOlの要素です。)
- 03: 結果の出力 (elmOlの要素の次にテキストノードとして結果を挿入します。)
- リスト
- リスト
- リスト