Introduction à la Manipulation du DOM
Objectifs
Comprendre comment créer dynamiquement des éléments HTML avec JavaScript.
Apprendre à récupérer et utiliser des données JSON pour peupler une page web.
Se familiariser avec la manipulation du DOM en JavaScript.
Résumé
Cette leçon vous montre comment créer dynamiquement une page HTML en utilisant JavaScript pour manipuler le DOM.
Description
Dans cette leçon, nous apprenons à créer dynamiquement une page HTML en utilisant JavaScript pour manipuler le DOM. Nous allons récupérer des données depuis un serveur sous forme de JSON, et les utiliser pour produire des éléments HTML structurés comprenant des titres et des paragraphes.
Premièrement, nous créons une div avec un ID dans notre fichier HTML principal. Ensuite, nous utilisons querySelector
pour récupérer cette div en JavaScript. Nous procédons à la récupération des données depuis le serveur en utilisant fetch
et convertissons la réponse en JSON.
Pour chaque élément du tableau JSON, nous créons des éléments HTML (div, h2, p) et les peuplons avec les données. Nous utilisons des template strings pour faciliter l'insertion de contenu dynamique. Chaque élément créé est ajouté au DOM de manière structurée, définissant les relations parent-enfant entre les éléments.
Enfin, nous affinons le style pour assurer une bonne lisibilité du contenu généré. Cette méthode offre une grande flexibilité pour créer des pages dynamiques et interactives basées sur des données récupérées en temps réel.
Questions - réponses
document.querySelector('#id')
pour récupérer une div par son ID.
createElement
est utilisé pour créer un nouvel élément HTML dynamiquement, permettant ainsi de peupler le DOM de manière interactive.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.