はじめに
今回はJavaScriptのElementが持っているメソッドのclosest()について紹介します。
Element.closest()とは
Element.closest()は、指定したセレクタに一致する最も近い祖先要素(または自分自身)を返します。
簡単にいうと親要素を取得できるメソッドです。
探し方がそのElementに対しての祖先から、指定したタグや属性を持つ要素を探してきます。
使い方
簡単な例で使い方を見ていきます。
<section id="closest-1">
<div id="closest-2">
<div id="closest-3">
<div id="current"></div>
</div>
</div>
</div>
const element = document.getElementById('current');
// idに"closest-1"がある直近の祖先要素を取得
console.log(element.closest('#closest-2')); // output: <div id="closest-2">...</div>
// div ではない直近の祖先要素を取得
console.log(element.closest(':not(div)')) // output: <section id="closest-1">...</section>
上記のように、指定したセレクタに一致する最も近い祖先要素を取得できます。
コンポーネントの実装などには使えそうなメソッドですね。
自分は簡易的なpopupの実装で閉じる処理の時に使いました。
demo
runstant上のコンソールだとうまく表示されていませんが、ブラウザのコンソールで確認してみてください。
おわりに
今回はJavaScriptのElementが持っているメソッドのclosest()について紹介しました。
使い方も簡単なので、制作で必要な場面に出くわしたらぜひ使ってみてください。
Discussion