DOM & Événements

Objectif de la semaine : relier événements utilisateur et DOM.

Méthode recommandée : teste une interaction à la fois: sélectionner, écouter, modifier. Avancez par petites étapes et testez chaque changement immédiatement.

Un événement est une action qui se produit dans le navigateur (clic, chargement, frappe clavier…). JavaScript peut réagir à ces événements avec addEventListener.

Quand utiliser window.load vs defer ?

defer est généralement le choix recommandé: le script attend que le HTML soit parsé, puis s'exécute sans bloquer l'affichage.

Utilisez window.load seulement si vous devez attendre toutes les ressources (images, polices, etc.), par exemple pour lire des dimensions réelles d'image.

// Script lié avec defer (recommandé pour la plupart des cas)
// <script src="app.js" defer></script>

// Si on veut agir dès que le DOM est prêt
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM prêt');
});

// Si on doit attendre aussi les images/ressources
window.addEventListener('load', () => {
  console.log('Page complètement chargée');
});

Exemple d'événement click

const bouton = document.querySelector('#monBouton');

bouton.addEventListener('click', (event) => {
  console.log('Bouton cliqué !');
  console.log(event.target.id);
});

Une fonction anonyme est une fonction sans nom, souvent passée directement comme argument (ex. : à addEventListener).

Retenez cette logique : fonction nommée = réutilisable et facile à tester; fonction anonyme = pratique pour une action ponctuelle. En pratique, les deux sont valides, mais il faut choisir selon le contexte.

// Fonction NOMMÉE
function direBonjour() {
  console.log('Bonjour !');
}
btn.addEventListener('click', direBonjour);  // référence à la fonction

// Fonction ANONYME (expression)
btn.addEventListener('click', function() {
  console.log('Bonjour !');
});

// Fonction FLÉCHÉE anonyme (forme moderne)
btn.addEventListener('click', () => {
  console.log('Bonjour !');
});

// Une seule ligne : accolades et return implicites
btn.addEventListener('click', () => console.log('Bonjour !'));

// ===== Différence : nommée vs anonyme =====
// Fonction nommée → peut être appelée ailleurs, débogable
// Fonction anonyme → usage unique, pratique pour les événements

Le DOM (Document Object Model) est la représentation du HTML en mémoire, sous forme d'arbre d'objets. JavaScript peut le lire et le modifier en temps réel.

// Le DOM est accessible via l'objet global 'document'
console.log(document.title);         // titre de la page
console.log(document.URL);           // URL de la page
document.title = 'Nouveau titre';    // modifie l'onglet

// ===== SÉLECTIONNER des éléments =====

// Premier élément correspondant (retourne un objet ou null)
const titre   = document.querySelector('h1');
const bouton  = document.querySelector('#monBouton');
const carte   = document.querySelector('.carte');
const lienNav = document.querySelector('nav a');

// Tous les éléments correspondants (retourne une NodeList)
const paragraphes = document.querySelectorAll('p');
const boutons     = document.querySelectorAll('.btn');

// Parcourir une NodeList
paragraphes.forEach(p => console.log(p.textContent));

// Méthodes classiques (encore utilisées)
document.getElementById('titre');         // sans #
document.getElementsByClassName('carte'); // sans .
document.getElementsByTagName('li');

Manipuler le DOM consiste à lire l'état de la page, puis modifier uniquement ce qui est nécessaire (texte, classes, attributs, éléments). C'est la base de toute interface interactive.

Ordre recommandé : 1) sélectionner l'élément, 2) appliquer une seule modification claire, 3) tester visuellement le résultat, 4) ajouter la prochaine modification.

1) Sélectionner l'élément à modifier

Commencez toujours par cibler précisément l'élément. Sans cette étape, aucune manipulation n'est possible.

const el = document.querySelector('#boite');
const champ = document.querySelector('#nom');

2) Lire et modifier le contenu

textContent est la méthode la plus sûre pour afficher du texte. Utilisez innerHTML seulement si vous devez injecter du HTML.

el.textContent = 'Nouveau texte';
console.log(el.textContent);

el.innerHTML = '<strong>Gras</strong>'; // seulement si nécessaire

3) Travailler avec les attributs et les champs

Les attributs contrôlent le comportement des éléments, et la propriété value sert surtout pour les formulaires.

el.setAttribute('href', 'https://exemple.com');
el.removeAttribute('disabled');

console.log(champ.value); // lire
champ.value = 'Marie';    // écrire

4) Modifier l'apparence avec les classes (prioritaire) et styles

Privilégiez classList pour garder le style dans CSS. Les styles inline sont utiles pour un ajustement ponctuel.

el.classList.add('actif');
el.classList.toggle('ouvert');

el.style.display = 'none';
el.style.display = '';

5) Créer, insérer et supprimer des éléments

Cette étape est utile pour les listes dynamiques, notifications ou cartes générées en JavaScript.

const li = document.createElement('li');
li.textContent = 'Nouvel élément';
document.querySelector('ul').appendChild(li);

li.remove();

6) Naviguer dans la structure DOM

Pour des interactions plus avancées, on peut remonter au parent ou explorer les enfants directs.

el.parentElement;
el.children;
el.firstElementChild;
el.lastElementChild;

Reproduisez le plus fidèlement possible une des deux démos interactives de cette semaine (compteur ou liste dynamique).

1. Recréez la structure HTML de la démo choisie (mêmes éléments et mêmes identifiants).
2. Implémentez le JavaScript pour obtenir le même comportement interactif.
3. Reproduisez le rendu visuel de base avec du CSS et testez tous les cas d’usage.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.