Element.matches()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La méthode element.matches()
renvoie true
lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramètre ; sinon, elle renvoie false
.
Attention :
Certains navigateurs implémentent cette méthode sous le nom matchesSelector()
non-standardisé et préfixé.
Syntaxe
var result = element.matches(selectorString);
result
contient la valeur retournéetrue
oufalse
.selectorString
est une chaîne définissant le sélecteur à tester sur l'élément.
Exemple
<ul id="birds">
<li>perroquet amazone</li>
<li class="endangered">aigle des Philippines</li>
<li>pélican blanc</li>
</ul>
<script type="text/javascript">
var birds = document.getElementsByTagName("li");
for (var i = 0; i < birds.length; i++) {
if (birds[i].matches(".endangered")) {
console.log(
"Le - " + birds[i].textContent + "- est en voie de disparition !",
);
}
}
</script>
Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class
de valeur endangered
.
Exceptions
SYNTAX_ERR
-
Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
Polyfill
Pour les navigateurs qui ne supportent pas Element.matches()
ou Element.matchesSelector()
, mais fournissent le support de document.querySelectorAll()
, il 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;
};
}
Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}
Spécifications
Specification |
---|
DOM Standard # ref-for-dom-element-matches① |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La syntaxe des sélecteurs
- autres méthodes qui utilisent les sélecteurs :
element.querySelector()
etelement.closest()
.