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

環境
Google Chrome  115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit

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


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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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