こんにちは、Ryohei（@ityryohei）です！

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

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

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

parentElementで親要素を取得する

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

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

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を取得することができました。parentはidがchildの要素を持っているためこのような結果となります。

parentNodeで親ノードを取得する

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

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

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

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の違いについて

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

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>

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

最後に

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

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

【JavaScript】セレクタを指定して祖先要素を取得する【closest】

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

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

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