今回は、jQueryで親要素を効率よく取得できる「parent()」をはじめ、類似メソッドである「parents() / closest()」の使い分けについても学習していきましょう！
「jQueryで親要素を取得するにはどうすればいいの？」
「parent()の類似メソッドも含めて使い方を学びたい」
「JavaScriptでも親要素は取得できるの？」
このような内容も含めて、本記事では以下のような構成で解説していきます！
【基礎】「parent()」の使い方
【実践】「parents() / closest()」の使い方
【実践】「JavaScript」で親要素を取得
この記事で、parent()をしっかり学習してスキルアップを目指していきましょう！
parent()とは？
それでは、まず最初に「parent()」の基本的な知識から学習を進めていきましょう！
jQueryの「parent()」メソッドは、簡単に言うと1つ上の階層である「親要素」を取得することができるメソッドと言えます。
この「親要素」について少し説明をしておきます。
例えば、次のようなHTMLがあったとします。
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
</div>
このHTMLには3つの「div要素」があるわけですが、それぞれが階層構造になっています。
「p要素」の1つ上の階層にあるのが、id属性「outline」が付与されたdiv要素になっていますよね。
これが、「p要素」から見た親要素になるというわけです！
つまり、「p要素」に対して「parent()」メソッドを使えば、親要素である「div#outline」が取得できるというわけですね。
また、親要素のid属性やclass属性を知らなくても取得できるという点も大きな特徴と言えるでしょう。
parent()の使い方
parent()で親要素を取得する方法
ここからは、具体的な「parent()」メソッドの使い方を学んでいきましょう！
基本的な書き方としては、【 要素.parent(セレクタ) 】のように特定のHTML要素に対して「parent()」を実行することになります。
引数にセレクタを指定できますが、省略することも可能です。
次のサンプルを見てください！
<body>
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
</div>
<script>
var element = $('p').parent();
console.log( element );
</script>
</body>
実行結果
[div#outline......]
先ほどの例でも登場したHTMLに対して、jQueryのparent()を使って親要素を取得しているのが分かります。
「$(‘p’).parent()」と記述することで、p要素に対しての親要素であるdivタグを取得していますね。
このように、親要素がどんなHTML要素か知らなくても取得することができるのは非常に便利です。
親要素のid / class属性を取得する方法
今度は、「parent()」メソッドを活用して親要素に付与されている「id / class」属性を取得する方法を学びましょう！
これまで通り「parent()」メソッドを使うのですが、HTML要素の属性を取得できる「attr()」メソッドを組み合わせます。
例えば、次のようなHTMLがあるとします。
<div id="outline" class="sample">
<p>サンプルテキスト</p>
</div>
この例では、「id / class」属性を持ったdiv要素の中にp要素が配置されています。
そして、p要素を対象にして親要素であるdivの属性値を取得してみましょう！
var id_name = $('p').parent().attr('id');
var class_name = $('p').parent().attr('class');
console.log( 'idの属性値：' + id_name );
console.log( 'classの属性値：' + class_name );
実行結果
idの属性値：outline classの属性値：sample
この例では、p要素に対して「parent().attr(‘id’)」と記述することで、簡単に親要素のid属性値を取得していますね。
実行結果には、「id」「class」それぞれの属性値が見事に取得できているのが分かります。
ちなみに、「attr()」メソッドについてさらに知識を深めたい方は、次の記事で基本から応用まで学習できるので参考にしてみてください！
find()と組み合わせて親要素を検索する方法
さて、親要素が取得できるようになりましたが、その親要素内にある別のHTML要素を取得したい場合はどうすれば良いでしょうか？
そんな時に便利な応用技として、指定要素内にて任意のHTML要素を検索できる「find()」メソッドがあります！
つまり、「parent()」メソッドと「find()」メソッドを組み合わせることで、親要素内にある別のHTML要素を簡単に取得できるわけです。
次のサンプル例を見てください！
<body>
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
<a class="link" href="#">サンプルのリンク</a>
</div>
</div>
</div>
<script>
var element = $('p').parent().find('a');
</script>
</body>
この例では、p要素の他に「a要素」も追加されているのが分かりますね。
この時、p要素に対して「parent().find(‘a’)」と記述することで、親要素であるdivタグ内にある「a要素」を取得するという意味になるわけです。
この組み合わせはよく使われるので、いつでも使えるように繰り返し練習しておきましょう。
find()の詳しい使い方はこちらの記事で解説しているので、ぜひ確認してみてください。
parent()の注意点
複数のparent()を実行するケースについて
これまで、「parent()」メソッドを使って親要素を取得してきました。
そこで、例えば「親要素のさらに親要素のさらに親要素を取得する…」という複雑なケースを考えてみましょう！
次のようなHTMLを想定してみてください！
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
</div>
この例では、p要素を対象として親要素がid属性値「outline」を持つdiv要素になりますね。
そして、そのさらに親要素の親要素になるとid属性値「wrap」を持つdiv要素になります。
このような構造のHTMLはよくあるので、JavaScript側から目的の親要素を取得するのについ「parent()」を使いそうになります。
例えば、次のようなコードになります。
var element = $('p').parent().parent().parent();
3つのparent()メソッドを続けて記述することで、一番外側にあるdiv要素を取得しているのが分かりますね。
この方法は簡単で便利なのですが、実は危険なバグを引き起こす可能性を持っています。
parent()でやってはいけないアンチパターン
先ほどの「parent().parent().parent()」の記述は、なぜバグを引き起こすのでしょうか？
例えば、サイトのリニューアルなどによってHTMLの構造が変わってしまうケースを見てみましょう！
<div id="wrap">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
この例では、先ほど3つあったdiv要素が2つに減っています。
この状態で「parent().parent().parent()」を実行してしまうと、想定していたdiv要素を取得することができなくなるわけです。
この場合だと「parent().parent()」の2つだけなら目的のdiv要素を取得できますが、いちいちparent()の数を増減するのは困難ですね。
このように、将来的にHTMLの構造が変化するというのはよくあるケースなので、このような場合も想定したプログラミングが必要になってくるわけです。
解決策としては、次の章で解説している「parents()」メソッドや「closest()」メソッドを活用するのがベストでしょう！
JavaScriptにおけるparent
この章では、JavaScriptにおける親要素の取得方法について見ていきましょう！
主に、parentNodeを利用した親要素、属性値の取得について学んでいきます。
JavaScriptで親要素を取得するparentNodeについて
これまでjQueryにおける親要素の取得方法を見てきましたが、JavaScriptについても同じように親要素を取得することができます。
利用するのは「parentNode」になります。
使い方は単純でHTML要素に続けてparentNodeを実行すると、対象の親要素を取得することができます。
例えば、次のようなHTMLがあるとします。
Hello World
この例では「pタグ」の親要素が「divタグ」になりますね。
そこで、この「pタグ」の親要素を取得するには次のように記述します。
const text = document.getElementById('text');
console.log(text.parentNode);
まずgetElementById()でpタグを取得して、その要素に対してparentNodeを実行することで親要素であるdivタグを取得できるというわけです。
親要素のid/class属性などを取得する方法
今度は取得した親要素の属性値を調べる方法について見ていきましょう！
もっとも簡単な方法としては、「getAttribute()」メソッドを利用することでしょう。
getAttribute()は引数に文字列で指定した属性を取得することができるメソッドになります。
次のようなHTMLがあるとします。
Hello World
pタグの親要素であるdivタグの属性値を取得するには次のように記述します。
console.log(text.parentNode.getAttribute('id'));
console.log(text.parentNode.getAttribute('class'));
実行結果
top content
このようにparentNodeに続けてgetAttribute()を実行することで、任意の属性値を簡単に取得できるわけです。
もちろんid / class以外の属性値についても同様の手順で取得することが可能です。
parents()とは？
ここからは、「parent()」に「s」が付いた「parents()」メソッドについて学習をしていきましょう！
これまで学習した「parent()」が1つ上の親要素しか取得できなかったのに対して、「parents()」はすべての親要素を取得することが可能になります。
イメージとしては、以下のとおりです！
対象のHTML要素に対して、次々と親要素をさかのぼっていき最終的に「HTMLタグ」まですべて取得することができるのが特徴です。
これにより、将来的にHTMLの構造が変化したとしても、すべての親要素の中から目的の要素を取得するプログラミングが可能になるわけです！
parents()ですべての親要素を取得する方法
それでは、「parents()」メソッドの基本的な使い方を学んでいきましょう！
記述方法は「parent()」と同じで、【 要素.parents(セレクタ) 】のようなカタチで記述すればOKです。（セレクタは省略可）
次のサンプル例を見てください！
<body>
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
</div>
<script>
var elements = $('p').parents();
console.log( elements );
</script>
</body>
実行結果
[div#outline, div#contents, div#wrap, body, html, .......]
この例では、複数の階層構造内に配置されたp要素に対して、「parents()」メソッドですべての親要素を取得しています。
実行結果を見ると分かりますが、すべてのdiv要素に加えて「body要素」「html要素」まで取得できていますね！
このように一発ですべての親要素が取得できるため、現在のHTML構造がよく分かるわけです。
セレクタ指定で特定の親要素だけ取得する方法
「parents()」メソッドはすべての親要素を一気に取得しますが、セレクタ指定することで特定の親要素だけを取得することもできます。
次のサンプル例を見てください！
<body>
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
</div>
</div>
<script>
var elements = $('p').parents('#contents');
console.log( elements );
</script>
</body>
実行結果
[div#contents, ......]
この例では、「parents(‘#contents’)」と記述することで親要素のid属性値が「contents」のモノだけを取得するという意味になります。
つまり、この例で言えば2つ上の親要素であるdiv要素が一致することになりますね。
これにより、特定の親要素を指定することでHTML構造が変化しても対応できるプログラムを作ることができるわけです！
Form要素を取得して送信処理を行う方法
「parents()」メソッドはForm要素でも便利に活用することができるのでご紹介しておきます！
一般的にForm要素は、ユーザーが入力したデータを「送信ボタン」をクリックすることでサーバーへ送られますよね？
これを例えば、入力フォームにデータを入力したら自動的に送信される仕組みを作ってみましょう。
次のようなForm要素を想定してみてください。
<form>
<h1>サンプルフォーム</h1>
<div>
<p>文字列を入力してください</p>
<div>
<input type="text">
</div>
</div>
</form>
このForm要素には「送信ボタン」が無くて、input要素による入力フォームだけが配置されていますね。
少し複雑な階層になっていますが、「parents()」メソッドを使えば簡単にForm要素を取得できます。
次のサンプル例を見てください！
$('input[type="text"]').change(function() {
$(this).parents('form').submit();
})
「change」イベントを使って、入力フォームに文字列が入力されてフォーカスが外れた瞬間に処理を実行するようにしています。
処理の中身は、「parents()」を使ってForm要素を取得して「submit()」メソッドで送信処理を行っています。
このようにForm要素が複雑な階層になっていても「parents()」を有効利用することで簡単に送信処理を行えるわけです！
closest()とは？
ここからは、これまでと同じように親要素を取得できる「closest()」メソッドについて学習をしていきましょう！
「closest()」は、親要素内にある特定の要素を取得することに特化したメソッドという点が大きな特徴です。
そのため、指定した要素が見つかるまでどんどん親要素をさかのぼっていくわけです。
最初に合致する要素にたどり着いた時点でストップし、その要素を取得するのが基本的な動作になります。
このような特性があるので、HTML構造が変化するようなケースで便利に扱えるようになるでしょう。
ただし、指定した要素が2つ以上ある場合に、対象となる要素から一番最初に合致した要素を1つだけしか取得しないという点を覚えておきましょう。
closest()で条件に合う親要素を取得する方法
それでは、実際に「closest()」メソッドの使い方を見ていきましょう！
記述方法としては、【要素.closest(セレクタ)】のように必ずセレクタを引数に指定する必要があるので注意しましょう。
次のサンプル例を見てください！
<body>
<div id="wrap">
<div id="contents">
<div id="outline">
<p>サンプルテキスト</p>
</div>
<p id="text">サンプルテキスト</p>
</div>
</div>
<script>
var elements = $('p').closest('#text');
console.log( elements.text() );
</script>
</body>
実行結果
サンプルテキスト
この例では、p要素に対して「closest(‘#text’)」と記述することで、親要素内に存在するid属性値「text」を持つ要素を指定しています。
HTMLを見てみると、p要素の2つ上の親要素内に「text」のid属性値を持つp要素がありますよね？
実行結果を見ると「サンプルテキスト」という文字が出力されていることから、見事に「#text」のp要素を取得できているのが分かります。
まとめ
今回は、jQueryの「parent()」や「parents()」「closest()」を使った親要素の取得方法について学習しました！
最後に、ポイントをおさらいしておきましょう！
・「parent()」は1つ上の親要素を取得できる
・「parents()」はすべての親要素を取得できる
・「closest()」は指定した要素が見つかるまで親要素をさかのぼって取得する
上記ポイントを抑えながら、ぜひ自分のプログラムに取り入れて使いこなせるように頑張りましょう！
