QuerySelector()
querySelector() permet d'effectuer une recherche dans un élément du DOM et retourne le premier élément correspondant au sélecteur lui étant passé. Si aucun élément n'est trouvé, il retourne alors null.
Par exemple dans le code HTML suivant:
<div class="game">Halo</div>
<div class="game">Resident Evil</div>
<div class="game">Hitman</div>Si une requête est effectué afin de trouver le premier élément possédant la classe .game
let game = document.querySelector('.game');L'élément suivant est retourné:
<div class="game">Halo</div>Anatomie
Décortiquons les parties composant cette requête.
let game
Le résultat de la requête est stocké dans une variable afin de pouvoir y accéder plus tard.
document
Correspond à l'élément dans laquelle la recherche doit être effectuée.
Dans cet exemple, la recherche s'effectue dans le document en entier. Il aurait possible d'être plus précis en partant d'un noeud moins global. Par exemple, effectuer un recherche à l'intérieur de l'élément contenu dans la variable game.
game.querySelector('.name');querySelector('.game')
Indique qu'un élément ayant la classe .game doit-être trouvé à l'intérieur de l'élément précédent (document).
Heureusement, tous les sélecteurs CSS sont supportés par querySelector(). Il est donc possible d'utiliser les mêmes sélecteurs en CSS qu'en JavaScript ✨.
Console
Il est possible directement dans la console du navigateur d'effectuer une requête querySelector() afin de voir en direct son résultat. Cette approche permet de tester rapidement sa requête avant de la copier dans son fichier de travail.
Raccourcis $0
Lorsqu'un élément a testé dépend d'une requête querySelector(), il est possible d'utiliser le raccourcis $0 de la console afin de gagner du temps. Tout élément inspecté se fait ajouter la marque == $0 dans le DOM. Ceci signifie que l'équivalent d'une requête querySelector() a été effectuée sur cet élément et que le résultat est accessible dans une variable temporaire nommée $0.