JavaScript et Développement Mobile ‐ Partie 2
4. Manipulation du DOM
4.1 Sélection des Éléments
JavaScript offre plusieurs méthodes pour sélectionner des éléments du DOM :
Sélection par Identifiant
// Sélectionne UN élément par son ID (unique)
const header = [Link]("header");
Sélection par Classe
// Retourne une HTMLCollection (similaire à un tableau)
const boutons = [Link]("btn");
// Parcourir la collection
for (let i = 0; i < [Link]; i++) {
[Link](boutons[i]);
}
// Convertir en tableau
[Link](boutons).forEach(bouton => {
[Link](bouton);
});
Sélection par Sélecteur CSS ﴾Méthode Moderne Recommandée﴿
// querySelector ‐ Retourne le PREMIER élément correspondant
const premierBouton = [Link](".btn");
const navigation = [Link]("#nav");
const premierLien = [Link]("a[href^='https']");
// querySelectorAll ‐ Retourne TOUS les éléments correspondants
const tousLesBoutons = [Link](".btn");
const liensExternes = [Link]("a[target='_blank']");
// Sélecteurs complexes
const itemsActifs = [Link]("[Link] > [Link]");
Recommandation : Privilégiez querySelector et querySelectorAll pour leur flexibilité et leur syn‐
taxe familière aux utilisateurs de CSS.
4.2 Modification du Contenu
Propriétés de Contenu
const element = [Link]("#mon‐element");
// textContent ‐ Texte brut (plus sûr, recommandé)
[Link] = "Nouveau texte";
[Link]([Link]);
// innerText ‐ Texte visible (tient compte du CSS)
1
[Link] = "Texte visible";
// innerHTML ‐ Contenu HTML (attention aux failles XSS)
[Link] = "<strong>Texte en gras</strong>";
Attention Sécurité : N’utilisez jamais innerHTML avec des données provenant de l’utilisateur sans les
avoir préalablement assainies. Cela peut créer des failles de sécurité XSS ﴾Cross‐Site Scripting﴿.
// DANGEREUX ‐ Ne faites jamais ceci
const saisieUtilisateur = "<script>alert('Piraté!')</script>";
[Link] = saisieUtilisateur; // Vulnérabilité XSS
// SÉCURISÉ ‐ Utilisez textContent pour les données utilisateur
[Link] = saisieUtilisateur; // Le script sera affiché comme texte
4.3 Modification des Attributs
const image = [Link]("img");
const lien = [Link]("a");
// getAttribute ‐ Obtenir la valeur d'un attribut
const source = [Link]("src");
const href = [Link]("href");
// setAttribute ‐ Définir un attribut
[Link]("src", "nouvelle‐[Link]");
[Link]("alt", "Description de l'image");
// removeAttribute ‐ Supprimer un attribut
[Link]("target");
// hasAttribute ‐ Vérifier l'existence d'un attribut
if ([Link]("target")) {
[Link]("Le lien s'ouvre dans une nouvelle fenêtre");
}
// Accès direct aux attributs courants
[Link] = "[Link]";
[Link] = "Description";
[Link] = "[Link]
// Attributs data‐* personnalisés
const carte = [Link](".carte");
[Link]("data‐id", "123");
// Accès via dataset
[Link]([Link]); // "123"
[Link] = "29.99"; // Ajoute data‐prix="29.99"
4.4 Modification des Classes CSS
const element = [Link](".ma‐carte");
// classList ‐ API moderne pour gérer les classes
[Link]("active"); // Ajoute une classe
[Link]("inactive"); // Supprime une classe
[Link]("visible"); // Bascule une classe
2
[Link]("ancien", "nouveau"); // Remplace une classe
// Vérifier la présence d'une classe
if ([Link]("active")) {
[Link]("L'élément est actif");
}
// Ajouter/supprimer plusieurs classes
[Link]("classe1", "classe2", "classe3");
[Link]("classe1", "classe2");
4.5 Modification des Styles
const boite = [Link](".boite");
// Modification directe des styles inline
[Link] = "200px";
[Link] = "150px";
[Link] = "#3498db"; // camelCase pour les propriétés CSS
[Link] = "10px";
[Link] = "0 4px 6px rgba(0,0,0,0.1)";
// Supprimer un style
[Link] = ""; // Supprime la propriété width
// Obtenir les styles calculés (y compris ceux du CSS)
const stylesCalcules = [Link](boite);
[Link]([Link]);
[Link]([Link]);
4.6 Création et Insertion d’Éléments
Création d’Éléments
// Créer un nouvel élément
const nouveauParagraphe = [Link]("p");
[Link] = "Ceci est un nouveau paragraphe.";
[Link]("paragraphe‐dynamique");
[Link] = "paragraphe‐1";
// Créer un élément avec du contenu HTML
const nouvelleDiv = [Link]("div");
[Link] = `
<h3>Titre</h3>
<p>Description du contenu</p>
`;
// Créer un fragment de document (pour les insertions multiples)
const fragment = [Link]();
for (let i = 0; i < 5; i++) {
const li = [Link]("li");
[Link] = `Élément ${i + 1}`;
[Link](li);
}
3
Insertion d’Éléments
const conteneur = [Link]("#conteneur");
const reference = [Link]("#reference");
// appendChild ‐ Ajoute à la fin du parent
[Link](nouveauParagraphe);
// insertBefore ‐ Insère avant un élément de référence
[Link](nouveauParagraphe, reference);
// Méthodes modernes avec insertAdjacentElement
[Link]("beforebegin", nouvelleDiv); // Avant l'élément
[Link]("afterend", nouvelleDiv); // Après l'élément
// prepend et append (méthodes modernes)
[Link](nouveauParagraphe); // Au début
[Link](nouveauParagraphe); // À la fin
Clonage et Suppression
// Cloner un élément
const original = [Link](".carte");
const copie = [Link](false); // Clone superficiel
const copieComplete = [Link](true); // Clone profond
// Supprimer un élément
const aSupprimer = [Link]("#a‐supprimer");
[Link](); // Méthode moderne
// Remplacer un élément
const ancien = [Link]("#ancien");
const nouveau = [Link]("div");
[Link] = "Nouvel élément";
[Link](nouveau);
5. Gestion des Événements
5.1 Introduction aux Événements
Les événements sont des actions ou des occurrences qui se produisent dans le navigateur, auxquelles
JavaScript peut réagir. Ils constituent le cœur de l’interactivité des applications web.
Types d’Événements Courants
Événements de souris : ‐ click : Clic sur un élément ‐ dblclick : Double‐clic ‐ mousedown / mouseup
: Bouton de souris enfoncé/relâché ‐ mouseover / mouseout : Survol d’un élément ‐ mousemove : Mou‐
vement de la souris
Événements de clavier : ‐ keydown : Touche enfoncée ‐ keyup : Touche relâchée
Événements de formulaire : ‐ submit : Soumission d’un formulaire ‐ change : Changement de valeur
‐ input : Saisie en temps réel ‐ focus / blur : Obtention/perte du focus
Événements tactiles ﴾mobile﴿ : ‐ touchstart : Début du toucher ‐ touchmove : Mouvement du doigt
‐ touchend : Fin du toucher
4
Événements de document : ‐ DOMContentLoaded : DOM chargé ‐ load : Page complètement chargée
‐ scroll : Défilement ‐ resize : Redimensionnement de la fenêtre
5.2 Ajout d’Écouteurs d’Événements
Méthode addEventListener ﴾Recommandée﴿
const bouton = [Link]("#mon‐bouton");
// Syntaxe de base
[Link]("click", function(event) {
[Link]("Bouton cliqué !");
});
// Avec une fonction fléchée
[Link]("click", (event) => {
[Link]("Bouton cliqué !");
});
// Avec une fonction nommée (recommandé pour pouvoir la retirer)
function gererClic(event) {
[Link]("Bouton cliqué !");
}
[Link]("click", gererClic);
// Options de l'écouteur
[Link]("click", gererClic, {
once: true, // Se déclenche une seule fois
passive: true, // Améliore les performances
capture: false // Phase de capture ou bouillonnement
});
Suppression d’Écouteurs
// La fonction doit être nommée et identique
function gererClic(event) {
[Link]("Clic !");
}
[Link]("click", gererClic);
[Link]("click", gererClic);
5.3 L’Objet Event
Lorsqu’un événement se produit, JavaScript crée un objet Event contenant des informations :
[Link]("#formulaire").addEventListener("submit", function(event) {
// Propriétés communes
[Link]([Link]); // "submit"
[Link]([Link]); // L'élément qui a déclenché l'événement
[Link]([Link]); // L'élément avec l'écouteur attaché
// Empêcher le comportement par défaut
[Link](); // Empêche la soumission du formulaire
// Arrêter la propagation
[Link]();
5
});
// Événements de souris
[Link]("click", function(event) {
[Link]([Link], [Link]); // Position dans la fenêtre
[Link]([Link], [Link]); // Position dans la page
[Link]([Link]); // Bouton de souris utilisé
});
// Événements de clavier
[Link]("keydown", function(event) {
[Link]([Link]); // Caractère de la touche
[Link]([Link]); // Code physique de la touche
});
5.4 Propagation des Événements
Les événements se propagent dans le DOM en trois phases :
1. Phase de capture : L’événement descend du document vers l’élément cible
2. Phase cible : L’événement atteint l’élément cible
3. Phase de bouillonnement : L’événement remonte vers le document
const externe = [Link]("externe");
const interne = [Link]("interne");
const bouton = [Link]("bouton");
// Par défaut, les écouteurs s'exécutent pendant le bouillonnement
[Link]("click", () => [Link]("Externe"));
[Link]("click", () => [Link]("Interne"));
[Link]("click", () => [Link]("Bouton"));
// Cliquer sur le bouton affiche :
// "Bouton" ‐> "Interne" ‐> "Externe" (bouillonnement)
// Arrêter la propagation
[Link]("click", (event) => {
[Link]("Bouton");
[Link](); // Arrête le bouillonnement
});
5.5 Délégation d’Événements
La délégation d’événements est une technique puissante qui consiste à attacher un seul écouteur à un
élément parent :
<ul id="liste‐taches">
<li data‐id="1">Tâche 1 <button class="supprimer">×</button></li>
<li data‐id="2">Tâche 2 <button class="supprimer">×</button></li>
<li data‐id="3">Tâche 3 <button class="supprimer">×</button></li>
</ul>
const listeTaches = [Link]("liste‐taches");
// UN seul écouteur pour tous les boutons (présents et futurs)
[Link]("click", function(event) {
if ([Link]("supprimer")) {
const li = [Link]("li");
const id = [Link];
6
[Link](`Suppression de la tâche ${id}`);
[Link]();
}
});
// Fonctionne même pour les éléments ajoutés dynamiquement
function ajouterTache(texte) {
const li = [Link]("li");
[Link] = [Link]();
[Link] = `${texte} <button class="supprimer">×</button>`;
[Link](li);
}
Avantages de la délégation : ‐ Moins d’écouteurs d’événements = meilleures performances ‐ Fonc‐
tionne automatiquement avec les éléments ajoutés dynamiquement ‐ Code plus maintenable
5.6 Événements Tactiles pour Mobile
Pour les applications mobiles, vous devez gérer les événements tactiles :
const element = [Link]("#zone‐tactile");
// Événements tactiles de base
[Link]("touchstart", function(event) {
const touch = [Link][0];
[Link](`Début du toucher à (${[Link]}, ${[Link]})`);
});
[Link]("touchmove", function(event) {
[Link](); // Empêche le défilement
const touch = [Link][0];
[Link](`Mouvement à (${[Link]}, ${[Link]})`);
});
[Link]("touchend", function(event) {
[Link]("Fin du toucher");
});
// Détection du swipe (balayage)
let touchStartX = 0;
let touchStartY = 0;
[Link]("touchstart", (e) => {
touchStartX = [Link][0].clientX;
touchStartY = [Link][0].clientY;
});
[Link]("touchend", (e) => {
const touchEndX = [Link][0].clientX;
const touchEndY = [Link][0].clientY;
const diffX = touchEndX ‐ touchStartX;
const diffY = touchEndY ‐ touchStartY;
if ([Link](diffX) > [Link](diffY)) {
if (diffX > 50) {
[Link]("Swipe vers la droite");
} else if (diffX < ‐50) {
7
[Link]("Swipe vers la gauche");
}
} else {
if (diffY > 50) {
[Link]("Swipe vers le bas");
} else if (diffY < ‐50) {
[Link]("Swipe vers le haut");
}
}
});
5.7 Événements Personnalisés
Vous pouvez créer vos propres événements :
// Création d'un événement personnalisé
const evenementPersonnalise = new CustomEvent("tacheAjoutee", {
detail: {
id: 123,
titre: "Nouvelle tâche",
date: new Date()
},
bubbles: true,
cancelable: true
});
// Écouter l'événement personnalisé
[Link]("tacheAjoutee", function(event) {
[Link]("Tâche ajoutée:", [Link]);
});
// Déclencher l'événement
const listeTaches = [Link]("liste‐taches");
[Link](evenementPersonnalise);
5.8 Gestion des Formulaires
const formulaire = [Link]("#mon‐formulaire");
[Link]("submit", function(event) {
[Link](); // Empêche l'envoi du formulaire
// Récupérer les données du formulaire
const formData = new FormData(formulaire);
// Accéder aux valeurs
const nom = [Link]("nom");
const email = [Link]("email");
// Validation
if (!nom || [Link] < 2) {
afficherErreur("Le nom doit contenir au moins 2 caractères");
return;
}
if (!email || ![Link]("@")) {
afficherErreur("Veuillez entrer un email valide");
8
return;
}
// Envoyer les données
envoyerFormulaire(formData);
});
// Validation en temps réel
const champEmail = [Link]("#email");
[Link]("input", function(event) {
const valeur = [Link];
if (valeur && ![Link]("@")) {
[Link]("invalide");
} else {
[Link]("invalide");
}
});
