親要素の取得の基本 — el.parentElement
ある要素から「一つ上の箱（親要素）」を取得したいときに使うのが parentElement。DOMツリーを上に辿って、要素ノードだけを返します。親が存在しない、または親が要素でない場合は null になります。
基本の使い方
<div id="card">
<button id="buy">購入</button>
</div>
<script>
const btn = document.getElementById("buy");
const parent = btn.parentElement; // → <div id="card">...</div>
console.log(parent.id); // "card"
</script>
- 戻り値: 親の「要素」ノード。なければ
null。 - 用途: 子から親にアクセスして、スタイルや属性、イベントを操作したいときに便利。
よく使うテンプレート集
子から親のクラスを切り替える（カードを強調）
document.addEventListener("click", (e) => {
const btn = e.target.closest(".like-btn");
if (!btn) return;
const card = btn.parentElement; // 例: ボタン直上がカード
card.classList.toggle("liked", true);
});
- ラベル: ボタンが押された「そのカード」だけを強調。
フォーム入力の隣接エリアにエラー表示（親を起点に探す）
<div class="field">
<input id="email">
<small class="hint"></small>
</div>
<script>
const input = document.getElementById("email");
input.addEventListener("blur", () => {
const field = input.parentElement;
const hint = field.querySelector(".hint");
if (!input.value.includes("@")) {
hint.textContent = "メール形式が不正です";
field.classList.add("error");
} else {
hint.textContent = "";
field.classList.remove("error");
}
});
</script>
- ラベル: 子（input）から親（field）へ上り、親配下の要素もまとめて扱う。
削除ボタンからカードを消す（親を丸ごと操作）
document.addEventListener("click", (e) => {
const del = e.target.closest(".delete");
if (!del) return;
const card = del.parentElement;
card.remove(); // 親ごと消す
});
- ラベル: 子の操作なのに、対象全体（親）を簡単に削除できる。
parentElement と関連APIの使い分け
- parentElement: 要素の親「要素」を返す。テキストノードなどは返さない。
- parentNode: 親が要素以外（例: ドキュメントフラグメント）でも返る可能性がある。通常のHTML操作では
parentElementで十分。 - closest(selector): 条件に合う「最も近い祖先要素」を上方向へ辿って返す。親が複雑なときはこちらが強力。
const targetCard = el.closest(".card"); // 親だけでなく、祖先の.cardを探す - ラベル: 直上だけなら
parentElement、条件で上を辿るならclosest。
実務でのコツ
- 明確な構造前提で使う: 親が必ず期待する要素である設計（DOM構造）にしておくと安全。
- null対策: 親がない可能性を常に念頭に。
const p = el.parentElement; if (!p) return;のように早期リターン。 - 役割分担: 親に「見た目や状態のクラス」を集約し、子はイベントの入口にすると読みやすい。
- 委譲と併用: クリック委譲＋
closestで対象の親を取り、parentElementで直上を触ると、意図が明快。
ありがちなハマりポイントと対策
- 親が期待と違う:
- 対策: レイアウト変更で構造が変わると壊れる。祖先検索は
closest(".期待クラス")を使うと堅牢。
- 対策: レイアウト変更で構造が変わると壊れる。祖先検索は
- テキストノードに当たる誤解:
- 対策:
parentElementは要素だけ返す。テキストやコメントが混じる場面でも安心。
- 対策:
- 親が存在しない（ルート付近）:
- 対策:
document直下や分離されたフラグメントではnull。防御的にnullチェック。
- 対策:
- 深い入れ子での操作漏れ:
- 対策: 直上ではなく上位コンポーネントを触りたいなら
closestに切り替える。
- 対策: 直上ではなく上位コンポーネントを触りたいなら
練習問題（手を動かして覚える）
<ul id="list">
<li class="item"><span class="label">Item 1</span> <button class="delete">削除</button></li>
<li class="item"><span class="label">Item 2</span> <button class="delete">削除</button></li>
</ul>
<script>
// 1) 削除ボタンで親の <li> を消す
document.getElementById("list").addEventListener("click", (e) => {
const del = e.target.closest(".delete");
if (!del) return;
const li = del.parentElement; // 直上の親
li.remove();
});
// 2) ラベルクリックで親 <li> を強調
document.getElementById("list").addEventListener("click", (e) => {
const label = e.target.closest(".label");
if (!label) return;
const li = label.parentElement;
li.classList.toggle("highlight");
});
// 3) 祖先検索が必要な場合（.item を確実に取得）
document.getElementById("list").addEventListener("click", (e) => {
const targetItem = e.target.closest(".item");
if (!targetItem) return;
// targetItem は祖先の .item。直上の親が欲しければ targetItem.parentElement
});
</script>
直感的な指針
- 直上の親だけを触りたいなら
parentElement。条件で上を辿るならclosest。 - 必ず
nullの可能性を考え、構造変更に強い書き方（closestやクラス設計）にする。 - 親に状態クラスを集約し、子はイベント入口にして見通しを良くする。
