HTML要素.closest() / matches() 対応: Selectors API（2008）

CSSセレクタを使用してHTML要素を検索・判定するメソッドです。『HTML要素.closest()』は祖先方向にセレクタに一致するHTML要素を検索し、『HTML要素.matches()』は自分自身がセレクタに一致するかどうかを判定します。

構文

// 自分自身を含む祖先からセレクタに一致する最も近いHTML要素を返します。
var result = element.closest("セレクタ");

// 自分自身がセレクタに一致するかどうかを判定します。
var result = element.matches("セレクタ");

メソッド一覧

メソッド	概要
closest("セレクタ")	自分自身を含めて、DOMツリーを祖先方向にたどり、セレクタに一致する最も近いHTML要素を返します。一致するHTML要素が見つからなかった場合は『null』を返します。
matches("セレクタ")	自分自身がセレクタに一致するかどうかを判定し、『true』または『false』を返します。

サンプルコード

<div class="container">
	<div class="panel">
		<p id="text" class="message active">こんにちは</p>
	</div>
</div>

var text = document.querySelector("#text");

// closest() で祖先方向に検索します。自分自身も対象に含まれます。
console.log(text.closest(".panel")); // div.panel が返されます。
console.log(text.closest(".container")); // div.container が返されます。
console.log(text.closest(".message")); // 自分自身が返されます。
console.log(text.closest(".nothing")); // 一致しないため『null』が返されます。

// matches() で自分自身がセレクタに一致するか判定します。
console.log(text.matches(".message")); // 『true』と出力されます。
console.log(text.matches(".active")); // 『true』と出力されます。
console.log(text.matches(".panel")); // 『false』と出力されます。
console.log(text.matches("p.message")); // 『true』と出力されます。

概要

『HTML要素.closest()』は、自分自身を起点にDOMツリーを祖先方向にたどり、セレクタに一致する最も近いHTML要素を返すメソッドです。自分自身もチェック対象に含まれるため、自分自身がセレクタに一致すればそのまま自分自身が返されます。一致するHTML要素が見つからなかった場合は『null』が返されます。

よく使われるのがイベント委任のパターンです。『HTML要素.addEventListener()』で親要素にイベントを登録し、クリックされたHTML要素から『HTML要素.closest()』で対象のHTML要素を探す手法は、動的に追加されたHTML要素にも対応できるため非常に便利です。

『HTML要素.matches()』は自分自身がセレクタに一致するかを判定するメソッドで、条件分岐やフィルタリングに使用します。『document.querySelector()』が子孫方向を検索するのに対し、『HTML要素.closest()』は祖先方向を検索する、ちょうど逆方向のメソッドです。