[JavaScript] 子要素の件数を取得する（.childElementCount）

投稿日：2018年4月1日更新日：2018年5月2日

子要素の件数を取得するには、.childElementCountを使用します。

サンプルソース

例）リストの数を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function test(){
  var x = document.getElementById("lst");
  var cnt = x.childElementCount;  //子要素数を取得する
  alert(cnt);
}
</script>
</head>
<body>
  <input type="button" onclick="test();" value="ボタン">
  <ul id="lst">
    <li>みかん</li>
    <li>りんご</li>
    <li>ぶどう</li>
    <li>バナナ</li>
    <li>いちご</li>
  </ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>sample</title>

function test(){

var x = document.getElementById("lst");

var cnt = x.childElementCount; //子要素数を取得する

alert(cnt);

}

</script>

</head>

<body>

</ul>

</body>

</html>

（結果）: 5

解説

リスト(ul,li)以外でも、親子関係のある要素であれば件数を取得できます。

執筆者：とら