JavaScript | HTMLの子要素の数を取得する方法

2021-07-182021-11-19JavaScript CSSセレクタ,JavaScript

JavaScriptで指定したHTML要素の中にある子要素の数を取得する方法を紹介しています。

サンプルHTMLにはid名を付けたulタグに3つのliタグを作成しています。

<ul id="target">
  <li>ItTEM 01</li>
  <li>ItTEM 02</li>
  <li>ItTEM 03</li>
</ul>

childElementCountで子要素の数を取得する

childElementCountプロパティで子要素の数を取得するJavaScriptのサンプルコードです。

childElementCountで子要素の数を取得しています。

親要素の取得にはquerySelector()にidを指定して利用しています。

let count = document.querySelector('#target').childElementCount;

console.log(count);
// 3

childrenとlengthで子要素の数を取得する

childrenプロパティを使ってlengthプロパティで子要素の数を取得するサンプルコードです。

let count = document.querySelector('#target').children.length;

console.log(count);
// 3

その後の処理で取得した子要素を扱う場合は以下のようにしておきます。

let child = document.querySelector('#target').children.length;
let count = child.length;
console.log(count);
// 3

querySelectorAllで子要素を指定して数を取得する

querySelectorAll()を使って指定要素内にあるliタグを全て取得、lengthでその数を取得しています。

let child = document.querySelectorAll('#target li');
let count = child.length;

console.log(count);
// 3