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セレクタに一致する要素ノードを取得します。
使用例
<!DOCTYPE html> <html> <body> <div> <h2>都市について</h2> <p class="city">東京</p> <p class="city">大阪</p> <p class="city">福岡</p> </div> <button>変更</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
大阪