document.querySelectorの使い方と注意点7選

●document.querySelectorとは
●document.querySelectorの戻り値
- ○要素が見つからない場合の戻り値
- ○サンプルコード4：要素が見つからない場合の処理
●document.querySelectorとquerySelectorAllの違い
- ○サンプルコード5：querySelectorAllを使った複数要素の取得
●document.querySelectorの注意点
●よくあるエラーと対処法
●document.querySelectorの応用例
まとめ

●document.querySelectorとは

皆さんは、JavaScriptを使ってWebページの特定の要素を取得したいと思ったことはありませんか？

例えば、あるボタンをクリックしたら、特定の要素の色を変更したり、テキストを変更したりするような処理を実装する際に、まず目的の要素を取得する必要があります。

その際に、とても便利なのがdocument.querySelectorメソッドです。

このメソッドは、CSSセレクターを使って、HTMLドキュメント内の要素を取得することができます。

CSSセレクターに慣れている方であれば、直感的に使いこなすことができるでしょう。

○document.querySelectorの基本的な使い方

document.querySelectorメソッドの基本的な使い方は、とてもシンプルです。

下記のように、document.querySelectorメソッドの引数にCSSセレクターを指定するだけで、該当する要素を取得できます。

const element = document.querySelector('セレクター');

取得した要素は、定数や変数に代入して、後から利用することができます。

○サンプルコード1：IDセレクターを使った要素の取得

では、実際にサンプルコードを見ながら、document.querySelectorメソッドの使い方を確認していきましょう。

まずは、IDセレクターを使った要素の取得です。

HTML:

<div id="target">これは目的の要素です。</div>

JavaScript:

const targetElement = document.querySelector('#target');
console.log(targetElement.textContent);

上記のコードでは、IDが「target」の要素を取得し、そのtextContentプロパティを出力しています。

コンソールには「これは目的の要素です。」と表示されるはずです。

○サンプルコード2：クラスセレクターを使った要素の取得

次に、クラスセレクターを使った要素の取得を見てみましょう。

HTML:

<ul>
  <li class="item">アイテム1</li>
  <li class="item">アイテム2</li>
  <li class="item">アイテム3</li>
</ul>

JavaScript:

const itemElement = document.querySelector('.item');
console.log(itemElement.textContent);

上記のコードでは、クラス名が「item」の要素を取得しています。

ただし、document.querySelectorメソッドは、該当する要素が複数ある場合、最初に見つかった要素のみを返します。

そのため、コンソールには「アイテム1」と表示されます。

○サンプルコード3：タグ名を使った要素の取得

最後に、タグ名を使った要素の取得を見てみましょう。

HTML:

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

JavaScript:

const listElement = document.querySelector('li');
console.log(listElement.textContent);

上記のコードでは、タグ名が「li」の要素を取得しています。

クラスセレクターの例と同様に、最初に見つかった要素のみが返されるため、コンソールには「リスト1」と表示されます。

●document.querySelectorの戻り値

前回は、document.querySelectorメソッドを使って要素を取得する基本的な方法を見てきました。

しかし、実際にコードを書いていると、「指定したセレクターに該当する要素が存在しない」というケースに遭遇することがあります。

そんな時、document.querySelectorメソッドはどのような値を返すのでしょうか？

○要素が見つからない場合の戻り値

document.querySelectorメソッドは、指定したセレクターに該当する要素が存在しない場合、nullを返します。

これは、要素が見つからなかったことを示すための仕様です。nullは、JavaScriptにおける特別な値で、「値が存在しない」ことを表します。

次のようなHTMLがあったとします。

<div id="container">
  <p>これは段落です。</p>
</div>

ここで、存在しないIDセレクターを指定してみましょう。

const elementA = document.querySelector('#foo');
console.log(elementA); // null

コンソールにはnullと表示されます。

これは、指定したセレクター（#foo）に該当する要素が存在しないためです。

○サンプルコード4：要素が見つからない場合の処理

要素が見つからない場合の処理を適切に行わないと、予期せぬエラーが発生する可能性があります。

nullに対してプロパティアクセスやメソッド呼び出しを行うと、エラーが発生してしまいます。これを防ぐためには、nullチェックを行う必要があります。

先ほどのサンプルコードを、nullチェックを含めて書き直してみましょう。

const elementA = document.querySelector('#foo');

if (elementA !== null) {
  console.log(elementA.textContent);
} else {
  console.log('要素が見つかりませんでした。');
}

このように、document.querySelectorメソッドの戻り値がnullかどうかをチェックすることで、要素が見つからない場合の処理を適切に行うことができます。

●document.querySelectorとquerySelectorAllの違い

document.querySelectorメソッドについて理解が深まってきたところで、ここで似たようなメソッドであるdocument.querySelectorAllメソッドについても触れておきましょう。

この2つのメソッドは、どちらもCSSセレクターを使って要素を取得するという点では共通していますが、大きな違いがあります。

その違いとは、戻り値の型です。

document.querySelectorメソッドが単一の要素を返すのに対し、document.querySelectorAllメソッドは複数の要素を含むNodeListオブジェクトを返します。

