Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Element.matches()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
La méthodeelement.matches() renvoietrue 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 renvoiefalse.
Attention :Certains navigateurs implémentent cette méthode sous le nommatchesSelector() non-standardisé et préfixé.
Syntaxe
var result = element.matches(selectorString);resultcontient la valeur retournéetrueoufalse.selectorStringest une chaîne définissant le sélecteur à tester sur l'élément.
Exemple
<ul> <li>perroquet amazone</li> <li>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'attributclass de valeurendangered.
Exceptions
SYNTAX_ERRLorsque la chaîne passée en paramêtre défini sélecteur invalide.
Polyfill
Pour les navigateurs qui ne supportent pasElement.matches() ouElement.matchesSelector(), mais fournissent le support dedocument.querySelectorAll(), il existe unpolyfill :
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 # ref-for-dom-element-matches① |
Compatibilité des navigateurs
Voir aussi
- La syntaxe des sélecteurs
- autres méthodes qui utilisent les sélecteurs :
element.querySelector()etelement.closest().