【JavaScript】querySelectorでDOM要素の取得

JavaScriptでWebページの要素を取得する方法はいくつかありますが、querySelectorはその中でも特に強力で便利なメソッドです。この記事では、querySelectorの基本的な使い方から応用的な使い方まで、詳しく解説します。

querySelectorの基本

querySelectorは、CSSのセレクタ構文を利用して、DOM（Document Object Model）から要素を選択します。このメソッドは指定したセレクタに一致する最初の要素を返します。

例: IDセレクタで要素を選択する

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

さまざまなセレクタの使い方

クラスセレクタを使う

HTML内にclass=”sample”が設定されている最初の要素を選択します。

const element = document.querySelector('.sample');

タグ名を使う

HTML内の最初の<p>（段落）要素を選択します。

const element = document.querySelector('p');

複雑なセレクタを使う

class=”sample”が設定されている要素の中で最初の<p>要素を選択します。

const element = document.querySelector('.sample p');

querySelectorの戻り値

querySelectorは一致する要素が存在しない場合にはnullを返します。これにより、エレメントが存在するかどうかをチェックしてから操作を行うことが可能です。

const element = document.querySelector('.nonexistent');
if (element !== null) {
  element.textContent = '要素が存在します。';
}

複数の要素を選択するquerySelectorAll

複数の要素を選択したい場合は、querySelectorAllメソッドを使用します。これは指定したCSSセレクタにマッチする全ての要素をNodeListの形で返します。

const elements = document.querySelectorAll('.sample');

実用例

以下は、HTML要素をquerySelectorで選択し、その後その要素のテキストを変更するシンプルな例です。

HTML

<p id="example">これはテストです。</p>

JavaScript

const element = document.querySelector('#example');
element.textContent = 'テキストが変更されました。';

このスクリプトを実行すると、Webページ上の表示が「これはテストです。」から「テキストが変更されました。」に変わります。

よくある質問（FAQ）

まとめ

querySelectorはJavaScriptでDOMの要素を効率的に選択するための強力なツールです。シンプルなセレクタから複雑なセレクタまで、幅広い用途で利用することができます。このメソッドを使いこなせば、Webページの操作がより簡単かつ効率的になるでしょう。