querySelector と querySelectorAll は、CSS セレクタを使って要素を取得できる便利なメソッドです。id でもクラスでも属性でも、CSS で書けるセレクタならなんでも使えます。
querySelector の基本
querySelector は、マッチする最初の要素を1つだけ返します。
// id で取得 const header = document.querySelector('#header'); // クラスで取得 const item = document.querySelector('.item'); // タグで取得 const paragraph = document.querySelector('p'); // 属性で取得 const input = document.querySelector('input[type="text"]');
見つからなければ null が返ります。
querySelectorAll の基本
querySelectorAll は、マッチするすべての要素を NodeList として返します。
const items = document.querySelectorAll('.item'); console.log(items.length); // マッチした要素の数 items.forEach(item => { console.log(item.textContent); });
querySelector と getElementById の違い
querySelector
CSS セレクタを使うので #id のようにシャープが必要。柔軟だがやや遅い
getElementById
id 名をそのまま渡す。シンプルで高速
id で取得するだけなら getElementById のほうが速いです。ただ、複雑なセレクタが必要なときは querySelector が便利です。
複雑なセレクタの例
CSS セレクタの知識がそのまま使えるのが強みです。
// 子孫セレクタ const link = document.querySelector('nav a'); // 子セレクタ const directChild = document.querySelector('ul > li'); // 複数条件 const active = document.querySelector('li.active'); // 擬似クラス const firstItem = document.querySelector('li:first-child'); const lastItem = document.querySelector('li:last-child');
実際に動かしてみよう
querySelectorAll で複数の要素を取得し、順番に色を変えてみます。
HTML
CSS
JavaScript
<ul> <li class="fruit">りんご</li> <li class="fruit">みかん</li> <li class="fruit">ぶどう</li> </ul> <button id="btn">色を変える</button>
document.querySelector('#btn').addEventListener('click', function() { const fruits = document.querySelectorAll('.fruit'); fruits.forEach((fruit, index) => { fruit.style.color = ['red', 'orange', 'purple'][index]; }); });
querySelector / querySelectorAll は現代の JavaScript では必須のメソッドです。CSS セレクタに慣れていれば、直感的に使えるでしょう。
