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

2023年4月4日

環境
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

JavaScript

Posted by arkgame

関連記事: