WEBTODESIGN

JavaScriptで配列の個数を取得する

querySelectorAllで取得した配列の個数を取得するにはどうすればいいでしょうか?

.length

配列に.lengthをつけることで取得できます。簡単👌

試しに使ってみましょう!

例1

const li = document.querySelectorAll('li');
console.log(li.length);

上記を実行すると、ドキュメント内のliの個数がコンソールログに出力されます。

例2

const li = document.querySelectorAll('li');
if( li.length >= 3 ){
    console.log('liは3個以上です。')
} else {
    console.log('liは3個未満です。')
}

取得したliの個数が3以上か未満かで条件分岐をしてみました。このように条件分岐に簡単に使えますね👍