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

Especificación Estado Observaciones
DOM
The definition of 'Element.prototype.matches' in that specification.
Living Standard Definición Inicial

Compatibilidad con navegadores

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.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: nbouvrette, Grijander81
 Última actualización por: nbouvrette,