つまり、querySelectorメソッドは「最初に見つかった要素」を返すのに対し、querySelectorAllメソッドは「該当する全ての要素」を返すのです。

この違いを理解しておくことは、適切なメソッドを選択する上で非常に重要です。

単一の要素を取得したい場合はquerySelectorメソッドを、複数の要素を取得したい場合はquerySelectorAllメソッドを使うようにしましょう。

使い分けを間違えると、思わぬバグに悩まされることになりかねません。

○サンプルコード5：querySelectorAllを使った複数要素の取得

querySelectorAllメソッドを使うと、指定したセレクターに該当する全ての要素を取得できます。

querySelectorAllメソッドは、NodeListオブジェクトを返します。これは、複数の要素を含む特殊なオブジェクトです。

次のようなHTMLがあったとします。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ここで、querySelectorAllメソッドを使って全てのliタグを取得してみましょう。

const items = document.querySelectorAll('li');
console.log(items.length); // 3

for (let i = 0; i < items.length; i++) {
  console.log(items[i].textContent);
}
// アイテム1
// アイテム2
// アイテム3

querySelectorAllメソッドは、該当する全てのli要素を含むNodeListオブジェクトを返します。

lengthプロパティでその数を確認することができ、for文を使って個々の要素にアクセスすることができます。

querySelectorAllメソッドを使いこなすことで、より柔軟でパワフルなDOM操作が可能になります。

●document.querySelectorの注意点

document.querySelectorメソッドは非常に便利で強力なメソッドですが、使う上でいくつかの注意点があります。

これらの注意点を理解し、適切に対処することが、効率的かつ安全なコーディングにつながります。

ここでは、パフォーマンスに関する注意点とnullチェックの重要性について詳しく見ていきましょう。

○パフォーマンスに関する注意点

document.querySelectorメソッドは、CSSセレクターをもとに要素を探すため、他のDOM取得メソッドと比較すると、パフォーマンスが劣る場合があります。

CSSセレクターを解析し、要素を探索するためには、一定の処理時間が必要となります。

特に、複雑なセレクターを使用したり、大規模なHTMLドキュメントを対象にしたりする場合、パフォーマンスへの影響が大きくなります。

次のようなサンプルコードを見てみましょう。

○サンプルコード6：getElementByIdとの速度比較

const startTime1 = performance.now();
document.getElementById('target');
const endTime1 = performance.now();
console.log(`getElementById: ${endTime1 - startTime1}ms`);

const startTime2 = performance.now();
document.querySelector('#target');
const endTime2 = performance.now();
console.log(`querySelector: ${endTime2 - startTime2}ms`);

このコードでは、document.getElementByIdメソッドとdocument.querySelectorメソッドを使って、同じ要素を取得するのにかかる時間を比較しています。

一般的に、getElementByIdメソッドの方が高速です。

パフォーマンスが重要な場面では、document.querySelectorメソッドの使用を避け、getElementByIdメソッドなどの代替メソッドを検討することをおすすめします。

○nullチェックの重要性

document.querySelectorメソッドは、該当する要素が見つからない場合、nullを返します。

nullチェックを怠ると、エラーが発生する可能性があります。

nullに対してプロパティアクセスやメソッド呼び出しを行おうとすると、エラーが発生します。

これを防ぐには、nullチェックが必要不可欠です。

○サンプルコード7：nullチェックを行う例

const element = document.querySelector('#target');

if (element !== null) {
  console.log(element.textContent);
} else {
  console.log('要素が見つかりませんでした。');
}

このように、document.querySelectorメソッドの戻り値がnullでないことを確認してから、要素に対する操作を行うようにしましょう。

nullチェックを習慣づけることで、エラーを未然に防ぎ、安全なコードを書くことができます。

●よくあるエラーと対処法

document.querySelectorメソッドを使っていると、時々エラーに遭遇することがあります。

エラーメッセージを見ても、どこが問題なのかすぐにはわからないことも多いですよね。

ここでは、よく見かけるエラーとその対処法を見ていきましょう。

エラーの原因を理解し、適切に対処できるようになることが、スムーズなコーディングにつながります。

○TypeError: Cannot read property ‘querySelector’ of null

このエラーは、nullに対してquerySelectorメソッドを呼び出そうとした時に発生します。

querySelectorメソッドは、Document、DocumentFragment、Elementインスタンスに対して呼び出すことができます。

nullはこれらのインスタンスではないため、エラーが発生するのです。

const element = document.getElementById('parent');
const child = element.querySelector('.child');

ここで、’parent’という IDの要素が存在しない場合、elementにはnullが代入されます。

その状態でquerySelectorメソッドを呼び出そうとすると、このエラーが発生します。

このエラーを防ぐには、querySelectorメソッドを呼び出す前に、nullチェックを行う必要があります。

○Uncaught TypeError: Cannot read property ‘addEventListener’ of null

このエラーは、nullに対してaddEventListenerメソッドを呼び出そうとした時に発生します。

addEventListenerメソッドは、EventTargetインスタンスに対して呼び出すことができます。

