JavaScriptのclosest()メソッドは、指定したセレクターに最も近い親要素（または自身）を取得するための便利なメソッドです。DOM操作を行う際に、特定の要素がどの親要素に含まれているかを簡単に取得できるため、イベント処理やフォーム操作などで役立ちます。今回は、このメソッドの基本的な使い方から注意点についてまとめていきたいと思います。
closest()は、指定したCSSセレクターに一致する最も近い先祖要素（親要素）を探し、その要素を返します。
JavaScript
element.closest(selector);- element：検索を開始する要素。
- selector：CSSセレクター（クラス、ID、タグ名など）。
- 戻り値：一致する最も近い要素。見つからなかった場合は
nullを返します。
以下は、ボタンをクリックしたときに、closest()を使って最も近い.containerクラスの要素を取得します。
See the Pen closest by tones (@tonescodedesign) on CodePen.
JavaScript
// ボタン要素を取得
const button = document.getElementById('myButton');
const message = document.getElementById('message');
// ボタンがクリックされたとき、最も近い.container要素を取得
button.addEventListener('click', function() {
const container = this.closest('.container');
if (container) {
message.textContent = '最も近い.containerが見つかりました！';
} else {
message.textContent = '.containerが見つかりませんでした。';
}
});HTML
<div class="container">
<button id="myButton">クリックしてね</button>
</div>
<p id="message"></p>このコードでは、ボタンがクリックされると、closest(".container")によってdiv.container要素が取得されます。
See the Pen closest by tones (@tonescodedesign) on CodePen.
JavaScript
document.querySelector('table').addEventListener('click', function(event) {
// クリックされたセル(td)の最も近い<tr>を取得
const row = event.target.closest('tr');
if (row) {
console.log('クリックされた行の内容:', row.textContent);
}
});HTML
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>田中</td>
<td>30</td>
</tr>
<tr>
<td>佐藤</td>
<td>25</td>
</tr>
</table>このコードでは、table全体にクリックイベントを設定し、closest('tr')でクリックされたセルの所属する行を特定しています。
- 柔軟な要素探索が可能：
parentNodeやparentElementを使って手動で親要素を辿るよりもシンプル。 - イベントデリゲーションとの相性が良い：リスト要素やフォームのボタン操作時に、適切な親要素を簡単に取得できる。
- 可読性が向上する：
closest()を使うことで、コードの意図が分かりやすくなる。
closest()は、該当する要素が見つからない場合にnullを返します。そのため、nullチェックを行うことが重要です。
JavaScript
const element = document.querySelector('#someElement');
const parent = element.closest('.non-existent-class');
if (parent) {
console.log('親要素が見つかりました:', parent);
} else {
console.log('該当する親要素が見つかりません。');
}querySelector()は指定した要素の子孫要素を検索します。closest()は現在の要素から親要素を検索します。
JavaScript
const element = document.querySelector('#child');
const closestParent = element.closest('.parent'); // 親を検索
const foundChild = element.querySelector('.child'); // 子を検索closest()は、指定したCSSセレクターに一致する最も近い親要素（または自身）を取得するメソッドです。parentElementを使って親要素を手動で辿るよりもシンプルで可読性が高いです。nullを返す場合があるため、チェックを行うことが重要です。
