HTML Element .closest() / matches() Since: Selectors API（2008）

// Returns the nearest ancestor (including the element itself) that matches the selector.
var result = element.closest("selector");

// Tests whether the element itself matches the selector.
var result = element.matches("selector");

<div class="container">
	<div class="panel">
		<p id="text" class="message active">Hello</p>
	</div>
</div>

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

// closest() searches up the ancestor tree. The element itself is also checked.
console.log(text.closest(".panel")); // Returns div.panel
console.log(text.closest(".container")); // Returns div.container
console.log(text.closest(".message")); // Returns the element itself
console.log(text.closest(".nothing")); // No match, so returns null

// matches() tests whether the element itself matches the selector.
console.log(text.matches(".message")); // Outputs true
console.log(text.matches(".active")); // Outputs true
console.log(text.matches(".panel")); // Outputs false
console.log(text.matches("p.message")); // Outputs true

element.closest() starts from the element itself and traverses the DOM tree toward the root, returning the nearest ancestor that matches the selector. The element itself is included in the search, so if the element matches the selector, it is returned directly. If no matching element is found, null is returned.

A common use case is event delegation. You register an event on a parent element using element.addEventListener(), then use element.closest() on the clicked element to find the target element. This approach also works for dynamically added elements, making it very convenient.

element.matches() tests whether an element matches a selector and is useful for conditional branching and filtering. While document.querySelector() searches down the descendant tree, element.closest() searches up the ancestor tree — they are exact opposites in direction.