plainJS

Functions / Traversing

Match element selector

jQuery $.is()

2015 page

This is the original page from 2015, kept at its address while the tested rewrite is in progress. The code is of its time: it ran in Internet Explorer and does not use what browsers have gained since. The rewrite replaces it here.

In short

Check the current elements against a CSS selector.

To check whether a given element matches a CSS selector, modern browsers support the matches() or matchesSelector() DOM method. Here’s a polyfill for other browsers:

js
// matches polyfill
this.Element && function(ElementPrototype) {
    ElementPrototype.matches = ElementPrototype.matches ||
    ElementPrototype.matchesSelector ||
    ElementPrototype.webkitMatchesSelector ||
    ElementPrototype.msMatchesSelector ||
    function(selector) {
        var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
        while (nodes[++i] && nodes[i] != node);
        return !!nodes[i];
    }
}(Element.prototype);

Browsers supporting DOM4 make use of the optimized internal method, which is much faster. This is generally recommended when extending native objects. Now you can call matches() on any DOM element:

js
var el = document.querySelector('span');
console.log(el.matches('.foo'));
Advertisement

Sources

  1. https://gist.github.com/jonathantneal/3062955 (a 2015 source of the original page)