nullはEventTargetインスタンスではないため、エラーが発生するのです。

const button = document.querySelector('#button');
button.addEventListener('click', handleClick);

ここで、’button’というIDの要素が存在しない場合、buttonにはnullが代入されます。

その状態でaddEventListenerメソッドを呼び出そうとすると、このエラーが発生します。

このエラーを防ぐには、addEventListenerメソッドを呼び出す前に、nullチェックを行う必要があります。

○Uncaught TypeError: Cannot set property ‘innerHTML’ of null

このエラーは、nullに対してinnerHTMLプロパティを設定しようとした時に発生します。

innerHTMLプロパティは、Elementインスタンスに対して設定することができます。

nullはElementインスタンスではないため、エラーが発生するのです。

const div = document.querySelector('#myDiv');
div.innerHTML = '<p>Hello, world!</p>';

ここで、’myDiv’というIDの要素が存在しない場合、divにはnullが代入されます。

その状態でinnerHTMLプロパティを設定しようとすると、このエラーが発生します。

このエラーを防ぐには、innerHTMLプロパティを設定する前に、nullチェックを行う必要があります。

●document.querySelectorの応用例

さて、ここまででdocument.querySelectorメソッドの基本的な使い方と注意点について理解が深まったのではないでしょうか。

でも、実際の開発では、もっと複雑で動的な処理を実装する必要がありますよね。

ここからは、そんな実践的な場面で役立つdocument.querySelectorメソッドの応用例を見ていきましょう。

これらの例を通して、document.querySelectorメソッドの真の力を体感してください。

○サンプルコード8：動的に追加された要素に対する処理

document.querySelectorメソッドは、動的に追加された要素に対しても使用することができます。

document.querySelectorメソッドは、その時点での最新のDOM構造に対して要素を取得します。

そのため、JavaScriptで動的に要素を追加した後でも、その要素を取得することができるのです。

次のようなサンプルコードを見てみましょう。

<button id="addButton">要素を追加</button>
<div id="container"></div>

const addButton = document.querySelector('#addButton');
const container = document.querySelector('#container');

addButton.addEventListener('click', function() {
  const newElement = document.createElement('p');
  newElement.textContent = '新しい要素です。';
  newElement.classList.add('new-element');
  container.appendChild(newElement);

  const newElementFromSelector = document.querySelector('.new-element');
  console.log(newElementFromSelector.textContent);
});

このコードでは、ボタンをクリックすると新しいp要素が動的に追加されます。

そして、追加された要素に対してdocument.querySelectorメソッドを使って取得し、そのtextContentプロパティを出力しています。

動的に追加された要素に対しても、document.querySelectorメソッドを使って柔軟に操作することができます。

○サンプルコード9：CSSセレクターを使った柔軟な要素の取得

document.querySelectorメソッドでは、CSSセレクターを使って柔軟に要素を取得することができます。

CSSセレクターには、要素の階層関係や属性、状態などを指定する様々な記法があります。

これを活用することで、より細かな条件で要素を取得できるのです。

次のようなHTMLを考えてみましょう。

<article>
  <h1>記事のタイトル</h1>
  <p>記事の本文です。</p>
  <a href="#">リンク1</a>
  <a href="https://example.com" target="_blank">リンク2</a>
</article>

ここから、特定の条件に合う要素を取得してみます。

// articleの直下のaタグを取得
const link = document.querySelector('article > a');
console.log(link.textContent); // リンク1

// target属性が_blankのaタグを取得
const externalLink = document.querySelector('a[target="_blank"]');
console.log(externalLink.textContent); // リンク2

このように、CSSセレクターを使えば、HTMLの構造や属性に基づいて柔軟に要素を取得することができます。

CSSセレクターの力を借りることで、document.querySelectorメソッドはより強力なツールになります。

○サンプルコード10：イベントリスナーの設定

document.querySelectorメソッドで取得した要素に対して、イベントリスナーを設定することができます。

JavaScriptでは、ユーザーのアクションに反応して動的に処理を行うことが多くあります。

そのためには、特定の要素に対してイベントリスナーを設定する必要があるのです。

次のようなHTMLとJavaScriptのコードを見てみましょう。

<button id="myButton">クリックしてください</button>

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

ここでは、document.querySelectorメソッドを使ってボタン要素を取得し、その要素に対してclickイベントのリスナーを設定しています。

ボタンがクリックされると、アラートが表示されます。

document.querySelectorメソッドとイベントリスナーを組み合わせることで、インタラクティブなウェブページを作成することができます。

まとめ

document.querySelectorメソッドは、JavaScriptでDOM操作を行う上で非常に重要なツールです。

CSSセレクターを使った柔軟な要素の取得、動的に追加された要素への対応、イベントリスナーとの連携など、その応用範囲は広範に及びます。

一方で、パフォーマンスへの影響やnullチェックの必要性など、注意すべき点も何点かあります。

この記事で紹介したサンプルコードを参考に、document.querySelectorメソッドを活用してみてください。

試行錯誤を重ねながら、このメソッドを自在に使いこなせるようになることが、JavaScriptの理解を深める上で大切です。