JavaScript querySelectorAllで子要素を指定して子要素の数を取得する
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
構文
document.querySelectorAll('.クラス名 子要素’);
document.querySelectorAll('.クラス名 li’);
querySelectorAll()を使って指定要素内にあるliタグを全て取得します。
使用例
<!DOCTYPE html> <html> <body> <ul class="city"> <li>tokyo</li> <li>oosaka</li> <li>fukuoka</li> <li>yokohama</li> </ul> <button onclick="chk()">確認</button> <script> function chk() { //子要素を指定して数を取得する let child = document.querySelectorAll('.city li'); let res = child.length; console.log("子要素の数: "+res); } </script> </body> </html>
実行結果
子要素の数: 4