Manipulation du DOM en JavaScript 🏠

Le DOM (Document Object Model) est l'interface entre JavaScript et la page HTML. Il represente la page comme un arbre d'objets que JavaScript peut modifier.

---

1. Qu'est-ce que le DOM ? 🌳

💡 Le DOM n'est PAS le HTML. C'est une representation en memoire que JavaScript manipule.

---

2. Selectionner des elements 🔍

// querySelector — le plus polyvalent
const titre = document.querySelector("h1");           // Premier <h1>
const premier = document.querySelector(".card");      // Premier element avec classe "card"
const special = document.querySelector("#mon-id");    // Element avec id "mon-id"
const boutonDansDiv = document.querySelector("div button"); // Bouton dans un div

// querySelectorAll — TOUS les elements qui correspondent
const tousLesParagraphes = document.querySelectorAll("p");
console.log(tousLesParagraphes.length); // Nombre de paragraphes

// Boucler sur les resultats
tousLesParagraphes.forEach(p => {
    p.style.color = "blue";
});

// Methodes classiques (plus specifiques)
const parId = document.getElementById("mon-id");
const parClasse = document.getElementsByClassName("ma-classe");
const parTag = document.getElementsByTagName("div");

💡 Preferer toujours querySelector et querySelectorAll : ils acceptent les selecteurs CSS et sont plus flexibles.

---

3. Modifier le contenu de texte ✏️

const element = document.querySelector("h1");

// textContent — le plus sur
element.textContent = "Nouveau titre";
console.log(element.textContent); // "Nouveau titre"

// innerText — tient compte du style (non visible = non retourne)
element.innerText = "Nouveau titre visible";

// innerHTML — parsing du HTML (dangereux !)
element.innerHTML = "<em>Titre en italique</em>";

⚠️ Ne jamais utiliser innerHTML avec des donnees utilisateur — risque d'injection XSS. Utilisez textContent pour du texte brut.

// ❌ Dangereux
element.innerHTML = userInput; // L'utilisateur peut injecter du <script>

// ✅ Sur
element.textContent = userInput; // Traite comme du texte brut

---

4. Modifier les styles 🎨

Style inline

const element = document.querySelector("h1");

// Modifier un style
element.style.color = "red";
element.style.fontSize = "24px";
element.style.backgroundColor = "#f0f0f0";
element.style.padding = "10px";

// Lire un style
console.log(element.style.color); // "red"

// Style calcule (la valeur reelle)
console.log(getComputedStyle(element).fontSize); // "24px"

💡 En JavaScript, les noms de proprietes CSS avec des tirets deviennent du camelCase : background-color → backgroundColor.

Classes CSS (preferable)

const element = document.querySelector("h1");

// Ajouter une classe
element.classList.add("active");

// Supprimer une classe
element.classList.remove("active");

// Toggle (ajouter si absent, supprimer si present)
element.classList.toggle("active");

// Verifier
if (element.classList.contains("active")) {
    console.log("L'element est actif");
}

// Remplacer
element.classList.replace("ancienne-classe", "nouvelle-classe");

---

5. Creer et supprimer des elements 🏗️

// Creer un element
const nouveauDiv = document.createElement("div");
nouveauDiv.textContent = "Je suis nouveau !";
nouveauDiv.classList.add("card");
nouveauDiv.setAttribute("id", "ma-card");

// Ajouter au DOM
const container = document.querySelector("#app");
container.appendChild(nouveauDiv);  // Ajouter a la fin

// Inserer avant un element existant
const reference = document.querySelector(".existing");
container.insertBefore(nouveauDiv, reference);

// insertAdjacentHTML — injecter du HTML
container.insertAdjacentHTML("beforeend", `
    <div class="card">
        <h3>Titre</h3>
        <p>Contenu</p>
    </div>
`);

// Supprimer un element
nouveauDiv.remove();
// Ou ancienne methode
container.removeChild(nouveauDiv);

---

6. Parcourir l'arbre du DOM 🌿

const element = document.querySelector("div");

// Parent
console.log(element.parentElement);     // Element parent
console.log(element.closest(".card"));   // Plus proche ancetre avec classe "card"

// Enfants
console.log(element.children);          // HTMLCollection (elements uniquement)
console.log(element.childNodes);        // NodeList (y compris text nodes)
console.log(element.firstElementChild); // Premier enfant element
console.log(element.lastElementChild);  // Dernier enfant element

// Freres
console.log(element.nextElementSibling);    // Element suivant
console.log(element.previousElementSibling); // Element precedent

---

7. Attributs et proprietes 🏷️

const img = document.querySelector("img");

// Lire un attribut
console.log(img.getAttribute("src"));
console.log(img.getAttribute("alt"));

// Definir un attribut
img.setAttribute("src", "nouvelle-image.jpg");
img.setAttribute("alt", "Description de l'image");

// Supprimer un attribut
img.removeAttribute("title");

// Verifier
console.log(img.hasAttribute("src")); // true

// Dataset (attributs data-*)
// HTML: <div data-user-id="42" data-role="admin">
const div = document.querySelector("[data-user-id]");
console.log(div.dataset.userId);    // "42"
console.log(div.dataset.role);      // "admin"
div.dataset.color = "blue";        // Ajoute data-color="blue"

---

8. Exemple complet : liste interactive ✅

<div id="app">
    <input type="text" id="input" placeholder="Ajouter un element">
    <button id="btn-ajouter">Ajouter</button>
    <ul id="liste"></ul>
</div>

<script>
    const input = document.getElementById("input");
    const btnAjouter = document.getElementById("btn-ajouter");
    const liste = document.getElementById("liste");

    function ajouterElement() {
        const texte = input.value.trim();
        if (!texte) return;

        const li = document.createElement("li");
        li.textContent = texte;

        const btnSupprimer = document.createElement("button");
        btnSupprimer.textContent = " ✕";
        btnSupprimer.classList.add("supprimer");
        li.appendChild(btnSupprimer);

        btnSupprimer.addEventListener("click", () => {
            li.remove();
        });

        liste.appendChild(li);
        input.value = "";
        input.focus();
    }

    btnAjouter.addEventListener("click", ajouterElement);
    input.addEventListener("keypress", (e) => {
        if (e.key === "Enter") ajouterElement();
    });
</script>

---

9. Performance et bonnes pratiques 🚀

// DocumentFragment pour ajouter plusieurs elements
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Element ${i}`;
    fragment.appendChild(li);
}
document.querySelector("ul").appendChild(fragment); // Un seul reflow

---

10. Exercices pour toi 🎯

Exercice 1 : Theme switcher Cree un bouton qui change le theme de la page (clair/sombre) en ajoutant/supprimant une classe sur <body>.

Exercice 2 : Compteur de caracteres Un champ de texte et un compteur qui affiche le nombre de caracteres en temps reel.

Exercice 3 : Todo list Cree une liste de taches complete avec ajout, suppression et marquer comme fait (barrer le texte).