【JavaScript】querySelector / querySelectorAll の使い方｜CSS セレクタ・NodeList・ループ・パフォーマンスまで解説

// querySelector: 最初の 1 要素を取得
const header = document.querySelector("h1");
const firstCard = document.querySelector(".card");
const mainTitle = document.querySelector("#main-title");

// querySelectorAll: 一致する全要素を取得
const allCards = document.querySelectorAll(".card");
console.log(allCards.length); // 一致した要素数

// 見つからない場合
const notFound = document.querySelector(".nonexistent"); // null
const empty = document.querySelectorAll(".nonexistent");  // NodeList [] (length=0)

// data 属性で取得
const user = document.querySelector('[data-user-id="42"]');

// フォームの特定 input
const emailInput = document.querySelector('input[type="email"]');

// チェック済みのラジオボタン
const checked = document.querySelector('input[name="plan"]:checked');

// hidden 以外の全 input
const visibleInputs = document.querySelectorAll('input:not([type="hidden"])');

// テーブルの偶数行
const evenRows = document.querySelectorAll("tr:nth-child(even)");

const cards = document.querySelectorAll(".card");

// forEach（最もシンプル）
cards.forEach(card => {
  card.classList.add("active");
});

// for...of
for (const card of cards) {
  card.classList.add("active");
}

// インデックス付きアクセス
console.log(cards[0]);        // 最初の要素
console.log(cards.length);    // 要素数

// 配列メソッド（filter / map 等）を使いたい場合
const activeCards = [...cards].filter(c => c.classList.contains("active"));
// または Array.from(cards).filter(...)

// document 全体ではなく、特定の親要素内から検索
const sidebar = document.querySelector(".sidebar");
const sidebarLinks = sidebar.querySelectorAll("a");
// .sidebar 内の a 要素だけ取得

// CSS の子孫セレクタでも同じ結果
const sidebarLinks2 = document.querySelectorAll(".sidebar a");

// 注意: sidebar が null の場合 → エラー
// sidebar?.querySelectorAll("a") で安全に

// クリックされた要素から最も近い .card を探す
document.addEventListener("click", (e) => {
  const card = e.target.closest(".card");
  if (card) {
    console.log("カードがクリックされた");
  }
});

// 要素が特定のセレクタに一致するか
const el = document.querySelector(".card");
console.log(el.matches(".card.active")); // true / false

// イベントデリゲーションで活用
document.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".card").remove();
  }
});

const form = document.querySelector("#myForm");
const inputs = form.querySelectorAll("input, select, textarea");

const formData = {};
inputs.forEach(input => {
  if (input.name) {
    formData[input.name] = input.value;
  }
});
console.log(formData);

document.querySelectorAll('a[href^="http"]').forEach(link => {
  if (!link.hostname.includes(location.hostname)) {
    link.setAttribute("target", "_blank");
    link.setAttribute("rel", "noopener noreferrer");
  }
});

document.querySelectorAll("table.striped tr:nth-child(even)").forEach(row => {
  row.classList.add("bg-gray");
});

const checked = document.querySelectorAll('input[name="categories"]:checked');
const values = [...checked].map(cb => cb.value);
console.log(values); // ["food", "drink"]

// 親要素 1 つにイベントを登録し、子要素をセレクタで判定
document.querySelector(".todo-list").addEventListener("click", (e) => {
  const deleteBtn = e.target.closest(".delete-btn");
  if (deleteBtn) {
    deleteBtn.closest(".todo-item").remove();
  }
});

// NG: ループ内で毎回検索
// for (...) { document.querySelector(".header").style.color = "red"; }

// OK: 変数にキャッシュ
const header = document.querySelector(".header");
if (header) header.style.color = "red";