Terms Privacy

© Rollpie

JavaScript
15 Jan 2026

querySelector と querySelectorAll の使い方

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 セレクタに慣れていれば、直感的に使えるでしょう。

7 views