Exercices JavaScript - Manipulation du DOM

Exercice 1: Modifier le contenu d'un élément

Manipulez le DOM pour changer le texte d'un paragraphe. Utilisez JavaScript pour sélectionner un élément par son ID et mettez à jour son contenu.

Consignes

1. Créez un paragraphe dans votre fichier HTML avec un ID spécifique.
2. Utilisez JavaScript pour sélectionner cet élément par son ID.
3. Changez le texte du paragraphe en utilisant JavaScript.

Exercice 2: Ajouter un élément au DOM

Utilisez JavaScript pour créer un nouvel élément, puis ajoutez-le au DOM.

Consignes

1. Créez un bouton dans votre fichier HTML avec un ID spécifique.
2. Utilisez JavaScript pour créer un nouvel élément (par exemple, une balise div).
3. Ajoutez ce nouvel élément à la page en le plaçant à l'intérieur du corps du document.

Exercice 3: Modifier les styles d'un élément

Manipulez les styles d'un élément en utilisant JavaScript. Changez au moins deux propriétés de style lorsque l'utilisateur interagit avec un élément.

Consignes

1. Créez une boîte (par exemple, une div) dans votre fichier HTML.
2. Utilisez JavaScript pour sélectionner cet élément.
3. Ajoutez un événement pour changer au moins deux propriétés de style lorsque l'utilisateur effectue une action (par exemple, un clic).

Exercice 4: Supprimer un élément du DOM

Utilisez JavaScript pour supprimer un élément du DOM lorsque l'utilisateur interagit avec un bouton.

Consignes

1. Créez une liste (par exemple, une ul) dans votre fichier HTML avec plusieurs éléments de liste (li).
2. Utilisez JavaScript pour sélectionner un élément de la liste.
3. Ajoutez un bouton qui, lorsqu'il est cliqué, supprime cet élément de la liste.

Exercice 5: Manipuler les classes CSS

Utilisez JavaScript pour ajouter et supprimer des classes CSS d'un élément en réponse aux actions de l'utilisateur.

Consignes

1. Créez un élément (par exemple, un bouton) dans votre fichier HTML.
2. Ajoutez une classe CSS à cet élément par défaut.
3. Utilisez JavaScript pour ajouter une deuxième classe lorsque l'utilisateur effectue une action (par exemple, un survol) et supprimez cette classe lors d'une autre action.