Element.matches()

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.

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

Compatibilité des navigateurs

[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.