こんにちは!
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を2回使います!
今回のサンプルの場合、h1の祖先(親の親)要素はbodyになるので、bodyが取得されているのが下記を見るとわかりますよね!
上記サンプルコードをブラウザの検証ツール(※GoogleChromeを使用)で表示した結果
(※画像をクリックすると別ウィンドウで見ることができます。)
【jQueryの場合】※下記のサンプルコードを使用し説明