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>

<li>tokyo</li>

<li>oosaka</li>

<li>fukuoka</li>

<li>yokohama</li>

</ul>

function chk() {

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

let child = document.querySelectorAll('.city li');

let res = child.length;

console.log("子要素の数: "+res);

}

</script>

</body>

</html>

<!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>

<!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

関連投稿: