// --- Selection d'elements ---
const parId = document.getElementById("mon-id");
const parSelecteur = document.querySelector(".ma-classe");         // premier match
const tousLesMatch = document.querySelectorAll("ul.liste li");      // NodeList (tous les matchs)
const parClasse = document.getElementsByClassName("item");            // HTMLCollection LIVE
const parTag = document.getElementsByTagName("li");

// NodeList vs HTMLCollection : NodeList est "statique" (querySelectorAll), HTMLCollection est LIVE
// (elle se met a jour automatiquement si le DOM change)
tousLesMatch.forEach((el) => console.log(el.textContent));    // NodeList supporte forEach
// parClasse.forEach(...)   // ERREUR : HTMLCollection n'a pas forEach nativement

// --- Creation et insertion d'elements ---
const nouvelElement = document.createElement("div");
nouvelElement.textContent = "Contenu genere";
nouvelElement.classList.add("carte", "carte--active");
nouvelElement.setAttribute("data-id", "123");
nouvelElement.dataset.role = "widget";           // acces aux data-* via .dataset

const conteneur = document.querySelector("#conteneur");
conteneur.appendChild(nouvelElement);
conteneur.append(nouvelElement, "texte brut");     // append accepte plusieurs args et du texte
conteneur.prepend(nouvelElement);                    // insere en premier
conteneur.insertBefore(nouvelElement, conteneur.firstChild);

// insertAdjacentHTML : insertion performante sans parser/re-render tout le sous-arbre
conteneur.insertAdjacentHTML("beforeend", "<p>Ajoute directement</p>");

// --- Modification du contenu ---
const element = document.querySelector("#titre");
element.textContent = "Nouveau texte";      // echappe le HTML : SAFE contre le XSS
element.innerHTML = "<strong>Gras</strong>"; // interprete le HTML : DANGEREUX avec du contenu non fiable

// --- Classes et styles ---
element.classList.add("actif");
element.classList.remove("inactif");
element.classList.toggle("visible");           // bascule
element.classList.contains("actif");             // teste la presence
element.style.color = "red";                        // style inline
element.style.setProperty("--couleur-theme", "blue"); // variable CSS custom

// --- Attributs ---
element.getAttribute("href");
element.setAttribute("aria-label", "Fermer");
element.removeAttribute("disabled");
element.hasAttribute("required");

// --- Navigation dans le DOM ---
console.log(element.parentElement);
console.log(element.children);              // enfants elements (pas les text nodes)
console.log(element.childNodes);              // TOUS les noeuds (incluant texte/commentaires)
console.log(element.nextElementSibling);
console.log(element.closest(".carte"));          // remonte jusqu'au premier ancetre matchant

// --- Suppression ---
element.remove();                            // API moderne, directe
// element.parentNode.removeChild(element);  // API historique, plus verbeuse

// --- DocumentFragment : batching des insertions pour la performance ---
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement("li");
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);          // aucun reflow tant qu'on reste dans le fragment
}
document.querySelector("#liste").appendChild(fragment);   // UN SEUL reflow a la fin

// --- Mauvaise pratique vs bonne pratique pour des insertions en boucle ---
// MAUVAIS : provoque un reflow/repaint a CHAQUE iteration
// for (let i = 0; i < 1000; i++) {
//     document.querySelector("#liste").innerHTML += `<li>${i}</li>`;
// }

// BON : construire une chaine puis une seule affectation, ou utiliser un DocumentFragment
const html = Array.from({ length: 1000 }, (_, i) => `<li>${i}</li>`).join("");
document.querySelector("#liste").innerHTML = html;   // un seul reflow