Après avoir appris les bases de JavaScript, il est temps de rendre vos pages web interactives grâce au DOM et aux événements.
1. Qu’est-ce que le DOM ?
Le DOM est une représentation sous forme d’arbre du document HTML :
« Le DOM (…) est une représentation en mémoire du document HTML sous forme d’arbre. » Jour2 Dom Evenements
Le code suivant permet d’accéder aux éléments :
console.log(document.body);
console.log(document.title);
Jour2 Dom Evenements
2. Sélectionner un élément HTML avec JavaScript
Le document montre trois façons principales :
| Méthode | Exemple |
|---|---|
getElementById() | document.getElementById("intro") |
getElementsByClassName() | document.getElementsByClassName("maClasse") |
querySelector() | document.querySelector("#btn") |
Jour2 Dom Evenements
3. Modifier le contenu et le style
Exemple tiré du cours :
p.innerText = "Texte modifié dynamiquement !";
p.style.color = "blue";
Jour2 Dom Evenements
4. Gestion des événements
Les événements permettent de réagir aux actions de l’utilisateur.
Exemple depuis le PDF :
btn.addEventListener("click", () => {
alert("Bouton cliqué !");
});
Jour2 Dom Evenements
✏️ Mini-Projet : Gestionnaire de Tâches
Vous pouvez ajouter et supprimer une tâche :
li.textContent = input.value;
delBtn.addEventListener("click", () => li.remove());
Jour2 Dom Evenements
🚀 Projet Final : To-Do List Intelligente
Fonctionnalités du projet (issues du PDF) :
- ajouter une tâche avec catégorie
- marquer comme terminée
- filtrer par catégorie
Jour2 Dom Evenements
Le code complet permet même de sauvegarder les tâches :
localStorage.setItem('tasks', JSON.stringify(tasks));
Jour2 Dom Evenements
➡️ À la fin du Jour 2, vous savez créer des interfaces dynamiques et interactives avec JavaScript.
