blob: b30928e05125a74af0a2b939fa9873c5bb082498 (
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
|
---
title: DocumentFragment.querySelector()
slug: Web/API/DocumentFragment/querySelector
tags:
- API
- DOM
- Document
- Méthodes
- fragment
translation_of: Web/API/DocumentFragment/querySelector
---
{{ApiRef("DOM")}}
La méthode **`DocumentFragment.querySelector()`** renvoie le premier élément ou `null` si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.
Si le sélecteur correspond à un ID (_identifiant_) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.
Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur `SYNTAX_ERR` est lancée.
## Syntaxe
element = documentfragment.querySelector(selectors);
### Paramètres
- _selectors_
- : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
## Exemples
### Exemple de base
Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "`myclass`" est renvoyé :
```js
var el = documentfragment.querySelector(".myclass");
```
### Syntaxe CSS et argument de la méthode
L'argument chaîne transmis à `querySelector` doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :
```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
document.querySelector('#foo\bar') // Ne correspond à rien
document.querySelector('#foo\\\\bar') // Correspond au premier div
document.querySelector('#foo:bar') // Ne correspond à rien
document.querySelector('#foo\\:bar') // Correspond au second div
</script>
```
## Spécifications
| Spécification | Statut | Commentaire |
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- |
| {{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 2')}} | Pas de changement de {{SpecName('Selectors API Level 1')}} |
| {{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 1')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("api.DocumentFragment.querySelector")}}
## Voir aussi
- L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.
|
