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 retornotrue
orfalse
.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
.