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

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

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

<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』と出力されます。

// closest() の結果
text.closest(".panel");     // <div class="panel">...</div>
text.closest(".container"); // <div class="container">...</div>
text.closest(".message");   // <p id="text" class="message active">...</p>
text.closest(".nothing");   // null

// matches() の結果
text.matches(".message");   // true
text.matches(".active");    // true
text.matches(".panel");     // false
text.matches("p.message");  // true

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

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

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