Manipuler le DOM

Section 1 : Accès aux Éléments du DOM

Objectifs de la Section

• Identifier et sélectionner des éléments dans le document HTML.
• Utiliser différentes méthodes JavaScript pour sélectionner des éléments du DOM.

Contenu

1. Introduction aux Méthodes de Sélection du DOM

   • getElementById: Sélectionner un élément par son ID.
   • getElementsByClassName: Sélectionner des éléments par leur classe.
   • getElementsByTagName: Sélectionner des éléments par leur nom de balise.
   • querySelector: Sélectionner le premier élément qui correspond à un sélecteur CSS spécifié.
   • querySelectorAll: Sélectionner tous les éléments qui correspondent à un sélecteur CSS spécifié.

La sélection d'éléments dans le DOM est une compétence de base en JavaScript qui permet aux développeurs de cibler et de manipuler des éléments HTML spécifiques. Chaque méthode de sélection a ses particularités et cas d'utilisation idéaux. Voici un aperçu détaillé de ces méthodes avec des exemples pratiques pour illustrer leur utilisation.

1. getElementById

Usage :
Cette méthode est utilisée pour sélectionner un élément unique dans le document par son attribut id. Elle est très rapide et idéale pour accéder à des éléments spécifiques quand leur id est connu.

Exemple :

<div id="mainContent">Contenu principal ici</div>

let mainContent = document.getElementById("mainContent");
console.log(mainContent.textContent); // Affiche "Contenu principal ici"

2. getElementsByClassName

Usage :
Permet de récupérer une liste d'éléments qui partagent la même classe CSS. La méthode renvoie une collection HTML en direct, ce qui signifie que si le DOM est mis à jour, la collection l'est également.

Exemple :

<div class="highlight">Texte important</div>
<div class="highlight">Un autre texte important</div>

let highlights = document.getElementsByClassName("highlight");
console.log(highlights.length); // Affiche "2"
Array.from(highlights).forEach(el => console.log(el.textContent));

3. getElementsByTagName

Usage :
Cette méthode sélectionne tous les éléments qui ont le nom de balise spécifié, fournissant une collection HTML vivante des éléments correspondants.

Exemple :

<p>Paragraphe 1</p>
<p>Paragraphe 2</p>

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Affiche "2"
Array.from(paragraphs).forEach(p => console.log(p.textContent));

4. querySelector

Usage :
querySelector permet de sélectionner le premier élément qui correspond au sélecteur CSS spécifié. C'est une méthode très puissante et flexible pour cibler des éléments dans le DOM.

Exemple :

<div class="container">
  <span>Texte non ciblé</span>
  <p class="target">Texte ciblé</p>
</div>

let firstTarget = document.querySelector(".container .target");
console.log(firstTarget.textContent); // Affiche "Texte ciblé"

5. querySelectorAll

Usage :
Cette méthode renvoie une NodeList statique de tous les éléments du document qui correspondent au sélecteur CSS spécifié. Contrairement à getElementsByClassName et getElementsByTagName, la liste renvoyée par querySelectorAll ne reflète pas les changements dans le DOM.

Exemple :

<ul class="items">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

let items = document.querySelectorAll(".items .item");
console.log(items.length); // Affiche "3"
items.forEach(item => console.log(item.textContent));

Conclusion

Chacune de ces méthodes de sélection du DOM a des cas d'utilisation spécifiques où elle est plus adaptée, en fonction de la structure de la page et des besoins en performance. La compréhension de ces différences permet aux développeurs de choisir la méthode la plus appropriée pour une tâche donnée, optimisant ainsi les interactions et les manipulations du contenu de la page.

1. Exemples Pratiques

   • Utilisation de getElementById pour modifier un champ de formulaire.
   • Utilisation de querySelector pour sélectionner et styliser un paragraphe.

1. Utilisation de getElementById pour modifier un champ de formulaire

Scénario :
Supposons que nous avons un formulaire avec un champ de texte pour l'email. Nous voulons pré-remplir ce champ avec l'adresse email de l'utilisateur lors du chargement de la page.

Code HTML :

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>

Code JavaScript :

// Attend que le contenu du DOM soit chargé avant d'exécuter le script
document.addEventListener('DOMContentLoaded', function() {
    // Sélectionne l'élément input par son ID
    let emailInput = document.getElementById("email");
    
    // Définit la valeur de l'élément input
    emailInput.value = "exemple@domaine.com";
    
    // Affiche dans la console pour confirmer la modification
    console.log("Champ email mis à jour avec : " + emailInput.value);
});

Explication :
Dans cet exemple, getElementById est utilisé pour accéder à un champ de formulaire spécifique par son ID, "email". Une fois l'élément sélectionné, sa propriété value est modifiée pour inclure une adresse email par défaut. Cela est particulièrement utile pour améliorer l'expérience utilisateur, par exemple, en pré-remplissant des formulaires avec des données précédemment enregistrées.

2. Utilisation de querySelector pour sélectionner et styliser un paragraphe

Scénario :
Nous avons un document avec plusieurs paragraphes, mais nous voulons cibler le premier paragraphe dans un élément div spécifique pour le mettre en évidence.

Code HTML :

<div class="content">
    <p>Paragraphe non ciblé</p>
    <div class="highlight">
        <p>Paragraphe à mettre en évidence</p>
    </div>
</div>

Code JavaScript :

// Attend que le contenu du DOM soit chargé avant d'exécuter le script
document.addEventListener('DOMContentLoaded', function() {
    // Sélectionne le premier paragraphe dans l'élément 'div' avec la classe 'highlight'
    let highlightedParagraph = document.querySelector(".highlight > p");
    
    // Modifie le style du paragraphe sélectionné
    highlightedParagraph.style.backgroundColor = "yellow";
    highlightedParagraph.style.fontWeight = "bold";
    highlightedParagraph.style.padding = "10px";
    
    // Affiche dans la console pour confirmer la stylisation
    console.log("Paragraphe stylisé : " + highlightedParagraph.textContent);
});

Explication :
Cet exemple montre comment querySelector peut être utilisé pour sélectionner spécifiquement le premier paragraphe à l'intérieur d'un conteneur avec la classe highlight. Une fois le paragraphe ciblé, plusieurs propriétés de style sont modifiées pour le mettre visuellement en évidence. Cette méthode est très utile pour appliquer des styles dynamiquement à des éléments spécifiques sans affecter d'autres éléments similaires dans le DOM.

Ces exemples illustrent la puissance et la flexibilité de JavaScript pour accéder et manipuler le DOM, permettant aux développeurs de créer des interactions dynamiques et des effets visuels personnalisés sur leurs pages web.

Section 2 : Modification des Éléments du DOM

Objectifs de la Section

• Apprendre à modifier le style, les attributs et le contenu textuel des éléments DOM.
• Comprendre l'impact de ces modifications sur l'expérience utilisateur.

Contenu

1. Modification des Styles

   • Utilisation de la propriété style pour changer les styles CSS d'un élément.
   • Exemple : Changer la couleur de fond et la taille de la police d'un élément.

La manipulation des styles d'un élément via JavaScript permet de modifier dynamiquement l'apparence d'une page web sans toucher à la feuille de style CSS. Cette technique est particulièrement utile pour les interactions utilisateur qui requièrent un feedback visuel immédiat.

Utilisation de la propriété style

Exemple : Changer la couleur de fond et la taille de la police d'un élément.

Code HTML :

<div id="exampleDiv">Texte exemple</div>

Code JavaScript :

// Sélectionne l'élément par son ID
let div = document.getElementById("exampleDiv");

// Modifie la couleur de fond et la taille de la police de l'élément
div.style.backgroundColor = "lightblue";
div.style.fontSize = "20px";

// Affiche un message dans la console pour confirmer les modifications
console.log("Modifications de style appliquées à l'élément :", div.style.backgroundColor, div.style.fontSize);

Explication : Dans cet exemple, nous sélectionnons un div et modifions son style directement en JavaScript. La couleur de fond est changée en "lightblue" et la taille de la police en "20px", montrant comment des propriétés CSS peuvent être ajustées dynamiquement.

1. Modification des Attributs

   • Utilisation de setAttribute pour changer ou ajouter des attributs à un élément.
   • Exemple : Ajouter un attribut alt à une image ou modifier l'attribut href d'un lien.

Modification des Attributs

Les attributs d'un élément HTML peuvent être modifiés ou ajoutés via JavaScript, ce qui permet de changer la fonctionnalité ou l'information d'un élément en réponse à des événements utilisateur ou des changements d'état dans l'application.

Utilisation de setAttribute

Exemple : Ajouter un attribut alt à une image et modifier l'attribut href d'un lien.

Code HTML :

<img id="exampleImg" src="image.jpg">
<a id="exampleLink" href="https://example.com">Visitez notre site</a>

Code JavaScript :

// Ajoute un attribut 'alt' à l'image
let img = document.getElementById("exampleImg");
img.setAttribute("alt", "Description de l'image");

// Modifie l'attribut 'href' d'un lien
let link = document.getElementById("exampleLink");
link.setAttribute("href", "https://changedexample.com");

// Affiche les modifications dans la console
console.log("Attribut alt ajouté à l'image :", img.alt);
console.log("Attribut href modifié pour le lien :", link.href);

Explication : L'attribut alt est ajouté à une image, ce qui est important pour l'accessibilité et le SEO. Pour le lien, l'attribut href est modifié, démontrant comment les attributs des éléments peuvent être ajustés pour refléter les changements de l'application ou des préférences de l'utilisateur.

1. Modification du Contenu Textuel

   • Utilisation de textContent et innerHTML pour modifier le contenu d'un élément.
   • Exemple : Mettre à jour le texte d'un paragraphe ou insérer du HTML dans une division.

Modifier le contenu textuel d'un élément permet de répondre aux interactions des utilisateurs ou de mettre à jour des informations sans nécessiter de chargement de page.

Utilisation de textContent et innerHTML

