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
.
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 Blanco</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;
}
Especificaciones
Specification |
---|
DOM Standard # ref-for-dom-element-matches① |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- The syntax of Selectors
- Otros métodos que usan selectores:
element.querySelector()
andelement.closest()
.