こんにちは！
unitopi新米ライターの、ケインでございます。

前回に引き続き、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得」について、今回は「親要素の取得」のお話をさせていただきます！

※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！

※前回の記事はこちらになります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！

【JavaScriptの場合】※下記サンプルコードを使用し説明

下記のサンプルを使い、h1（id=”hTitle”）の親要素を取得したい場合を例にしてお話していきます！

See the Pen GgMgvM by Tatsuya Kosuge (@castero) on CodePen.
11535

①parentNode（※記載方法：element.parentNode）

parentNodeを使うことで、親要素を取得することができます。親要素が複数存在することはありえないので、表記も単数形ですね！JavaScriptの場合の親要素の取得方法はparentNodeのみです！

ちなみに下記にも記載しましたが、祖先要素・つまり親要素の更に親要素を取得したい場合は、parentNodeを２回使います！

今回のサンプルの場合、h1の祖先（親の親）要素はbodyになるので、bodyが取得されているのが下記を見るとわかりますよね！

上記サンプルコードをブラウザの検証ツール（※GoogleChromeを使用）で表示した結果
（※画像をクリックすると別ウィンドウで見ることができます。）

【jQueryの場合】※下記のサンプルコードを使用し説明

See the Pen yyzyPr by Tatsuya Kosuge (@castero) on CodePen.
11535

②parent()（記載方法：$(“element”).parent()）
→親要素を取得

JavaScriptでいうparentNodeを同じ使い方になります！

jQueryのparent()を使ってh1（id=”hTitle”）の親要素を取得し、ブラウザの検証ツールで表示した結果
（※画像をクリックすると別ウィンドウで見ることができます。）

parent()の( )の中には「取得したい要素名」（ID・Class名でもOK！）を入れることもできます。
例えば上記のサンプルコードにもありますが、parent("div")とすると、h1タグの親要素はdiv要素になるので、条件合致！
つまり無事に要素を取得することができます。

ちなみに、該当する要素がない場合は、要素を何にも取得しません。

③parents()（記載方法：$(“element”).parents()）
→親要素だけでなく祖先要素も取得対象になる

parents()は、親要素だけでなく、祖先要素（親の親）も取得対象になります。

「parents()」と複数形になっているのは、親要素だろうが祖先要素だろうが該当する要素が複数ある場合は、全部取得するということです！

下記の通りですが、parents()を使用した場合、h1からみると親要素と祖先要素が「div、body、html」の３つあるので、その全部を取得しているのがわかりますよね！

jQueryのparents()を使ってh1（id=”hTitle”）の親要素（祖先要素含む）を取得し、ブラウザの検証ツールに表示
（※画像をクリックすると別ウィンドウで見ることができます。）

parent()の時にも説明したように（ ）の中に取得したい要素名を入れることによって、取得内容の絞り込みも可能になります。

④closest()（記載方法：$(“element”).closest()）
→カッコ内の条件にあてはまり、elementから一番近い要素を一つ取得

closest()は一番わかりずらいような気がしますが、（ ）の中に指定した「取得したい要素名」（ID・Class名でもOK！）と一致していて、かつ一番近い位置にある要素を取得します。

jQueryのclosest()を使ってh1（id=”hTitle”）の親要素を取得し、ブラウザの検証ツールに表示（カッコの中の条件にはbodyを指定）
（※画像をクリックすると別ウィンドウで見ることができます。）

上記の場合、h1から見て一番近いbody要素は祖先要素（親の親要素）にあるので、body要素を取得することができるということです。

※「一番近い位置にある要素を取得する」ということですが、たとえば親要素も祖先要素もdivだった場合は、親要素のみを取得する、ということです。

まとめ

いかがでしたか？

親要素取得の場合は子要素取得の場合と違って、テキストが含まれるか含まれないかを考える必要がないのも特徴ですね！
自分でコードを記載してみて、どのように要素が取得されるのかを確認しながら手を動かすのが一番の習得の近道だと思います！

このシリーズは次回で最終回！次回は「要素の追加・削除」について取り上げます。引き続きよろしくお願いいたします！

Author Profile

KosugeTatsuya

Latest entries

• 2015.06.18コーディングを効率化する導入必至のツール【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！
• 2015.04.21読んでみた【書評】「10年使えるSEOの基本」を買ってみた
• 2015.03.02CSSマスター【CSS】CSSプロパティの記述順について考えてみた
• 2015.02.18Javascriptを学ぼう【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③