Element.matches()
El método matches()
comprueba si el Element
sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna false
.
Sintaxis
var result = element.matches(selectorString);
Parámetros
selectorString
es una cadena de texto que representa el selector a probar.
Valor devuelto
result
es un Boolean
(en-US).
Excepciones
SYNTAX_ERR
- La cadena especificada como selector no es válida.
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
.
Polyfill
Para navegadores que no soportan Element.matches()
o Element.matchesSelector()
, pero aun incorporan soporte 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; }; }
However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
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
BCD tables only load in the browser
Ver también
-
Otros métodos que usan selectores:
element.querySelector()
andelement.closest()
.