こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで親要素(親ノード)を取得する方法をご紹介しています。

JavaScriptでは親要素の取得は「parentElement」を、親ノードの取得は「parentNode」を使用します。それぞれの使い方と実行結果についてご紹介していきます。

では、解説していきます。

parentElementで親要素を取得する

parentElementはNodeが持つプロパティです。指定したDOMノードの親にあたる要素を取得することができます。親ノードが存在しなかったり、要素でない場合はnullを返します。

実際にparentElementで親要素を取得してみます。下記のサンプルにあるidchildの要素を取得し、parentElementchildの親要素を取得してみます。

HTML

<div id="app">
    <div id="parent">
        <div id="child"></div>
    </div>
</div>

JavaScript

const child = document.getElementById("child");
console.log(child.parentElement);

実行結果

<div id="parent">
<div id="child"></div>
</div>

childの親要素であるparentを取得することができました。parentidchildの要素を持っているためこのような結果となります。

parentNodeで親ノードを取得する

parentNodeはNodeが持つプロパティです。指定したノードのDOMツリー内にある親ノードを取得することができます。

前項でご紹介したparentElementは要素のみを取得することができましたが、parentNodeは要素に加え、ドキュメントノードを取得することが可能となっています。

実際にparentNodeを使用して親ノードを取得してみます。下記のサンプルではidchildの要素を取得し、parentNodechildの親ノードを取得します。

HTML

<div id="app">
    <div id="parent">
        <div id="child"></div>
    </div>
</div>

JavaScript

const child = document.getElementById("child");
console.log(child.parentNode);

実行結果

<div id="parent">
<div id="child"></div>
</div>

実行結果は前項でご紹介したparentElementと同じです。どちらも対象に要素に含まれているため、想定した結果を返してくれています。

parentElementとparentNodeの違いについて

parentElementparentNodeの最大の違いは、ドキュメントノード 取得時の結果です。実際にhtml要素でparentElementparentNodeを実行し、結果を確認してみます。

parentElement

JavaScript

console.log(document.documentElement.parentElement);

実行結果

null

parentNode

JavaScript

console.log(document.documentElement.parentNode);

実行結果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

parentElementnullを返すのに対し、parentNodeはドキュメントノードを返します。基本的にドキュメントノード内で使用される場合は問題ないですが、その点ご注意ください。

最後に

本記事を書くにあたって下記のページを参考にさせていただきました。

JavaScriptで親要素・親ノードを取得して何らかの処理をする場合、parentElementもしくはparentNodeで対応できます。祖先要素の取得方法については下記のページでご紹介しておりますので、併せてご覧いただければ幸いです。

以上、JavaScriptで親要素・親ノードを取得する方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。