タイトル通り、JavaScript で指定した要素の親またはその祖先に、特定の要素が存在するか調べる方法についてです。
例えば、親要素なら .parentNode で取得できますが、今回は親要素よりさらに上の要素を調べたいので、こちらは使いませんでした。
代わりに使ったのが .closest() メソッドです。
参考にさせていただいた記事はこちらから。
Element.closest() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/closest
サンプルコードは下記のとおりです。
まず、HTML がこちら。
<div id='grandparents'>
<div id='parents'>
<div id='child'>
<div id='grandchild'>
<p id='target'>この要素の祖先を調べる</p>
</div>
</div>
</div>
</div>
JavaScript がこちらです。
const target = document.getElementById('target');
if (target.closest('#parents')) {
// id='parents' の要素が存在している時の処理
} else {
// id='parents' の要素が存在していない時の処理
}
.getElementById() で、ターゲットとなる要素を指定し、その要素の親または祖先の要素に、id が parents の要素が存在しているかどうかを調べています。
今回のサンプルコードでは、id='parents' の要素は存在しているので、要素が存在している時の処理が実行されます。
なお、要素が存在していなかった場合は、.closest() は null を返します。
サンプルコードは以上です。
今まで使う機会がなかったのですが、親要素よりさらに上の要素を調べられるのは便利ですね！
今後似たような処理を書くときに役に立ちそうです。
以上、JavaScript で指定した要素の親またはその祖先に、特定の要素が存在するか調べる方法についてでした。
ご参考になれば幸いです。
