JavaScript querySelectorメソッドで要素を検索するサンプル

2023年8月11日

環境
Google Chrome　 115.0.5790.171（Official Build）（64 ビット）
Windows 11 Pro 64bit

構文
querySelector(selectors)
selectors:文字列で、照合する 1 つ以上のセレクターを設定します。

例
document.querySelectorAll('.city’);
“city"というclass属性を持つ要素をすべて取得します
querySelectorメソッドは、指定したCSSセレクタに一致する要素ノードを取得します。

使用例

<!DOCTYPE html>
<html>
<body>

<div>
  <h2>都市について</h2>
  <p class="city">東京</p>
  <p class="city">大阪</p>
  <p class="city">福岡</p>
</div>

<button onclick="funA()">変更</button>

<script>
function funA() {

  // "city"というclass属性を持つ要素をすべて取得
  let ele= document.querySelectorAll('.city');
  // 取得した要素の数
  console.log(ele.length);
  // 2番目の要素
  console.log(ele[1].outerText);
  
}
</script>

</body>
</html>

実行結果
3
大阪

JavaScript

Posted by arkgame

関連記事: