DOM et navigateur: Apprendre à modifier le DOM en JS

Ouvert le : lundi 2 décembre 2019, 00:00

Avant de commencer, créez un nouveau dossier pour cet exercice, puis récupérer le fichier fourni en pièce jointe (index.html). Il vous servira de base de travail HTML pour réaliser l’exercice.

Ensuite, créez un fichier dom.js, chargez le dans votre page HTML, puis faites vos exercices dans le fichier JS.

Vous aurez besoin de la fonction addEventListener() pour réagir à vos clics sur boutons (on verra ça plus tard, utilisez-la au feeling pour le moment). Chaque action sera déclenché par le clic sur un bouton, voyez le résultat en vidéo.

Lire le DOM

afficher le texte de la balise ayant l'id 'titre2'
afficher le nombre de balises ayant la classe 'titre'
afficher le texte de toutes les balises ayant la classe 'titre'
afficher le texte de toutes les balises 'li'

Modifier le DOM

changer le contenu du h1 en 'Bienvenue'
changer le contenu du h2 en 'Exo JS'
changer le contenu paragraphe en 'Voici quelques fonctions exécutées en javascript.'
changer le contenu de chaque point (li) de la liste en "Liste 1", "Liste 2", etc...

Modifier le style

aligner le titre 1 au centre de la page
mettre en rouge tous les éléments ayant la classe 'titre'
mettre une bordure 'solid 1px black' et un padding '10px' au paragraphe
faire disparaître la liste

Vidéo :

index.html
22 juillet 2020, 01:03