【JavaScript】parentNodeで親要素にアクセスする!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年11月25日に投稿されました。)

JavaScriptでセレクタの子親要素にアクセスするにはparentNodeを使用します。

parentNodeとは対象ノードの親ノードにアクセスするプロパティとなります。

そのため、セレクタに対して使用することで指定したセレクタの親要素を取得することができるようになります。

また、親要素が存在しない場合に使用すると、一番上にある要素(body要素)を取得するようになります。

親要素が特定できなくても、子要素を取得できればアクセスできるため、もし親要素にアクセスする場合はparentNodeを使用しましょう。

今回はJavaScriptのparentNodeで親要素にアクセスする方法について紹介していきます。

この記事はこんな方におすすめ

対象セレクタの親要素を取得したい場合

対象セレクタの親要素を操作したい場合

parentNodeとは

parentNodeとは、対象ノードの親ノードにアクセスするプロパティとなります。

ノードにアクセスできることから、対象要素の親要素を取得することができるようになります。

parentNodeの書き方

parentNodeの書き方は下記のようになります。

セレクタの後ろにparentNodeと追記することで対象の要素の親要素にアクセスすることができます。

parentNodeで親要素にアクセスするサンプルコード

parentNodeで親要素にアクセスするサンプルコードをご紹介します。

今回は下記の2パターンでparentNodeを使用します。

  1. 親要素が存在する場合
  2. 親要素が存在しない場合

親要素が存在する場合

親要素が存在する場合にparentNodeを使用すると、セレクタの親ノードにアクセスすることができます。

そのため、セレクタの親要素にアクセスすることが可能になります。

● index.html

● style.css

● main.js

実行結果

親要素が存在する場合にparentNodeを使用した結果

親要素が存在する場合にpparentNodeでセレクタの親要素にアクセスしています。

そのため、取得ボタンをクリックすると「obj-1」クラスの親要素である「obj-parent-1」クラス要素と「obj-3」クラスの親要素である「obj-parent-2」クラス要素が表示されています。

親要素が存在しない場合

親要素が存在しない場合にparentNodeを使用すると、「body」要素にアクセスするようになります。

● index.html

● style.css

● main.js

実行結果

親要素が存在しない場合にparentNodeを使用した結果

親要素が存在しない場合にparentNodeでセレクタの親要素にアクセスしています。

今回は親要素が存在しないため、取得ボタンをクリックすると「obj-1」クラス要素と「obj-2」クラス要素の上にある「body」要素が表示されています。

Sossy

親要素が存在しない場合、セレクタの上にある要素にアクセスするため、自動で「body」要素を取得するようになります。

parentNodeで親要素よりも上の要素にアクセスする場合

parentNodeで親要素よりも上の要素にアクセスするにはparentNodeを続けて使用します。

parentNodeを続けて使用することで、上の階層へと登ってアクセスすることができます。

● index.html

● style.css

● main.js

実行結果

parentNodeで親要素よりも上の要素にアクセスした結果

parentNodeで親要素よりも上の要素にアクセスしています。

そのため、取得ボタンをクリックするとセレクタの親要素の1つ上にある「obj-godParent」クラス要素や親要素の2つ上にある「obj-godParent」クラス要素が表示されています。

parentNodeを使用した実施のケース

parentNodeを使用した実際のケースについてご紹介します。

例えば、parentNode使用して2023年10月の日毎の気温表から最高気温と最低気温を表示するようなコードを作成します。

● index.html

● main.js

実行結果

parentNodeを使用して10月の日毎の気温表から最高気温と最低気温を表示した結果

parentNodeで気温表から最高気温と最低気温を取得しています。

今回は、気温が格納された配列から最大値と最小値を取得し、parentNodeでその気温の親要素にアクセスしています。

そのため、「最高記録日」ボタンをクリックすると「6日」が赤色に変化し、「最低記録日」ボタンをクリックすると「15日」が青色に変化しています。

jQueryで親要素にアクセスする場合

jQueryで親要素にアクセスするには下記の2つのメソッドがあります。

  1. parent()
  2. closest()

そのため、ここでは2つのメソッドで親要素にアクセスします。

parent()

parent()とは対象の要素の親要素を取得するメソッドになります。

