Temps de lecture : 7 minutes environ.
Dans ce tutoriel, nous allons clarifier les différences entre les méthodes getElementsBy* et querySelector* en JavaScript. Ces deux approches permettent de sélectionner des éléments dans le DOM, mais elles présentent des différences significatives en termes de fonctionnalité et de comportement.
Les méthodes de sélection du DOM
getElementsByTagName et getElementsByClassName
- Ces méthodes retournent une HTMLCollection, qui est une liste "live" des éléments correspondant.
- Si le DOM est modifié après l’appel, la collection est mise à jour automatiquement.
Exemple :
const elements = document.getElementsByTagName('p');
console.log(elements); // Affiche une HTMLCollection live.querySelector et querySelectorAll
- Ces méthodes utilisent des sélecteurs CSS pour trouver les éléments.
querySelectorretourne le premier élément correspondant.querySelectorAllretourne une NodeList, qui est une liste "statique".
Exemple :
const elements = document.querySelectorAll('p');
console.log(elements); // Affiche une NodeList statique.HTMLCollection vs. NodeList
- HTMLCollection
- Type de retour : Live (mise à jour en direct)
- Modification du DOM : Répercutée immédiatement
- NodeList
- Type de retour : Statique (figé)
- Modification du DOM : Non répercutée
Exemple de différence :
// HTML : <body><p>Paragraphe 1</p><p>Paragraphe 2</p></body>
const htmlCollection = document.getElementsByTagName('p');
const nodeList = document.querySelectorAll('p');
// Ajout d'un nouveau <p>
const newP = document.createElement('p');
newP.textContent = 'Paragraphe 3';
document.body.appendChild(newP);
console.log(htmlCollection.length); // 3 (mise à jour automatique)
console.log(nodeList.length); // 2 (reste figé)Quand utiliser getElementsBy* ou querySelector* ?
getElementsBy*:
Utilisez-le si vous avez besoin d’une collection live, par exemple pour surveiller les changements dans le DOM.querySelector*:
Utilisez-le pour sa flexibilité avec les sélecteurs CSS et pour obtenir des listes statiques.
Performances
Les différences de performances sont souvent négligeables. Si vous travaillez sur un projet où chaque milliseconde compte, il est préférable de tester vos cas spécifiques. En pratique, privilégiez la méthode qui convient le mieux à votre besoin fonctionnel.
Résumé
getElementsBy*est live, tandis quequerySelectorAllest statique.- Utilisez
querySelector*pour sa compatibilité avec les sélecteurs CSS complexes. - Les deux approches peuvent coexister selon vos besoins.
Si vous avez des questions ou des suggestions pour de futurs tutoriels, n’hésitez pas à nous rejoindre sur notre serveur Discord ! Merci pour votre attention, et à très bientôt ! 😊
const firstDiv = document.querySelector('.example');
const allDivs = document.querySelectorAll('.example');const divs = document.getElementsByClassName('example');Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
