初心者でも簡単！HTML querySelectorの使い方7選

HTML

2023.04.062023.05.21

この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

この記事を読めば、初心者でもHTML querySelectorの使い方を簡単に理解し、実践的なスキルを身につけることができるようになります。

●HTML querySelectorとは

HTML querySelectorは、Webページ内の特定の要素を選択し操作できるJavaScriptのメソッドです。

CSSセレクタを利用して、簡単に要素を取得できるため、初心者にもおすすめの便利な機能です。

●querySelectorの基本的な使い方

○querySelectorの基本構文

querySelectorメソッドは、下記のように使用します。

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

ここで、”セレクタ”には、CSSセレクタを指定します。

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

document.querySelector("#sample");

●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);
});

●注意点と対処法

querySelectorは、見つかった要素の中で最初のものを返します。

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

また、要素が見つからない場合はnullが返されます。

そのため、要素が見つからない場合でもエラーが発生しないよう、nullチェックを行いましょう。

●カスタマイズ方法

querySelectorを使用する際に、さらに便利に使うためのカスタマイズ方法を紹介します。

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

HTML5では、data-*という形式のカスタムデータ属性を利用できます。

これを使って、要素に任意のデータを追加できます。querySelectorを使ってカスタムデータ属性を取得・設定する方法を下記に示します。

// カスタムデータ属性を取得
const customData = document.querySelector("#element").dataset.customData;

// カスタムデータ属性を設定
document.querySelector("#element").dataset.customData = "新しい値";