そのため、parent()を使用することで、親要素にアクセスすることが可能になります。

● index.html

● style.css

● main.js

実行結果

jQueryのparent()でセレクタの親要素にアクセスした結果

parent()で親要素にアクセスしています。

そのため、取得ボタンをクリックすると「obj-1」クラスの親要素である「obj-parent-1」クラス要素と「obj-2」クラスの親要素である
「obj-parent-2」クラス要素が表示されています。

もし、parent()について詳しく知りたい場合は下記の記事をご参考ください。

closest()

closest()とは対象の要素から一番近い要素を取得するメソッドになります。

そのため、closest()に親要素を指定して使用することで、親要素にアクセスすることが可能になります。

● index.html

● style.css

● main.js

実行結果

jQueryのclosest()でセレクタの親要素にアクセスした結果

closest()で親要素にアクセスしています。

そのため、取得ボタンをクリックすると「obj-1」クラスの親要素である「obj-parent-1」クラス要素と「obj-2」クラスの親要素である
「obj-parent-2」クラス要素が表示されています。

親の兄弟要素にアクセスする方法

JavaScriptではセレクタの親要素にアクセスするだけでなく、親の兄弟要素にアクセスする方法があります。

そのため、ここではにセレクタの親の兄弟要素にアクセスする方法についてご紹介します。

親の前の兄弟要素にアクセスする場合

親の前の兄弟要素にアクセスするにはpreviousElementSiblingを使用します。

previousElementSiblingとは対象セレクタの前に存在する兄弟要素へアクセスすることができるプロパティになります。

そのため、parentNodeにpreviousElementSiblingを使用することで、親の前の兄弟要素にアクセスすることができようになります。

● index.html

● style.css

● main.js

実行結果

previousElementSiblingで親の前の兄弟要素にアクセスした結果

parentNodeとpreviousElementSiblingで親の前の兄弟要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj-3」クラスの親要素の前に存在する「obj-parent-1」クラス要素が表示されています。

親の次の兄弟要素にアクセスする場合

親の次の兄弟要素にアクセスするにはnextElementSiblingを使用します。

nextElementSiblingとは対象セレクタの後ろに存在する要素へアクセスすることができるプロパティになります。

そのため、parentNodeにnextElementSiblingを使用することで、親の次の兄弟要素にアクセスすることができようになります。

● index.html

● style.css

● main.js

実行結果

nextElementSiblingで親の次の兄弟要素にアクセスした結果

parentNodeとnextElementSiblingで親の次の兄弟要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj-1」クラスの親要素の後に存在する「obj-parent-2」クラス要素が表示されています。

子要素にアクセスする場合

子要素にアクセスするにはchildNodesを使用します。

childNodesとは対象セレクタの子ノードにアクセスすることができるプロパティになります。

そのため、アクセスしたセレクタにchildNodesを使用することで、セレクタの子要素を取得することができます。

● index.html

● style.css

● main.js

実行結果

childNodesでセレクタの子要素にアクセスした結果

childNodesでセレクタの子要素にアクセスしています。

そのため、「取得」ボタンをクリックすると「obj」クラスの子要素である「obj-child-1」クラスから「obj-child-4」クラスまでの要素が全て表示されています。

もし、childNodesについて詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ parentNodeとはセレクタの親ノードにアクセスするプロパティである。

⚫︎ 親要素が存在する場合にparentNodeを使用すると、アクセスしたセレクタの親要素にアクセスする。

⚫︎ 子要素が存在しない場合にparentNodeを使用すると、「body要素」を返す。

⚫︎ parentNodeで親要素よりも上の要素にアクセスするにはparentNodeを続けて使用する。

⚫︎ jQueryで親要素にアクセスするには下記のメソッドを使用する。
・parent()
(対象の親要素を取得するメソッド)
・closest()
(対象の要素から一番近い要素を取得するメソッド)

⚫︎ 親要素の前にある兄弟要素にアクセスするにはpreviousElementSiblingを使用する。

⚫︎ 親要素の後にある兄弟要素にアクセスするにはnextElementSiblingを使用する。

⚫︎ セレクタの子要素にアクセスするにはchildNodesを使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA