Exercice JavaScript : Manipulation du DOM

Exercice Corrige JavaScript

 

Le Document Object Model (DOM) est une représentation hiérarchique d'une page web, qui permet à JavaScript de manipuler les éléments HTML et CSS en temps réel. Dans ce sujet, nous explorerons les bases de la manipulation du DOM en JavaScript.

  1. Comment peut-on récupérer un élément HTML par son ID en JavaScript, et lui ajouter du contenu HTML à l'aide de la propriété innerHTML?
  2. Comment peut-on parcourir une liste d'éléments HTML et leur ajouter un événement de clic en utilisant la méthode forEach() de JavaScript?
  3. Comment peut-on ajouter un nouvel élément HTML à une page web en utilisant JavaScript, et le placer à l'intérieur d'un autre élément spécifié par son ID?
  4. Comment peut-on créer une animation simple en utilisant la méthode setInterval() de JavaScript pour modifier les propriétés CSS d'un élément HTML?
  5. Comment peut-on utiliser la méthode getComputedStyle() de JavaScript pour récupérer les styles CSS appliqués à un élément HTML, et les modifier en conséquence à l'aide de la propriété style?

Solution :

1)Récupérer un élément HTML par son ID et lui ajouter du contenu HTML à l'aide de la propriété innerHTML: // Récupérer l'élément HTML par son ID const element = document.getElementById('monElement'); // Ajouter du contenu HTML à l'élément element.innerHTML = '

Mon titre

Mon paragraphe

'; 2)Parcourir une liste d'éléments HTML et leur ajouter un événement de clic en utilisant la méthode forEach() de JavaScript: // Récupérer une liste d'éléments HTML const elements = document.querySelectorAll('.maClasse'); // Parcourir la liste d'éléments et leur ajouter un événement de clic elements.forEach(element => { element.addEventListener('click', () => { console.log('Clic détecté'); }); }); 3)Ajouter un nouvel élément HTML à une page web en utilisant JavaScript, et le placer à l'intérieur d'un autre élément spécifié par son ID: // Créer un nouvel élément HTML const nouvelElement = document.createElement('div'); // Ajouter du contenu HTML à l'élément nouvelElement.innerHTML = '

Mon titre

Mon paragraphe

'; // Récupérer l'élément HTML où l'on souhaite ajouter le nouvel élément const parentElement = document.getElementById('monParentElement'); // Ajouter le nouvel élément à l'intérieur de l'élément parent parentElement.appendChild(nouvelElement); 4)Créer une animation simple en utilisant la méthode setInterval() de JavaScript pour modifier les propriétés CSS d'un élément HTML: // Récupérer l'élément HTML à animer const element = document.getElementById('monElement'); // Définir les propriétés CSS de départ let position = 0; // Définir l'animation en utilisant setInterval() const animation = setInterval(() => { // Modifier les propriétés CSS à chaque intervalle position += 10; element.style.left = `${position}px`; // Arrêter l'animation lorsque l'élément est arrivé à sa destination if (position >= 100) { clearInterval(animation); } }, 50); // Interval de 50 millisecondes 5)Utiliser la méthode getComputedStyle() de JavaScript pour récupérer les styles CSS appliqués à un élément HTML, et les modifier en conséquence à l'aide de la propriété style: // Récupérer l'élément HTML dont on souhaite modifier les propriétés CSS const element = document.getElementById('monElement'); // Récupérer les propriétés CSS appliquées à l'élément const styles = window.getComputedStyle(element); // Modifier les propriétés CSS à l'aide de la propriété style element.style.backgroundColor = 'blue'; element.style.width = `${parseInt(styles.width) + 100}px`;

Si vous avez trouvé les exercices corrigés en JavaScript de Mr JoëlYk intéressants et utiles, pourquoi ne pas les partager avec d'autres personnes qui pourraient également en bénéficier ? Partagez ce lien sur les réseaux sociaux ou envoyez-le à vos amis et collègues. Vous pourriez aider quelqu'un à améliorer ses compétences en programmation ou à trouver des solutions à des problèmes complexes. N'oubliez pas que la connaissance doit être partagée pour grandir. Merci pour votre soutien et votre partage !

Contact WhatsApp : +237 658395978 | Réaliser Par Joël_Yk

Aucune note. Soyez le premier à attribuer une note !

Ajouter un commentaire

Anti-spam
Sélectionnez l'image visible le moins de fois

Gestion des cookies

www.pandacodeur.com dépose des cookies pour améliorer votre expérience de navigation, mesurer l'audience du site internet, afficher des publicités personnalisées, réaliser des campagnes ciblées et personnaliser l'interface du site.