blob: 40ef961ca7afdd69c71816fc7a8d44ac69ecda90 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
title: Element.matches()
slug: Web/API/Element/matches
tags:
- API
- DOM
- Selector
translation_of: Web/API/Element/matches
---
{{ APIRef("DOM") }}
`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ée `true` ou `false`.
- `selectorString` est une chaîne définissant le sélecteur à tester sur l'élément.
## Exemple
```html
<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 +).
```html
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}
```
## Spécification
| Spécification | Status |
| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
| {{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}} | {{Spec2('DOM WHATWG')}} |
## Compatibilité des navigateurs
{{Compat("api.Element.matches")}}
## Voir aussi
- [La syntaxe des sélecteurs](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs)
- autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.
|
