We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

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ée true ou false.
  • 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écification

Spécification Status
DOM
La définition de 'Element.prototype.matches' dans cette spécification.
Standard évolutif

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

34

Oui1

Oui

34

3.62 3

Non

94

21

151

11.55

7

51

FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? ?

34

42 3

?8 ?

1. Supported as webkitMatchesSelector.

2. Prior to Firefox 4, invalid selector strings caused false to be returned instead of throwing an exception.

3. Supported as mozMatchesSelector.

4. Supported as msMatchesSelector.

5. Supported as oMatchesSelector.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : loella16, nbouvrette, Watilin, vava
Dernière mise à jour par : loella16,