mozilla
Vos résultats de recherche

    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);
    

    • 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

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1 3.5 (1.9.1)
    bug 416317
    8 10 3.2 (525.3)
    WebKit bug 16587
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 2.1 oui 9 10.0 3.2

    Spécification

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: fscholz, Goofy, Fredchat, khalid32, Nek, lithrel, Torvast
    Dernière mise à jour par : Torvast,
    Masquer la barre latérale