Element.matches()

Cet article nécessite une relecture technique. Voici comment vous pouvez aider.

Sommaire

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

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

<div>Ceci est un élément</div>
<div class="someClass">Ceci est L'élèment!</div>
<script type="text/javascript">
  var coll = document.getElementsByTagName('div');

  for (var i = 0, len = coll.length; i < len; i++) {
    if (coll[i].matches('.someClass')) {
      alert('Match!');
    }
  }
</script>

Ce code affichera l'alerte, puisque l'élèment possède l'attribut class de valeur 'someClass'.

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;            
        };
}

Spécification

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

Compatibilité des navigateurs

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support d'origine avec un nom non standardisé

(Oui) avec le nom non standardisé webkitMatchesSelector

3.6 (1.9.2) avec le nom non standardisé mozMatchesSelector [1] 9.0 avec le nom non standardisé msMatchesSelector 11.5 avec le nom non standardisé oMatchesSelector
15.0 avec le nom non standardisé webkitMatchesSelector
5.0 avec le nom non standardisé webkitMatchesSelector
Version non préfixée 34 34 (34) ? ? 7.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support d'origine avec un nom non standardisé ? 1.0 (1.9.2) avec le nom non standardisé mozMatchesSelector [1] ? ? ?
Version non préfixée ? 34.0 (34) ? ? 8

[1] Avant Gecko 2.0, une chaîne définissant un sélecteur invalide retournait false plutôt de de génèrer une exception.

Étiquettes et contributeurs liés au document

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