DOM, Événements

2.1 Le DOM - Sélectionner et Modifier

Qu’est-ce que le DOM ?

Le DOM (Document Object Model) représente la page HTML sous forme d’objets JavaScript qu’on peut manipuler.

// Accès aux parties principales
document.documentElement; // <html>
document.head; // <head>
document.body; // <body>

Sélectionner des éléments

// Par ID
const element = document.getElementById('monId');

// Par sélecteur CSS (le plus utile)
const titre = document.querySelector('h1'); // Premier h1
const tousLesP = document.querySelectorAll('p'); // Tous les <p>

// Sélecteurs avancés
document.querySelector('.container > button'); // Premier bouton enfant
document.querySelectorAll('button:not([disabled])'); // Boutons actifs

Créer et ajouter des éléments

addEventListener() est une méthode qui permet d’attacher un écouteur d’événement à un élément DOM. Elle écoute les actions de l’utilisateur (clic, survol, saisie, etc.) et exécute une fonction en réponse.

---

Syntaxe générale

element.addEventListener(type, callback, options);

---

Détail des paramètres : ('click', (event)

1️⃣ Premier paramètre : 'click' (Type d’événement)

C’est une chaîne de caractères qui spécifie quel événement écouter.

Exemples d’événements courants :

Événement	Description
'click'	Clic de la souris
'dblclick'	Double-clic
'mouseover'	Survol de la souris
'mouseout'	Sortie de la souris
'keydown'	Touche enfoncée
'keyup'	Touche relâchée
'input'	Saisie dans un champ
'submit'	Soumission d’un formulaire
'change'	Changement de valeur
'focus'	Élément reçoit le focus
'blur'	Élément perd le focus

Exemple :

// Écouter un double-clic
bouton.addEventListener('dblclick', () => {
    console.log('Double-clic détecté !');
});

---

2️⃣ Deuxième paramètre : (event) (Fonction de rappel)

C’est la fonction qui s’exécute quand l’événement se produit. Elle reçoit automatiquement un objet event contenant les informations sur l’événement.

Structure de la fonction callback :

bouton.addEventListener('click', (event) => {
    // event est l'objet événement
    // Votre code ici
});

Propriétés principales de l’objet event :

Propriété	Description	Exemple
event.target	L’élément qui a déclenché l’événement	<button>Cliquez-moi</button>
event.type	Le type d’événement	'click'
event.clientX	Position X de la souris	245
event.clientY	Position Y de la souris	120
event.key	La touche pressée (pour keydown/keyup)	'Enter'
event.preventDefault()	Annule l’action par défaut	Empêche la soumission d’un formulaire
event.stopPropagation()	Arrête la propagation de l’événement	Évite que l’événement remonte aux parents

---

Exemple détaillé avec event

const bouton = document.querySelector('button');

bouton.addEventListener('click', (event) => {
    // event.target : l'élément cliqué
    console.log('Élément cliqué :', event.target);
    // Résultat : <button>Cliquez-moi</button>

    // event.type : le type d'événement
    console.log("Type d'événement :", event.type);
    // Résultat : 'click'

    // event.clientX et event.clientY : position de la souris
    console.log('Position X :', event.clientX);
    console.log('Position Y :', event.clientY);

    // Accéder au texte du bouton
    console.log('Texte du bouton :', event.target.textContent);
});

---

Troisième paramètre : Options avancées

bouton.addEventListener(
    'click',
    (event) => {
        console.log('Bouton cliqué !');
    },
    { once: true },
); // Options

Options disponibles :

Option	Type	Description
once	Boolean	Si true, l’écouteur s’exécute une seule fois, puis se supprime
capture	Boolean	Si true, capture l’événement en phase de capture (au lieu de la phase de bubbling)
passive	Boolean	Si true, indique que le listener ne appellera jamais preventDefault()

Exemples :

// Exécuter une seule fois
bouton.addEventListener(
    'click',
    () => {
        console.log("Ceci s'affiche une seule fois");
    },
    { once: true },
);

// Avec capture
bouton.addEventListener(
    'click',
    () => {
        console.log('Phase de capture');
    },
    { capture: true },
);

// Plusieurs options
bouton.addEventListener(
    'click',
    () => {
        console.log('Une seule fois, en capture');
    },
    { once: true, capture: true },
);

---

Comparaison : Syntaxe simple vs avancée

Syntaxe simple (sans event)

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

✅ Suffisant quand on n’a pas besoin d’informations sur l’événement

---

Syntaxe avancée (avec event)

bouton.addEventListener(
    'click',
    (event) => {
        console.log('Cible :', event.target);
        console.log('Type :', event.type);
    },
    { once: true },
);

✅ Utile quand on a besoin d’accéder aux propriétés de l’événement

---

Cas d’usage pratiques

1. Valider un formulaire

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
    event.preventDefault(); // Empêche l'envoi par défaut
    console.log('Formulaire soumis !');
    // Votre logique de validation
});

