DocumentFragment.querySelector()

La méthode DocumentFragment.querySelector() renvoie le premier élément ou null si aucune correspondance n'est trouvée, dans le 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 DOMException avec une valeur SYNTAX_ERR est lancée.

Syntaxe

element = documentfragment.querySelector(selectors);

Paramètres

selectors
est une 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 DocumentFragment avec la classe "myclass" est renvoyé :

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 :

<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
Selectors API Level 2
La définition de 'DocumentFragment.querySelector' dans cette spécification.
Obsolete Pas de changement de Selectors API Level 1
Selectors API Level 1
La définition de 'DocumentFragment.querySelector' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 3.5IE Support complet 8Opera Support complet 10Safari Support complet 3.2WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

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