Skip to main content Accessibility Feedback

A vanilla JS equivalent to jQuery’s .is() API

In jQuery, you can match any element against any valid CSS selector using the .is() API.

Here’s an example with an absurdly unrealistic and complicated selector to match against.

if ( $( '.some-element' ).is( 'a[href^="#"].another-class[data-something-else]' ) ) {
    // Do something...
}

This is just as easy to do without jQuery, though, using the vanilla JS .matches() API. This works in all modern browsers, plus IE9 and up.

var elem = document.querySelector( '.some-element' );
if ( elem.matches( 'a[href^="#"].another-class[data-something-else]' ) ) {
    // Do something...
}

The one “gotcha”: some browsers initially implemented this using browser prefixes (and others—cough cough IE—still do). You can get around that issue with a really simple polyfill:

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips