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

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

JavaScriptで親要素を取得する方法は2つあります。「parentElement」と「parentNode」です。それぞれの使い方と得られる結果についてご紹介していきたいと思います。

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

parentElementで親要素を取得する

parentElement」はNodeが持つプロパティです。指定した要素の親にあたる要素を取得することができます。

実際にparentNodeを使用して親要素を取得してみましょう。下記のサンプルにある「id」が「child」の要素を取得して「parentElement」で「child」の親要素を取得してみます。

HTML

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

JavaScript

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

実行結果

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

parentNodeで親要素を取得する

parentNode」はNodeが持つプロパティです。指定した要素の親にあたる要素を取得することができます。

実際にparentNodeを使用して親要素を取得してみましょう。下記のサンプルにある「id」が「child」の要素を取得して「parentNode」で「child」の親要素を取得してみます。

HTML

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

JavaScript

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

実行結果

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

parentElementとparentNodeの違い

parentElementとparentNodeにほとんど違いはありませんが、ルート要素 (<html>) を取得しようとした際に返す値が異なります。実際に実行して結果を確認してみます。

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」は「document」を返します。使用される場合はその点だけご注意いただければと思います。

最後に

今回本記事を執筆するにあたって下記のページを参考にさせていただきました。

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

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