80. Sélectionner des éléments : querySelector() et querySelectorAll()
Ces méthodes de sélection modernes sont beaucoup plus flexibles que getElementById car elles utilisent des sélecteurs CSS.
1. querySelector()
Renvoie le premier élément du document qui correspond au sélecteur CSS spécifié.
Exemple : Sélectionner un ID, une classe ou une balise.
javascript // Sélectionner l'élément avec l'ID 'header' const header = document.querySelector('#header');
// Sélectionner le premier élément avec la classe 'item' const firstItem = document.querySelector('.item');
// Sélectionner la première balise à l'intérieur d'un div const link = document.querySelector('div > a');
2. querySelectorAll()
Renvoie une NodeList statique (semblable à un tableau) de tous les éléments correspondant au sélecteur CSS spécifié.
javascript // Sélectionner tous les éléments avec la classe 'button' const buttons = document.querySelectorAll('.button');
console.log(buttons.length); // Combien de boutons ont été trouvés
// Nous devons boucler sur la NodeList pour accéder à chaque élément : buttons.forEach(btn => { btn.style.backgroundColor = 'blue'; });
Bonne pratique : Préférez querySelector et querySelectorAll pour une sélection robuste et complexe.