MENU

JavaScriptの querySelector とその使い方

JavaScriptの querySelector は、CSSセレクタを使ってHTML要素を取得できる非常に便利なメソッドです。DOM操作の際に頻繁に使われるため、しっかりと理解しておくと、開発効率が向上します。この記事では、基本的な使い方から応用までをまとめて紹介します。

目次

querySelector の基本

querySelector は、HTMLドキュメント内で指定したCSSセレクタに一致する最初の要素を返します。これは、CSSセレクタを使ってDOMの特定の要素を簡単に取得できる便利なメソッドです。

基本的な構文:

let element = document.querySelector(selector);

引数 selector

querySelector の引数として指定する selector は、CSSセレクタと同じ形式で記述します。例えば、クラス名、ID、タグ名などを指定できます。

  • クラスを選択する場合:
  let element = document.querySelector('.classname');
  • IDを選択する場合:
  let element = document.querySelector('#idname');
  • タグ名を選択する場合:
  let element = document.querySelector('div');

例:特定の要素を取得する

<div id="container">
  <p class="text">最初の段落</p>
  <p class="text">2番目の段落</p>
</div>
// IDが 'container' の要素を取得
let container = document.querySelector('#container');

// クラスが 'text' の最初の段落要素を取得
let firstParagraph = document.querySelector('.text');
console.log(firstParagraph.textContent); // "最初の段落"

このように、 querySelector はCSSのセレクタと同じ形式で指定するため、CSSの知識があれば簡単に理解できます。

応用:複数のセレクタを使用する

querySelector は、複数のCSSセレクタをカンマで区切って指定することもできます。この場合、いずれかのセレクタに一致する最初の要素が返されます。

let element = document.querySelector('p.text, .highlight, #unique');

上記の例では、最初に一致した段落、ハイライトされた要素、またはIDが unique の要素が取得されます。

要素が存在しない場合の処理

querySelector が一致する要素を見つけられない場合、null が返されます。そのため、要素が存在するかどうかを確認するために、null チェックを行う必要があります。

let element = document.querySelector('.not-exist');

if (element) {
  console.log('要素が存在します。');
} else {
  console.log('要素が存在しません。');
}

querySelectorAll との違い

querySelector は最初に一致した1つの要素のみを返しますが、複数の要素を取得したい場合は querySelectorAll を使います。querySelectorAll は、指定したセレクタに一致するすべての要素を返し、返り値は NodeList という配列のようなオブジェクトです。

let allParagraphs = document.querySelectorAll('p.text');
allParagraphs.forEach(paragraph => {
  console.log(paragraph.textContent);
});

結論

querySelector は、シンプルでパワフルなDOM要素選択メソッドです。CSSセレクタと同じ構文を使うため、CSSの知識があればスムーズに利用できます。さらに、複数の要素を取得したい場合は、 querySelectorAll を活用することで、効率的にDOM操作を行うことができます。

目次