【JavaScript】「Element.parentElement」の使い方！【親要素を取得】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「JavaScript」の「Element.parentElement」の使い方を解説します！

また、下の動画でも「element.parentElement」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「Element.parentElement」を使うと何ができるのか？

「Element.parentElement」を使うと、指定した要素の「親要素」を取得することができます。

ふむふむ！

「Element.parentElement」の使い方！

<div id="parent">
  <p id="child">Hello, world!</p>
</div>

const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;

console.log(parentElement); // <div id="parent">

このように使うことで、指定した要素の「親要素」を取得することができます！

実用例！親要素のスタイルを変更する

const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;

if (parentElement) {
  parentElement.style.backgroundColor = 'lightblue';
}

このようにすることで、親要素を取得して操作することができます。

例えば背景色を変更する、などが考えられますね。

「Element.parentElement」が「null」になるケースがあるため、値を確認してから操作を行うようにしましょう。

参考リンク！

仕様書。
https://dom.spec.whatwg.org/#ref-for-dom-node-parentelement%E2%91%A0

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Node/parentElement

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。

「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。

こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

Element.parentElementは、親要素を簡単に取得できる便利なプロパティです。親要素を取得してスタイルを変更したり、DOMを操作することで、より動的なWebページを作成できます。

ぜひ実際のプロジェクトで活用してみてください！

また、下の動画でも「element.parentElement」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは、こんな感じでこの記事を終わります！

またね！