document.
Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- Renvoie
- Le premier élément correspondant, ou
null.
Exemple
#const first = document.querySelector('.task')
const todo = document.querySelector('.task:not(.done)')
const last = document.querySelector('.tasks li:last-child')
console.log(first)
console.log(todo.textContent)
console.log(last.textContent)
console.log(document.querySelector('.missing'))Définition et utilisation
#La méthode querySelector() parcourt le document et renvoie le premier élément qui correspond au sélecteur CSS donné. Vous pouvez utiliser n’importe quel sélecteur connu des feuilles de style : "#menu", ".card", "nav a", "input[type=email]" ou "li:last-child".
Si aucun élément ne correspond, la méthode renvoie null. Lire une propriété de null déclenche une erreur, donc pour les éléments qui pourraient être absents de la page, vérifiez le résultat ou utilisez l’opérateur ?..
Vous pouvez appeler la méthode non seulement sur document, mais aussi sur n’importe quel élément. Elle ne cherche alors qu’à l’intérieur de celui-ci, ce qui est pratique pour les fragments de page répétés, comme des cartes de cours. Pour récupérer tous les éléments correspondants, utilisez querySelectorAll().
Syntaxe
#document.querySelector(selectors)
element.querySelector(selectors)Paramètres
#selectors
chaîne
Un sélecteur CSS, par ex."#menu"ou".card h3". Séparez plusieurs sélecteurs par des virgules.
Plus d’exemples
#const cssCard = document.querySelector('#css-course')
const price = cssCard.querySelector('.price')
console.log(cssCard)
console.log(price.textContent)const banner = document.querySelector('.promo-banner')
console.log(banner?.textContent ?? 'Aucune bannière sur la page')
console.log(document.querySelector('#save').textContent)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Vérifiez le résultat avant de l’utiliser, ou utilisez
?.. Une faute de frappe dans le sélecteur se termine par une erreur « Cannot read properties of null ». - Cherchez à l’intérieur d’un élément précis (
card.querySelector()) quand la page contient plusieurs fragments similaires. - Un identifiant qui commence par un chiffre demande un échappement particulier dans un sélecteur. Dans ce cas, il est plus simple d’utiliser
getElementById().
Entrées associées
#- querySelector() vs getElementById()querySelector() accepte tout sélecteur CSS et renvoie le premier élément correspondant ; getElementById() cherche seulement par l’attribut id, mais est plus simple.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- document.getElementById()Renvoie l’élément portant l’identifiant donné (l’attribut id), ou null s’il n’existe pas.
- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- ?.L’opérateur ?. (optional chaining) lit une propriété de façon sûre. Quand l’objet est null ou undefined, il renvoie undefined au lieu d’une erreur.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.