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.

Algunos navegadores implementan este método con prefijo, bajo el nombre  no-estandar matchesSelector().

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 con valor amenazada.

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

Especificación Estado Observaciones
DOM
La definición de 'Element.prototype.matches' en esta especificación.		 Living Standard Definición Inicial

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!
Prestación Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte origina con nombre no-estandar

(Yes)[1]

 3.6 (1.9.2)[2] 9.0[3] 11.5[4]
15.0[1]		 5.0[1]
Versión específica 34 34 (34) ? 21.0 7.1
Prestación Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte original con nombre no-estandar ? 1.0 (1.9.2)[2] ? ? ?
 Versión específica ? 34.0 (34) ? ? 8

[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.