element-closest

What is element-closest?

The element-closest npm package is a polyfill for the Element.closest() method, which allows you to find the closest ancestor of an element that matches a given CSS selector. This is particularly useful for ensuring compatibility with older browsers that do not support the native Element.closest() method.

What are element-closest's main functionalities?

Find closest ancestor

This feature allows you to find the closest ancestor of an element that matches a specified CSS selector. In this example, the closest ancestor of the element with the ID 'childElement' that has the class 'ancestorClass' is returned.

document.querySelector('#childElement').closest('.ancestorClass');

Other packages similar to element-closest

matches-selector

The matches-selector package provides a polyfill for the Element.matches() method, which checks if an element matches a given CSS selector. While it does not provide the same functionality as element-closest, it is often used in conjunction with it to ensure broader compatibility with older browsers.

dom-closest

The dom-closest package is another polyfill for the Element.closest() method. It offers similar functionality to element-closest, allowing you to find the closest ancestor of an element that matches a given CSS selector. It is a direct alternative to element-closest.

README

closest

Element.prototype.closest returns the first element that matches a CSS selector by traversing up the DOM tree starting from (and including) the receiver element.

element.closest(selectorString) //=> element

This is especially useful for delegating events.

document.addEventListener('click', function (event) {
	// find the anchor element that contains or is the click target itself:
	var link = event.target.closest('a');

	if (link) {
		// do something with the anchor
		event.preventDefault();
	}
});

matches

For the closest polyfill to work, this also polyfills matches, which is widely supported but often vendor-prefixed.

element.matches(selectorString) //=> boolean

matches is especially useful for shorthanding hasAttribute or classList.contains with selectors.

var widget = document.querySelector('.custom-widget');

if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
	// do something with the active widget
}

Browser compatibility

• Internet Explorer 9+
• Firefox 3.6+
• Chrome
• Opera 11.5+
• Android 2.2+
• Blackberry 7+
• iOS Safari 4+
• Safari 5+

The legacy version extends support to

• Internet Explorer 8+
• Firefox 3.5+
• iOS Safari 3.2+
• Opera 10+
• Opera Mini 5+
• Safari 3.1+.

Those are really old browsers, and I don’t see a usecase for IE8 compatibility, which is why it is packaged separately. closest is especially useful when delegating events, and Internet Explorer 8 does not support addEventListener, and attachEvent is an insufficient fallback, as it fires events in the reverse order they are added (read: the opposite order of what you expect and addEventListener).