【JavaScript】クラス名で要素を取得する方法｜querySelectorAll・getElementsByClassName・classList・複数クラス・実務パターンまで解説

<div class="card active">カード1</div>
<div class="card">カード2</div>
<div class="card active">カード3</div>
<div class="item">アイテム</div>

// .card クラスを持つ全要素を取得
const cards = document.querySelectorAll(".card");
console.log(cards.length); // 3

// .card.active の両方を持つ要素（AND 条件）
const activeCards = document.querySelectorAll(".card.active");
console.log(activeCards.length); // 2

// .card または .item（OR 条件: カンマ区切り）
const mixed = document.querySelectorAll(".card, .item");
console.log(mixed.length); // 4

// 最初の .card 要素だけ取得
const firstCard = document.querySelector(".card");
console.log(firstCard.textContent); // "カード1"

// 見つからない場合は null
const notFound = document.querySelector(".nonexistent");
console.log(notFound); // null

// クラス名で要素を取得（ドット不要）
const cards = document.getElementsByClassName("card");
console.log(cards.length); // 3

// 複数クラスの AND 条件（スペース区切り）
const activeCards = document.getElementsByClassName("card active");
console.log(activeCards.length); // 2

// NG: ライブコレクションでループ中にクラスを変更
const items = document.getElementsByClassName("old");
for (let i = 0; i < items.length; i++) {
  items[i].classList.replace("old", "new");
  // クラスが変わると items から消える → 次の要素がスキップされる!
}

// OK: querySelectorAll なら安全
const items2 = document.querySelectorAll(".old");
items2.forEach(el => {
  el.classList.replace("old", "new"); // 安全（静的コレクション）
});

// forEach（最もシンプル: NodeList で使用可能）
document.querySelectorAll(".card").forEach(card => {
  card.style.border = "1px solid blue";
});

// for...of
for (const card of document.querySelectorAll(".card")) {
  card.style.border = "1px solid blue";
}

// 通常の for ループ（インデックスが必要な場合）
const cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++) {
  cards[i].style.border = "1px solid blue";
}

// getElementsByClassName を forEach で使う場合
const collection = document.getElementsByClassName("card");
Array.from(collection).forEach(card => {
  card.style.border = "1px solid blue";
});

const el = document.querySelector(".card");

// クラスの追加
el.classList.add("active");
el.classList.add("highlight", "animate"); // 複数同時追加

// クラスの削除
el.classList.remove("active");

// クラスの切り替え（あれば削除、なければ追加）
el.classList.toggle("active");

// 条件付き切り替え（true=追加 / false=削除）
el.classList.toggle("active", isLoggedIn);

// クラスの存在チェック
if (el.classList.contains("active")) {
  console.log("active クラスがある");
}

// クラスの置換
el.classList.replace("old-class", "new-class");

// 特定の親要素内からのみ検索
const sidebar = document.querySelector(".sidebar");
const sidebarLinks = sidebar.querySelectorAll(".nav-link");
// .sidebar 内の .nav-link だけ取得（ページ全体は検索しない）

// CSS 子孫セレクタと同等
const headerLinks = document.querySelectorAll(".header .nav-link");

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

// イベントデリゲーションとの組み合わせ
document.querySelector(".card-list").addEventListener("click", (e) => {
  const deleteBtn = e.target.closest(".delete-btn");
  if (deleteBtn) {
    const card = deleteBtn.closest(".card");
    card.remove();
  }
});

const el = document.querySelector(".card");

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

// イベントハンドラ内で使う
document.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    handleDelete(e.target);
  }
});

document.querySelectorAll(".tab-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    // 全タブの active を解除
    document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
    document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));

    // クリックされたタブと対応コンテンツに active を付与
    btn.classList.add("active");
    const target = document.querySelector(btn.dataset.target);
    if (target) target.classList.add("active");
  });
});

// .notification クラスの全要素を非表示にする
function hideAll(className) {
  document.querySelectorAll(`.${className}`).forEach(el => {
    el.style.display = "none";
  });
}

// .notification クラスの全要素を表示する
function showAll(className) {
  document.querySelectorAll(`.${className}`).forEach(el => {
    el.style.display = "";
  });
}

// data-category 属性で絞り込み
function filterByCategory(category) {
  document.querySelectorAll(".product").forEach(product => {
    if (category === "all" || product.dataset.category === category) {
      product.style.display = "";
    } else {
      product.style.display = "none";
    }
  });
}

// NodeList を配列に変換して filter / map を使う
const activeItems = [...document.querySelectorAll(".item")]
  .filter(el => el.classList.contains("active"))
  .map(el => el.textContent);

console.log(activeItems); // ["アイテム1", "アイテム3"]