【JavaScript】親要素・親ノードを取得する【parentElement・parentNode】
※本ページのリンクにはプロモーションが含まれています。
こんにちは、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で親要素・親ノードを取得する方法のご紹介でした！
