Sélectionner avec Query Selector

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 p

Le 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.