Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.

Syntaxe

element = baseElement.querySelector(selectors);

Paramètres

selectors
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.

Valeur retournée

Le premier élément descendant de baseElement qui correspond au groupe de sélectors spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

Si aucune correspondance n'est trouvée, la valeur retournée est null.

Exceptions

SyntaxError
Les selectors spécifiés sont invalides.

Exemples

Dans ce premier exemple, est retourné le premier élement <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

La hiérarchie entière compte

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

HTML

<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

JavaScript

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
         (baseElement.querySelector("div span").innerHTML);

Résultat

Le résultat ressemble à ceci :

Plus d'exemples

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'querySelector()' dans cette spécification.
Standard évolutif  
Selectors API Level 2
La définition de 'querySelectorAll()' dans cette spécification.
Obsolete  
Selectors API Level 1
La définition de 'querySelectorAll()' dans cette spécification.
Obsolete  

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 12 3.5 (1.9.1) 9[1] (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

[1] querySelector() est pris en charge dans IE 8, mais uniquement pour les sélecteurs CSS 2.1.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, fscholz, Ailete619
 Dernière mise à jour par : loella16,