JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

JavaScriptでDOM操作を行っていると、ある要素の親要素にアクセスしたい場面によく出会います。そんなときに活躍するのがparentNodeプロパティです。このプロパティは、対象ノードの直接の親ノードを返します。

本記事では、クリックイベントとparentNodeプロパティを組み合わせて、クリックされた子要素の親要素を取得し、そのクラス名を画面に表示するサンプルコードを紹介します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: #8a2be2;
   }
   .parent1,
   .parent2,
   .parent3 {
      display: inline-block;
      margin: 10px;
   }
   .child1,
   .child2,
   .child3 {
      width: 70px;
      height: 70px;
   }
   .child1 {
      background-color: red;
   }
   .child2 {
      background-color: pink;
   }
   .child3 {
      background-color: blue;
   }
</style>
</head>
<body>
<h1>JavaScriptで親要素にアクセスする</h1>
<div class="parent1">
<div class="child1">Child 1</div>
</div>
<div class="parent2">
<div class="child2">Child 2</div>
</div>
<div class="parent3">
<div class="child3">Child 3</div>
</div>
<br />
<div class="result"></div>
<h3>上のいずれかのdivをクリックすると、その親要素がわかります</h3>
<script>
   let resEle = document.querySelector(".result");
   document.querySelector(".child3").addEventListener("click", (event) => {
      resEle.innerHTML =
      "親ノードは " + event.target.parentNode.className;
   });
   document.querySelector(".child1").addEventListener("click", (event) => {
      resEle.innerHTML =
      "親ノードは " + event.target.parentNode.className;
   });
   document.querySelector(".child2").addEventListener("click", (event) => {
      resEle.innerHTML =
      "親ノードは " + event.target.parentNode.className;
   });
</script>
</body>
</html>

出力結果

JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

コードを実行すると、赤・ピンク・青の3つの子要素が横並びで表示されます。

いずれかの子要素をクリックすると、次のように親要素のクラス名が画面に表示されます。

JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

コードのポイント

  • addEventListener("click", ...)：各子要素に対してクリックイベントリスナーを登録します。
  • event.target：実際にクリックされた要素を参照します。
  • parentNode：クリックされた要素の親ノードを取得します。
  • className：親要素のクラス属性の値（parent1〜parent3）を文字列として取得します。

補足：parentElementとの違い

親要素を取得するプロパティには、parentElementもあります。parentNodeはテキストノードなども親として返す可能性がありますが、parentElementは必ずElementオブジェクトのみを返す点が異なります。通常のHTML文書内での要素操作では、どちらを使用してもほぼ同じ結果が得られます。

  1. JavaScriptで親要素にCSSクラスを適用・継承する方法をわかりやすく解説

    JavaScriptを使って新しく作成した要素にCSSのスタイル（クラス）を適用したい場合、document.createElement()、classList.add()、そしてappend()を組み合わせることで簡単に実現できます。 基本的な仕組み 処理の流れは以下の3ステップです。 1. document.createElement()： 新しいdiv要素などのHTML要素を動的に生成します。 2. classList.add()： 生成した要素に対して、あらかじめ定義しておいたCSSクラス（.classセレクタ）を追加します。これにより、そのクラスに設定されたスタイルが継承・適用されま

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in