2. Récupérer la position de la souris

document.addEventListener('mousemove', (event) => {
    console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
});

3. Détecter une touche spécifique

document.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        console.log('Touche Entrée pressée !');
    }
});

4. Bouton cliquable une seule fois

const btnUnique = document.querySelector('.btn-unique');

btnUnique.addEventListener(
    'click',
    (event) => {
        console.log('Vous avez cliqué !');
        event.target.disabled = true; // Désactiver le bouton
    },
    { once: true },
);

---

Résumé

Élément	Rôle
'click'	Type d’événement à écouter
(event)	Paramètre contenant les infos de l’événement
event.target	L’élément qui a déclenché l’événement
event.type	Le type d’événement (ex: ‘click’)
{ once: true }	Exécute une seule fois

// Créer un nouvel élément
const div = document.createElement('div');
div.textContent = 'Bonjour !';
div.className = 'ma-classe';
div.id = 'mon-id';

// Ajouter au DOM
document.body.appendChild(div);

// Ajouter du HTML
div.innerHTML = '<p>Contenu HTML</p>';

// Ajouter avant un élément
const reference = document.querySelector('.reference');
reference.parentNode.insertBefore(div, reference);

Modifier et supprimer

// Modifier le texte
const titre = document.querySelector('h1');
titre.textContent = 'Nouveau titre';

// Modifier les styles
titre.style.color = 'blue';
titre.style.fontSize = '24px';

// Ajouter/retirer des classes
titre.classList.add('active');
titre.classList.remove('inactive');
titre.classList.toggle('highlight');

// Vérifier une classe
if (titre.classList.contains('active')) {
    console.log('Le titre est actif');
}

// Supprimer un élément
titre.remove();

Attributs et propriétés

const lien = document.querySelector('a');

// Lire un attribut
const href = lien.getAttribute('href');

// Modifier un attribut
lien.setAttribute('href', 'https://example.com');
lien.setAttribute('target', '_blank');

// Supprimer un attribut
lien.removeAttribute('disabled');

// Vérifier un attribut
if (lien.hasAttribute('disabled')) {
    console.log('Le lien est désactivé');
}

// Attributs de données (data-*)
const element = document.querySelector('[data-id]');
console.log(element.dataset.id); // Lire data-id
element.dataset.status = 'actif'; // Modifier data-status

---

2.2 Événements - Écouter les Actions

Ajouter des écouteurs d’événements

const bouton = document.querySelector('button');

// Syntaxe simple
bouton.addEventListener('click', () => {
    console.log('Bouton cliqué !');
});

// Avec paramètres avancés
bouton.addEventListener(
    'click',
    (event) => {
        console.log('Cible :', event.target);
        console.log('Type :', event.type);
    },
    { once: true },
); // Exécuter une seule fois

Exemple : Formulaire interactif

const input = document.querySelector('input[type="text"]');
const bouton = document.querySelector('button');

// Événement input : à chaque caractère
input.addEventListener('input', (event) => {
    console.log('Valeur actuelle :', event.target.value);
});

// Événement keydown : touche enfoncée
input.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        console.log('Entrée pressée');
    }
});

// Événement submit : formulaire soumis
document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault(); // Empêcher le rechargement
    console.log('Formulaire soumis');
});

🎯 Points clés à retenir

Concept	Utilité
querySelector	Sélectionner des éléments avec CSS
addEventListener	Écouter les événements