Module 1 : Introduction à JavaScript
1.1 — Premiers pas en JavaScript Aperçu
Module 2 : Opérateurs et conditions
2.1 — Conditions et logique Aperçu
Module 3 : Fonctions et portée
3.1 — Écrire et utiliser des fonctions Aperçu
Module 4 : Boucles et tableaux
4.1 — Tableaux et boucles Aperçu
Module 5 : Objets et JSON
5.1 — Objets JavaScript Aperçu
Module 6 : DOM — Sélectionner des éléments
6.1 — Le DOM et les sélecteurs Aperçu
Module 7 : DOM — Modifier le contenu et le style
7.1 — Modifier la page Aperçu
Module 8 : Événements
8.1 — Écouter les événements Aperçu
Module 9 : Formulaires dynamiques et validation
9.1 — Validation avancée Aperçu
Module 10 : API Fetch — Requêtes HTTP
10.1 — Fetch et async/await Aperçu
Module 11 : Manipulation de données — filter, map, reduce
11.1 — Filter, Map, Reduce Aperçu
Module 12 : Stockage local — localStorage
12.1 — Persister des données Aperçu
Module 13 : Modules et organisation du code
13.1 — Modules ES6 Aperçu
Module 14 : Projet final — Site interactif complet
14.1 — Application web interactive Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 7 : DOM — Modifier le contenu et le style Aperçu gratuit

7.1 — Modifier la page

📋 Objectifs d'apprentissage

  • Modifier le texte avec textContent et innerHTML
  • Changer les classes avec classList (add, remove, toggle)
  • Modifier le style inline
  • Créer et supprimer des éléments

Modifier le contenu

const titre = document.querySelector("h1");
titre.textContent = "Nouveau titre";        // Change le texte (sécurisé)
titre.innerHTML = "<span>Titre</span>"; // Insère du HTML (⚠️ sécurité)

Manipuler les classes

const box = document.querySelector(".box");
box.classList.add("active");     // Ajoute la classe
box.classList.remove("hidden");  // Retire la classe
box.classList.toggle("dark");    // Bascule (ajoute si absent, retire si présent)
box.classList.contains("dark");  // Vérifie (true/false)

Créer un élément

const newP = document.createElement("p");
newP.textContent = "Je suis nouveau !";
document.querySelector("main").appendChild(newP);

💡 Dark mode en 1 clic

document.body.classList.toggle("dark-mode"); — un seul bouton, une seule ligne, et tout le site change de thème (si le CSS est prêt).

Ceci est un aperçu gratuit.
Voir la formation complète