【JavaScript】指定した要素の親またはその祖先に特定の要素が存在するか調べる

タイトル通り、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 で指定した要素の親またはその祖先に、特定の要素が存在するか調べる方法についてでした。
ご参考になれば幸いです。