Sélectionner avec Query Selector

Section Progression:

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.