HTMLにおけるquerySelectorの使い方7選

はじめに
●HTMLにおけるquerySelectorとは
●querySelectorの基本的な使い方
- ○querySelectorの基本構文
●querySelectorの使い方7選
●注意点と対処法
●カスタマイズ方法
- ○カスタムデータ属性を利用する
まとめ

はじめに

HTMLにおけるquerySelectorの使い方を習得したい方々に向けて、本記事では初心者でも理解しやすい解説と実践的なサンプルコードをご紹介いたします。

基礎から応用まで、段階的に学べる構成となっておりますので、ぜひ最後までお読みください。

●HTMLにおけるquerySelectorとは

Webページ開発において非常に重宝するJavaScriptのメソッド、それがHTMLのquerySelectorです。

このメソッドを使用することで、開発者はWebページ内の特定要素を簡単に選択し、操作することが可能となります。

CSSセレクタを活用して要素を取得できる点が特徴的で、初学者にも扱いやすい機能となっております。

●querySelectorの基本的な使い方

HTML querySelectorの基本的な使い方について、詳しく解説いたします。

このメソッドを理解することで、Webページ内の要素を効率的に操作できるようになります。

まずは、基本構文から見ていきましょう。

○querySelectorの基本構文

querySelectorメソッドの基本的な使用方法をご紹介いたします。

下記のような構文で利用できます。

document.querySelector("セレクタ");

ここで指定する「セレクタ」には、CSSセレクタを用います。

例えば、idが”sample”の要素を取得する場合、次のように記述します。

document.querySelector("#sample");

このように、シンプルな構文で要素の取得が可能となります。

●querySelectorの使い方7選

実際の開発シーンで役立つquerySelectorの使用例を7つご紹介いたします。

各サンプルコードを通じて、具体的な応用方法をマスターしていきましょう。

○サンプルコード1：クリックイベントを設定する

ボタンクリック時の動作を設定する例です。

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

このコードを実装することで、指定したボタンがクリックされた際にアラートが表示されます。

○サンプルコード2：テキストを取得・変更する

要素内のテキストを操作する方法をご紹介します。

// テキストを取得
const text = document.querySelector("#text").textContent;

// テキストを変更
document.querySelector("#text").textContent = "新しいテキスト";

テキストの取得と変更が、このようにシンプルに行えます。

○サンプルコード3：クラスを追加・削除する

要素のクラスを動的に操作する例です。

// クラスを追加
document.querySelector("#element").classList.add("new-class");

// クラスを削除
document.querySelector("#element").classList.remove("old-class");

クラスの追加や削除を通じて、要素のスタイルを動的に変更できます。

○サンプルコード4：要素の表示・非表示を切り替える

要素の表示状態を制御する方法です。

const element = document.querySelector("#element");
if (element.style.display === "none") {
  element.style.display = "block";
} else {
  element.style.display = "none";
}

この方法で、要素の表示・非表示を簡単に切り替えられます。

○サンプルコード5：入力フォームの値を取得する

フォームに入力された値を取得する例です。

const inputValue = document.querySelector("#input").value;

ユーザーが入力したデータを簡単に取得できます。

○サンプルコード6：要素の属性を取得・設定する

要素の属性を操作する方法をご紹介します。

// 属性を取得
const attributeValue = document.querySelector("#element").getAttribute("data-attribute");

// 属性を設定
document.querySelector("#element").setAttribute("data-attribute", "新しい値");

要素の属性値の取得や設定が、このように行えます。

○サンプルコード7：複数の要素を取得する

複数の要素を一度に取得し操作する例です。

const elements = document.querySelectorAll(".list-item");

elements.forEach((element) => {
  console.log(element.textContent);
});

クラスが一致する全ての要素を取得し、それぞれの内容をコンソールに出力します。

●注意点と対処法

このメソッドは最初に見つかった要素のみを返すという特性があります。

複数の要素を取得したい場合は、querySelectorAllメソッドの使用をお勧めします。

また、指定した要素が見つからない場合、nullが返されます。エラーを防ぐため、nullチェックを行うことが望ましいでしょう。

●カスタマイズ方法

querySelectorをさらに効果的に活用するため、カスタマイズの方法をご紹介いたします。

特に注目すべきは、HTML5から導入されたカスタムデータ属性の活用です。

○カスタムデータ属性を利用する

HTML5の登場により、開発者は要素に独自のデータを付与できるようになりました。

これが「カスタムデータ属性」です。

data-で始まる属性名を使用することで、任意のデータを要素に関連付けることができます。

querySelectorと組み合わせることで、この機能はより一層威力を発揮します。

例えば、次のようなHTML要素があるとしましょう。

<div id="product" data-price="1000" data-category="electronics">商品名</div>

この要素に付与されたカスタムデータ属性を、JavaScriptで取得・設定する方法は次の通りです。

// カスタムデータ属性を取得
const price = document.querySelector("#product").dataset.price;
console.log(price); // "1000"が出力されます

// カスタムデータ属性を設定
document.querySelector("#product").dataset.stock = "50";

このように、dataset プロパティを通じてカスタムデータ属性にアクセスできます。属性名のdata-以降の部分がキーとなります。

この方法を使えば、HTMLとJavaScriptの間で柔軟にデータをやり取りすることが可能です。