DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
La manipulation du DOM, c'est la façon dont une page web change après son chargement — afficher un message, ajouter une ligne à un tableau, valider un formulaire, réagir à un clic. Ce tutoriel couvre les API natives du navigateur (getElementById, querySelector, textContent, classList, addEventListener, createElement) sur lesquelles tous les frameworks sont construits.
Vous progresserez à travers quatre chapitres avec des exemples de code exécutables et une démo interactive de liste de tâches sur laquelle vous pouvez cliquer dans votre navigateur, accompagnée du code DOM vanilla équivalent. Chaque chapitre montre aussi comment décrire le comportement souhaité à un assistant IA et vérifier ce qu'il vous renvoie.
À la fin, vous saurez sélectionner des éléments en toute sécurité, brancher des événements, afficher des listes à partir d'un tableau de données, valider un formulaire à la soumission et éviter les schémas de layout thrashing qui rendent les pages lentes.
What's inside
- 1.Sélectionner des éléments — ce qu'est le DOM, trouver des éléments avec getElementById et querySelector, et décrire le changement souhaité à un assistant IA.
- 2.Texte, styles et événements — lire et modifier le texte, les attributs et les styles, et brancher vos premiers écouteurs click et input.
- 3.Événements et rendu — créer et supprimer des éléments, la délégation d'événements, et le rendu du DOM à partir d'un tableau de données.
- 4.Formulaires et performance — gérer la soumission de formulaire avec validation, plus le batching et le debouncing pour des applications rapides et réactives.