Pour une présentation sur un sujet de veille en JavaScript DOM (Document Object
Model), voici un aperçu structuré :
1. Introduction au DOM
Définition : Expliquez ce qu'est le DOM et son rôle fondamental dans le
développement web.
Importance : Montrez pourquoi le DOM est essentiel pour manipuler dynamiquement le
contenu HTML et CSS.
2. Fonctionnalités du DOM avec JavaScript
Sélection d'éléments : Présentez les méthodes pour accéder aux éléments
(getElementById, querySelector, etc.).
Manipulation du contenu : Démonstration sur la modification du texte, des attributs
et des classes.
Ajout et suppression d'éléments : Explication de createElement, appendChild, et
removeChild.
3. Événements DOM
Gestion d'événements : Présentez les événements courants (clic, saisie clavier,
chargement de page).
Propagation et délégation d'événements : Expliquez le modèle de propagation des
événements et la délégation pour une gestion efficace.
4. API DOM modernes
API Mutation Observer : Présentez cette API pour observer les changements dans le
DOM.
Intersection Observer : Expliquez l'utilité pour le lazy loading ou la détection
d’éléments en vue.
5. Bonnes pratiques et performances
Minimiser les manipulations DOM : Discutez de l'impact des manipulations DOM sur
les performances.
Utilisation de la mise en cache : Conseils pour réduire les accès répétés au DOM.
Throttling et debouncing : Montrez comment limiter la fréquence d'exécution des
événements.
6. Cas pratiques et démonstration
Exemples interactifs : Montrez des exemples concrets, comme un menu déroulant ou
une galerie d’images dynamique.
Optimisations : Démontrez des techniques pour améliorer les performances sur des
exemples concrets.
7. Conclusion et perspectives
Récapitulatif des points clés : Reprenez brièvement les éléments principaux
abordés.
Évolutions futures : Discutez de l'évolution des technologies DOM et de l'impact
des frameworks modernes (React, Vue) sur la manipulation du DOM.
Cette structure vous aidera à guider votre audience à travers les concepts clés du
DOM et son utilisation avec JavaScript.