HTML要素.closest() / matches()

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

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

sample_closest.html

<div class="container">
	<div class="panel">
		<p id="text" class="message active">常守朱</p>
	</div>
</div>
<ul id="officer-list">
	<li class="inspector" data-name="常守朱"><button>詳細</button></li>
	<li class="enforcer" data-name="狡噛慎也"><button>詳細</button></li>
	<li class="inspector" data-name="宜野座伸元"><button>詳細</button></li>
	<li class="enforcer" data-name="征陸智己"><button>詳細</button></li>
</ul>

sample_closest.js

// パターン1: closest() の基本的な使い方（祖先方向に検索）
var text = document.getElementById("text");
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』が返されます。

// パターン2: 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』と出力されます。

// パターン3: イベント委任でclosest()を活用する
// 親要素に1つだけイベントを登録し、内側のボタンのクリックを処理します。
var officerList = document.getElementById("officer-list");
officerList.addEventListener("click", function(e) {
	// クリックされたbutton要素の祖先からli要素を探します。
	var li = e.target.closest("li");
	if (!li) { return; } // li要素の外がクリックされた場合は何もしません。

	var name = li.getAttribute("data-name");
	var role = li.matches(".inspector") ? "監視官" : "執行官";
	console.log(name + " / " + role);
	// 「常守朱 / 監視官」のように出力されます。
});

// パターン4: closest() でnullチェックを行う
var el = document.getElementById("text");
var section = el.closest("section"); // section要素が存在しません。
if (section !== null) {
	section.style.background = "#eee";
} else {
	console.log("section要素は見つかりませんでした"); // この行が実行されます。
}

サンプルページはこちら

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

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

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