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.
Comparaison point par point
#Quels sélecteurs elle accepte
- document.querySelector()
- N’importe quel sélecteur CSS (classe, attribut, imbrication)
- document.getElementById()
- Seulement la valeur de l’attribut id, sans
#
Peut être appelée sur n’importe quel élément
- document.querySelector()
- Oui, elle cherche seulement à l’intérieur
- document.getElementById()
- Non, fonctionne uniquement sur
document
Quand rien ne correspond
Casse dans le nom
- document.querySelector()
- Dépend de l’écriture du sélecteur CSS
- document.getElementById()
- A de l’importance, l’id doit être identique
Recherche par un id connu
- document.querySelector()
- Légèrement plus lente, analyse le sélecteur
- document.getElementById()
- La plus rapide, accès direct par l’id
Usage typique
- document.querySelector()
- Classes, attributs, sélecteurs imbriqués
- document.getElementById()
- Identifiant simple d’élément, connu à l’avance
Exemple
#const byId = document.getElementById('task-2')
const bySelector = document.querySelector('#task-2')
const byClass = document.querySelector('.task:not(.done)')
console.log(byId === bySelector)
console.log(byClass.textContent)
console.log(document.getElementById('task-3'))Définition et utilisation
#Les deux méthodes renvoient le premier élément correspondant, ou null si elles ne trouvent rien, et toutes deux lisent le document existant sans créer de nouveaux éléments. Ce qui les distingue, c’est ce qu’elles recherchent. querySelector() accepte n’importe quel sélecteur CSS, comme ".card", "nav a" ou "input[type=email]". getElementById() accepte seulement la valeur de l’attribut id, sans le caractère #, car ce n’est pas un sélecteur CSS.
Vous pouvez appeler querySelector() non seulement sur document, mais aussi sur n’importe quel élément, et elle cherche alors seulement à l’intérieur de celui-ci. getElementById() ne fonctionne que sur document. La recherche par id est d’ailleurs l’opération la plus rapide du DOM, car le navigateur peut accéder directement à l’élément, sans analyser de sélecteur.
Vous avez un identifiant simple, connu à l’avance, et vous cherchez dans tout le document ? getElementById() est plus simple et plus rapide. Vous avez besoin d’une classe, d’un attribut, d’un sélecteur imbriqué, ou de chercher à l’intérieur d’un élément précis ? Utilisez querySelector().
Syntaxe
#document.querySelector(selectors)
element.querySelector(selectors)
document.getElementById(id)Plus d’exemples
#const card = document.querySelector('#html-course')
const price = card.querySelector('.price')
console.log(price.textContent)
console.log(typeof card.getElementById)Un élément n’a pas de méthode getElementById(), seul document l’a. En cherchant à l’intérieur d’un élément précis, utilisez toujours querySelector() ou querySelectorAll().
console.log(document.getElementById('Submit-Btn')?.textContent)
console.log(document.getElementById('submit-btn'))
console.log(document.querySelector('#Submit-Btn')?.textContent)Bonnes pratiques
#- Vous avez un
idsimple et unique ?getElementById()est la solution la plus rapide et la plus lisible. - Vous avez besoin de chercher seulement à l’intérieur d’un élément précis ? Appelez
querySelector()sur cet élément, pas surdocument. Ce n’est pas possible avecgetElementById(). - Vérifiez le résultat avant de l’utiliser, ou utilisez
?.. Les deux méthodes renvoientnullquand elles ne trouvent rien.
Entrées associées
#- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- document.getElementById()Renvoie l’élément portant l’identifiant donné (l’attribut id), ou null s’il n’existe pas.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.