document.querySelector

Sommaire

Retourne le premier élément dans le document (en partant du premier niveau du html et ordonné comme les éléments du document) qui correspond au groupe de sélecteurs passés en paramètre.

Syntaxe

element = document.querySelector(sélecteurs);

où

• element est un objet element.
• sélecteurs est une chaîne qui contient un ou plusieurs sélecteurs CSS séparés par des virgules.

Exemple

Dans cet exemple, le premier élément dans le document qui contient la classe myclass est retourné :

var el = document.querySelector(".myclass");

Notes

Retourne null si aucune correspondance n'est trouvée; dans le cas contraire, le premier élément correspondant est retourné.

Si le sélecteur correspond à un ID et que cet ID est utilisé à tort plusieurs fois dans le document, le premier élément correspondant sera retourné.

Une exception SYNTAX_ERR est lancée si le groupe de sélecteurs spécifié est invalide.

querySelector() a été introduit dans l'API des sélecteurs (en).

La chaîne passée en paramètre à querySelector doit suivre la syntaxe CSS.

Les pseudo-classes CSS ne retourneront jamais aucun élément, comme spécifié dans l'API des sélecteurs (en).

Pour utiliser un ID ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash. Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères classique, vous devez donc l'échapper deux fois (une pour la chaîne de caractères JavaScript et une autre fois pour querySelector) :

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#foobar"
  document.querySelector('#foo\bar')    // Ne correspond à rien

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // Correspond au premier div

  document.querySelector('#foo:bar')    // Ne correspond à rien
  document.querySelector('#foo\\:bar')  // Correspond au second div
</script>

Compatibilité avec les navigateurs

Spécification

• API des sélecteurs (en)

Voir aussi

• document.querySelectorAll() ;
• element.querySelector() ;
• element.querySelectorAll() ;
• Extraits de code pour querySelector