HTML CSS JS

Le DOM (Document Object Model) est la représentation en mémoire de votre page HTML sous forme d'un arbre d'objets. Chaque balise HTML devient un "nœud" dans cet arbre, et JavaScript peut lire, modifier, ajouter ou supprimer n'importe quel nœud. C'est ce qui rend les pages dynamiques.

Sélectionner des éléments

Pour modifier un élément, il faut d'abord le trouver :

• document.querySelector('.card') — retourne le PREMIER élément qui correspond au sélecteur CSS
• document.querySelectorAll('.card') — retourne TOUS les éléments (NodeList)

Ces méthodes acceptent n'importe quel sélecteur CSS : .classe, #id, nav a, input[type="email"], etc.

Modifier le contenu

• element.textContent — change le texte brut (sécurisé, n'interprète pas le HTML)
• element.innerHTML — change le HTML (interprète les balises — attention au XSS avec des données utilisateur)

Pour des données venant de l'utilisateur, utilisez toujours textContent.

Modifier le style — via les classes, PAS via .style

• element.classList.add('hidden') — ajoute la classe
• element.classList.remove('hidden') — retire la classe
• element.classList.toggle('active') — ajoute si absente, retire si présente
• element.classList.contains('active') — vérifie (true/false)

Pourquoi les classes sont meilleures que .style :

1. Le style reste dans le CSS (séparation des responsabilités)
2. Les transitions CSS fonctionnent avec les changements de classe
3. C'est plus lisible et maintenable

> Règle : Ne modifiez JAMAIS le style avec element.style.color = "red". Ajoutez/retirez des classes CSS.

Les événements

Les événements sont le cœur de l'interactivité. Un événement se produit quand l'utilisateur fait quelque chose :

element.addEventListener('type', () => { /* code à exécuter */ });

Événements courants :

• click — clic de souris
• mouseover / mouseout — la souris entre / sort
• submit — un formulaire est soumis
• input — la valeur d'un champ change (chaque frappe)
• keydown — une touche est pressée
• scroll — la page scrolle
• DOMContentLoaded — le HTML est chargé (sur document)

> Attention : N'utilisez PAS onclick="..." en HTML. Utilisez addEventListener en JavaScript — c'est plus propre et permet plusieurs handlers.

Créer et supprimer des éléments

• document.createElement('article') — crée un élément
• parent.appendChild(element) — ajoute à la fin d'un parent
• element.remove() — supprime l'élément

IntersectionObserver — détecter la visibilité

IntersectionObserver détecte quand un élément entre dans le viewport (la zone visible). C'est l'outil idéal pour déclencher les animations au scroll :

On crée un observer avec une fonction callback. Quand un élément observé entre dans le viewport (entry.isIntersecting est true), on ajoute la classe d'animation. On appelle observer.unobserve() pour ne déclencher qu'une seule fois.