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.
- 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?
- 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?
- 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?
- 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?
- 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 :
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
Ajouter un commentaire
Français
English
Español
Italiano
Deutsch
Nederlands
Portuguesa
