Petit rappel: Sélécteurs CSS
On a déjà une façon archi-pratique de sélectionner nos éléments en CSS lorsqu’on cherche à leur appliquer un style.
#main-container .important pLe sélécteur CSS ci-dessus fait référence à tous les éléments portant le tag p qui sont contenus dans un élément portant la classe important qui sont contenus dans l’élément avec l’id main-container.
Alors j’ai une question pour vous.
Est-ce qu’on peut utiliser les sélécteurs CSS pour sélectionner les éléments du DOM (en Javascript) ?
La reponse est OUI ! Grâce aux méthodes querySelector et querySelectorAll
querySelector
console.log(document.querySelector('.important'));
querySelector sélectionne uniquement le premier élément qui correspond à notre sélécteur CSS.
querySelectorAll
console.log(document.querySelectorAll('.important'));
querySelectorAll nous permet de sélectionner tous les éléments qui correspondent à notre sélécteur CSS et les renvoie dans un array.
