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

HTML DOM の parentElement プロパティとは？構文と使い方を実例付きで解説

DOM の parentElement プロパティは、HTML ドキュメント内で指定した要素の親要素を Element オブジェクトとして返すプロパティです。JavaScript を使って DOM ツリーを辿りたいときに便利な基本プロパティの一つです。

parentElement の特徴

parentElement プロパティには以下のような特徴があります。

  • 指定したノードの親が要素ノード（Element）である場合は、その親要素を返します。
  • 親が要素ノードではない場合（たとえば親が Document ノードや DocumentType ノードの場合）は、null を返します。
  • 類似の parentNode プロパティは任意のノード種別を返す可能性があるため、確実に「要素」を取得したい場面では parentElement の方が安全です。

構文

parentElement プロパティの構文は次のとおりです。

node.parentElement

サンプルコード

それでは、parentElement プロパティの具体的な使用例を見てみましょう。次の例では、セレクトボックスで選択された option 要素の親要素を取得し、その要素名を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM parentElement Property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showParent()" class="btn">Show parent of the option element</button>
<div class="show"></div>
<script>
   function showParent() {
      var dropDown = document.querySelector(".drop-down");
      var option=dropDown.options[dropDown.selectedIndex];
      var msg = document.querySelector(".show");
      msg.innerHTML="Parent element of option element is " + option.parentElement.nodeName + " element";
   }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML DOM の parentElement プロパティとは？構文と使い方を実例付きで解説

続いて、「Show parent of the option element（option 要素の親を表示）」ボタンをクリックしてみましょう。

HTML DOM の parentElement プロパティとは？構文と使い方を実例付きで解説

クリックすると、option.parentElement.nodeName によって option 要素の親要素名が取得され、「Parent element of option element is SELECT element」というように、親が SELECT 要素であることが画面に表示されます。

まとめ

parentElement プロパティを使うことで、DOM 上のある要素からその親要素へ簡単にアクセスできます。イベント発生元の要素から上位の要素を操作したい場合など、実務でも頻繁に活用されるプロパティなので、ぜひ覚えておきましょう。

  1. HTML DOM Style positionプロパティとは？使い方と設定値を解説

    HTML DOM Styleのpositionプロパティは、HTMLドキュメント内の要素の配置方法（ポジショニング）を取得および変更するために使用されるプロパティです。構文positionプロパティの基本的な構文は以下のとおりです。1. position値の取得object.position2. position値の変更object.position = valuevalueには以下の値を指定できます。番号値と説明1initialこのプロパティの値をデフォルト値に設定します。2inherit親要素からこのプロパティの値を継承します。3static要素はドキュメントフローに従い、記述された順序ど

  2. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