Element.matches()

El método Element.matches() retorna true si el elemento fuese seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna false.

Sintaxis

result = element.matches(selectorString) 

• result contiene el valor de retorno true or false.
• selectorString es una cadena representando el selector a comprobar.

Ejemplo

<ul id="aves">
  <li>Loro de alas naranja</li>
  <li class="amenazada">Ágila Filipina</li>
  <li>Gran Pelícano Blancpo/li>
</ul>

<script type="text/javascript">
  var aves = document.getElementsByTagName('li');

  for (var i = 0; i < aves.length; i++) {
    if (aves[i].matches('.amenazada')) {
      console.log('El ' + aves[i].textContent + ' está amenazada de extinción!');
    }
  }
</script>

Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo class von valor endangered.

Excepciones

SYNTAX_ERR

La cadena especificada como selector no es válida.

Polyfill

Para navegadores que no soportan Element.matches() o Element.matchesSelector(), pero aun incorporan sporte para document.querySelectorAll(), existe un 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;            
        };
}

Especificación

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Esta característica fue implementada con el nombre no-estandar webkitMatchesSelector.

[2] Esta característica fue implementada con el nombre no-estandar mozMatchesSelector. Anteriormente a Gecko 2.0, cadenas con selectores no válidos causaban que se retornase false to be en lugar de elevar una excepción.

[3] Esta característica fue implementada con el nombre no-estandar msMatchesSelector.

[4] Esta característica fue implementada con el nombre no-estandar oMatchesSelector.