JavaScriptのquerySelector徹底解説！使い方とダークモード実装例

getElementByIdやgetElementsByClassNameといった関数を耳にしたことがある方も多いでしょう。これらはいずれも、JavaScriptで特定のHTML要素を選択するためのメソッドです。

要素を選択できれば、その内容の変更や状態の修正、さらには画面から消すことまで自由自在に行えます。

実は、Webページ上の要素を選択するためにもうひとつ便利なメソッドがあります。それがquerySelectorです。さらに、その姉妹メソッドにあたるquerySelectorAllは、条件に合致するすべての要素を返してくれます。

この記事では、querySelectorとquerySelectorAllメソッドの使い方を詳しく解説します。実際のコード例も交えて紹介するので、読み終える頃には自分のコードで活用できるようになっているはずです。

querySelectorとは？

querySelectorは、CSSセレクタに一致する要素を返すメソッドです。なお、このメソッドはセレクタに一致する最初の要素のみを返すという点に注意してください。querySelectorでは、任意のCSSセレクタを指定できます。たとえば、特定のIDを持つ要素や、タグ名で要素を取得することも可能です。

基本的な使い方は以下の通りです。

var elementName = document.querySelector('#thisElement');

CSSセレクタは引用符の中に指定します。また、このメソッドを使えば、ある要素の中にある別の要素を選択することもできます。

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

このコードは、HTMLファイル内の<main>タグに含まれる、IDが「#childElement」の要素を返します。

querySelectorAllメソッドも同じように使えます。違いは、最初の1件だけではなく、クエリセレクタに一致したすべての要素を返す点です。

var allParagraphs = document.querySelectorAll('p');

このコードは、HTMLページ上のすべての<p>タグのリストを返します。

このメソッドで使えるセレクタの例をいくつか挙げます。

p：ページ上のすべての<p>タグを選択します。
#name_field：idが「name_field」の要素を選択します。
.list：class名が「list」のすべての要素を選択します。
div > p：<div>要素の中にあるすべての<p>要素を選択します。

querySelectorやquerySelectorAllでは、複数のセレクタを組み合わせて指定することもできます。CSSセレクタについてさらに詳しく知りたい方は、CSS・HTML属性セレクタに関するガイドも参考にしてください。

なお、一致する要素が見つからなかった場合は、nullが返されます。

querySelectorの使い方

ここからは、簡単なWebアプリケーションを作りながら、querySelectorメソッドの動きを実際に見ていきましょう。HTMLに関する豆知識を表示するWebページを作成し、querySelectorを使ってクリックすると「ダークモード」が有効になるボタンを実装します。

フロントエンドの準備

まずはページのフロントエンドを整えましょう。

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

HTMLに関する豆知識を表示するシンプルなWebページが完成しました。現時点でのページの見た目は次のようになっています。

JavaScriptのquerySelector徹底解説！使い方とダークモード実装例

豆知識は表示されていますが、スタイルと機能するダークモードボタンという2つの重要な要素がまだ足りません。そこで、facts.cssというファイルに以下のスタイルを追加しましょう。

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

スタイルを適用すると、サイトの見た目がぐっと洗練されます。

以上でフロントエンドの準備は完了です。次は、JavaScriptでダークモード機能を追加していきましょう。

JavaScriptでダークモードを実装する

ダークモード機能には、次の2つの要素が必要です。

ボックス内の見出しと段落の文字色を白に変更する。
サイトの青い背景色を黒に変更する。

まずは、操作対象となるDOM要素（ページ上の要素）を選択しましょう。対象は、見出し・段落・bodyの3つです。facts.jsというファイルに以下のコードを記述します。

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

このコードは、ドキュメント内で<h1>、<p>、<body>タグに一致する最初の要素をそれぞれ返します。

続いて、テキストとbodyタグの色を変更する関数を作成します。見出しと段落の文字色を白に、サイトの背景色を黒に変更しましょう。

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

もう少しです。次はイベントリスナーを設定します。このリスナーは、ユーザーがボタンをクリックしたタイミングを検知し、ダークモードを有効にします。

document.querySelector("button").addEventListener("click", enableDarkMode);

それでは、ボタンをクリックするとどうなるか見てみましょう。

サイトが無事にダークモードへ切り替わりました。

まとめ（チャレンジ付き）

気づいた方もいるかもしれませんが、今のコードではダークモードを「有効にする」ことしかできません。そこでチャレンジです。ダークモードを解除できるコードを自分で書いてみてください。

querySelectorメソッドを使うと、CSSセレクタによるクエリをもとにHTML要素を選択できます。このメソッドは最初に一致した要素を返します。一致するすべての要素のリストを取得したい場合は、querySelectorAllメソッドを使用しましょう。

これであなたも、プロのようにquerySelectorメソッドを使いこなせるはずです。

JavaScriptのmap()メソッド徹底解説！基本構文からReactでの活用例まで

【初心者向け】JavaScriptのデフォルトパラメータの使い方を徹底解説

JavaScriptでJSONデータからHTMLを動的に生成する方法
はじめにWeb開発において、APIから取得したJSONデータをHTMLとして画面に表示する処理は非常によく使われるテクニックです。本記事では、JavaScriptのfetchメソッドを使ってJSONデータを取得し、そのデータをもとにHTMLのテーブルを動的に生成する方法を解説します。補足：本記事のサンプルコードでは「JSONPlaceholder」というサービスを利用しています。JSONPlaceholderは、テストやプロトタイプ開発のために用意された無料のダミー（フェイク）REST APIであり、実際のサーバーを構築しなくても手軽にJSONデータの取得を試すことができます。サンプルコード
JavaScriptでIDを指定して要素を削除する方法
JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, in