Exercices JavaScript - Manipulation du DOM
Exercice 1 : Changer le texte d'un élément
Objectif : Créer une fonction qui change le texte du paragraphe ci-dessous.
Méthodes à utiliser : querySelector, innerText
Texte original
Exercice 2 : Changer la couleur d'un élément
Objectif : Créer une fonction qui change la couleur du titre.
Méthodes à utiliser : querySelector, style.color
Je suis un titre
Exercice 3 : Ajouter du HTML
Objectif : Ajouter du contenu HTML dans un div.
Méthodes à utiliser : querySelector, innerHTML
Exercice 4 : Ajouter et enlever des classes
Objectif : Manipuler les classes CSS d'un élément.
Méthodes à utiliser : querySelector, classList.add(), classList.remove()
Je suis un paragraphe normal
Exercice 5 : Modifier plusieurs éléments
Objectif : Sélectionner et modifier tous les éléments d'une classe.
Méthodes à utiliser : querySelectorAll, boucle for
Item 1
Item 2
Item 3
Item 4
Exercice 6 : Créer un sélecteur de couleur
Objectif : Créer des boîtes colorées qui changent le fond de la page.
Méthodes à utiliser : querySelector, querySelectorAll, style, classList
Exercice 7 : Formulaire dynamique
Objectif : Créer un formulaire qui affiche les valeurs en temps réel.
Méthodes à utiliser : querySelector, value, innerText
Exercice 8 : Liste TODO
Objectif : Créer une liste TODO simple.
Méthodes à utiliser : querySelector, innerHTML, value
Exercice 9 : Compteur avec conditions
Objectif : Créer un compteur qui change de style selon la valeur.
Méthodes à utiliser : querySelector, innerText, classList, conditions
0
Rouge si négatif, vert si positif, noir si zéro
Exercice 10 : Afficher/Masquer des éléments
Objectif : Créer un système d'onglets simple.
Méthodes à utiliser : querySelector, querySelectorAll, classList
Contenu de l'onglet 1
Lorem ipsum dolor sit amet.
Contenu de l'onglet 2
Consectetur adipiscing elit.
Contenu de l'onglet 3
Sed do eiusmod tempor.