Exemple : Mettre à jour le texte d'un paragraphe et insérer du HTML dans une division.

Code HTML :

<p id="exampleP">Texte original du paragraphe</p>
<div id="exampleDiv2">Contenu original</div>

Code JavaScript :

// Met à jour le texte d'un paragraphe
let paragraph = document.getElementById("exampleP");
paragraph.textContent = "Texte mis à jour du paragraphe";

// Insère du HTML dans une division
let div2 = document.getElementById("exampleDiv2");
div2.innerHTML = "<strong>Contenu mis à jour avec du HTML</strong>";

// Confirme les changements dans la console
console.log("Texte du paragraphe mis à jour :", paragraph.textContent);
console.log("HTML ajouté dans la division :", div2.innerHTML);

Section 3 : Projets Pratiques et Évaluation

Objectifs de la Section

• Appliquer les connaissances acquises dans des projets pratiques.
• Évaluer la compréhension et la capacité à manipuler le DOM de manière efficace.

Contenu

1. Mini-Projet : Création d'une To-do List Dynamique

   • Utilisation de toutes les techniques apprises pour créer une application de liste de tâches où les utilisateurs peuvent ajouter, supprimer, et modifier des tâches.

Ce projet implique la création d'une application de liste de tâches (to-do list) où les utilisateurs peuvent ajouter, supprimer, et modifier des tâches en utilisant JavaScript pour manipuler le DOM. Ce type d'application aide à consolider les compétences en manipulation d'éléments, gestion d'événements, et dynamique de contenu.

Structure HTML

Voici le code HTML de base pour notre application de to-do list. Cette structure comprend un formulaire pour ajouter de nouvelles tâches, une liste pour afficher les tâches, et un espace pour des boutons qui permettront de modifier et de supprimer des tâches.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>To-Do List Dynamique</title>
</head>
<body>
    <h1>Ma To-Do List</h1>
    <form id="taskForm">
        <input type="text" id="taskInput" placeholder="Ajouter une nouvelle tâche">
        <button type="submit">Ajouter Tâche</button>
    </form>
    <ul id="taskList"></ul>
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('taskForm');
    const taskList = document.getElementById('taskList');
    const taskInput = document.getElementById('taskInput');

    // Ajouter une tâche
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // Empêche le formulaire de soumettre de manière traditionnelle
        if (taskInput.value === '') {
            alert('Veuillez entrer une tâche!');
            return;
        }

        // Créer un nouvel élément li et ajouter le texte de l'input
        const newTask = document.createElement('li');
        newTask.textContent = taskInput.value;
        
        // Ajouter un bouton de suppression à la tâche
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Supprimer';
        deleteBtn.onclick = function() {
            taskList.removeChild(newTask);
        };

        // Ajouter un bouton de modification à la tâche
        const editBtn = document.createElement('button');
        editBtn.textContent = 'Modifier';
        editBtn.onclick = function() {
            const newText = prompt('Modifier la tâche:', newTask.textContent);
            if (newText) {
                newTask.textContent = newText;
                newTask.appendChild(deleteBtn);
                newTask.appendChild(editBtn);
            }
        };

        // Assembler la tâche avec ses boutons
        newTask.appendChild(deleteBtn);
        newTask.appendChild(editBtn);

        // Ajouter la nouvelle tâche à la liste
        taskList.appendChild(newTask);

        // Réinitialiser l'input
        taskInput.value = '';
    });
});

Le JavaScript suivant ajoute la fonctionnalité pour insérer, supprimer et modifier les tâches. Les commentaires dans le code expliquent chaque étape.

1. Initialisation : Lorsque le contenu du DOM est chargé, le script initialise les références aux éléments du formulaire, de la liste des tâches et de l'input.
2. Gestion de l'ajout de tâches : Un gestionnaire d'événements est attaché à l'événement submit du formulaire. Il crée un élément <li> pour chaque tâche, prévient la soumission normale du formulaire et vérifie que le champ de texte n'est pas vide.
3. Boutons de gestion des tâches : Chaque tâche ajoutée reçoit deux boutons, un pour supprimer la tâche de la liste et l'autre pour modifier le texte de la tâche.
   • Supprimer : Le bouton 'Supprimer' supprime l'élément <li> de la liste lorsque cliqué.
   • Modifier : Le bouton 'Modifier' permet à l'utilisateur de changer le texte de la tâche via une boîte de dialogue.
4. Assemblage et ajout à la liste : La tâche et ses boutons sont ajoutés à la liste des tâches.
5. Réinitialisation : Après l'ajout d'une tâche, le champ de texte est réinitialisé pour permettre la saisie de la prochaine tâche.

Ce projet illustre l'application pratique des techniques de manipulation du DOM, incluant la création dynamique d'éléments, la gestion.

Conclusion

Ce cours fournira aux participants les compétences nécessaires pour manipuler efficacement le DOM, leur permettant de créer des interfaces web dynamiques et interactives. Les compétences acquises seront applicables à une variété de projets web, allant des simples modifications de contenu à des applications web complexes.