Module 3Manipuler les éléments d'une page avec le DOM
Chapitre 10 sur 15
Manipuler les éléments HTML
Créer, ajouter, modifier et supprimer des éléments, leurs styles, leurs classes et leurs attributs.
- ≈ 145 min
- 5 leçons
- 4 vidéos
- 4 exercices
Module 3Manipuler les éléments d'une page avec le DOM
Chapitre 10 sur 15
Créer, ajouter, modifier et supprimer des éléments, leurs styles, leurs classes et leurs attributs.
Objectifs
Avec ce chapitre, tu sauras…
createElement() et l'ajouter à la page (append, appendChild, prepend, before, after) ;remove, removeChild, replaceChild, replaceWith) ;textContent, innerHTML) ;style, className, classList) ;getAttribute, setAttribute, removeAttribute) ;Leçon 1
Créer un élément
const element1 = document.createElement("p");
console.log(element1); // <p></p>
const element2 = document.createElement("DIV");
console.log(element2); // <div></div> : le nom est mis en minusculesAjouter un élément à la page
const parent = document.getElementById("parent"); // 1. sélectionner le parent
const enfant = document.createElement("p"); // 2. créer l'enfant
enfant.textContent = "C'est un nouvel élément"; // 3. lui donner un contenu
parent.append(enfant); // 4. l'attacher (dernier enfant)| Méthode | Place le nouvel élément… |
|---|---|
parent.append(el) | à la fin du parent (dernier enfant) ; accepte aussi du texte et plusieurs éléments |
parent.appendChild(el) | à la fin du parent (ancienne méthode, un seul nœud) |
parent.prepend(el) | au début du parent (premier enfant) |
ref.before(el) | juste avant l'élément ref (comme frère) |
ref.after(el) | juste après l'élément ref (comme frère) |
parent.insertBefore(el, ref) | avant l'enfant ref du parent (ancienne méthode) |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Vidéo · À regarder
ENJavaScript DOM Manipulation – Full Course for Beginners
freeCodeCamp.org · YouTube
Leçon 2
| Propriété | Lit / écrit | À utiliser pour… |
|---|---|---|
textContent | le texte brut (les balises sont affichées telles quelles) | tout texte, en particulier ce que l'utilisateur a saisi |
innerHTML | le HTML (les balises sont interprétées) | insérer un morceau de HTML que tu as écrit toi-même |
value | la valeur d'un champ de formulaire | input, select, textarea |
Leçon 3
| Écriture | Effet |
|---|---|
el.className = "erreur" | remplace toutes les classes par erreur |
el.classList.add("erreur") | ajoute une classe |
el.classList.remove("erreur") | retire une classe |
el.classList.toggle("cache") |
Leçon 4
| Méthode | Rôle |
|---|---|
el.getAttribute("href") | lit la valeur d'un attribut |
el.setAttribute("href", "https://www.ofppt.ma") | ajoute l'attribut, ou modifie sa valeur s'il existe |
el.removeAttribute("href") | supprime l'attribut |
el.hasAttribute("disabled") | true si l'attribut existe |
Leçon 5
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
1Après createElement("p"), le paragraphe…
2Pour ajouter un élément comme premier enfant :
3Pour afficher une saisie de l'utilisateur en toute sécurité :
4background-color s'écrit en JavaScript…
5classList.toggle("cache")…
6Pour supprimer l'attribut disabled :
L'essentiel du chapitre
document.createElement("p") crée en mémoire ; on l'attache avec append, prepend, before, after (ou appendChild).el.remove() ou parent.removeChild(el) ; remplacer : ancien.replaceWith(nouveau) ou parent.replaceChild(nouveau, ancien).textContent (texte, sûr), innerHTML (HTML, jamais avec une saisie), value (champs).el.style.backgroundColor (camelCase) ; mieux : classList.add / remove / toggle / contains.getAttribute, setAttribute, removeAttribute, hasAttribute ; données : dataset.<menu> / <menuitem> sont obsolètes : un menu se construit avec ul, li et a.Ne mets jamais une saisie de l'utilisateur dans innerHTML
el.classList.contains("actif") | true si l'élément a la classe |
el.classList.replace("a", "b") | remplace une classe par une autre |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Supprimer et remplacer
const parent = document.getElementById("parent");
const aSupprimer = document.getElementById("eltSupp");
parent.removeChild(aSupprimer); // méthode du résumé : depuis le parent
// ou, plus simple : aSupprimer.remove();
const ancien = document.getElementById("id1");
const nouveau = document.createElement("h2");
nouveau.textContent = "C'est le nouvel élément.";
parent.replaceChild(nouveau, ancien); // nouveau prend la place d'ancien
// ou : ancien.replaceWith(nouveau);Ajouter et modifier du HTML : createElement, append, remove (en anglais).
Créer, ajouter, modifier et supprimer des éléments (en anglais).
const zone = document.querySelector("#zone");
zone.textContent = "<strong>Bonjour</strong>"; // affiche les balises comme du texte
zone.innerHTML = "<strong>Bonjour</strong>"; // affiche Bonjour en gras
zone.innerHTML += "<p>Un autre paragraphe</p>"; // ajoute à la finLa propriété style
element.style.propriete modifie un style en ligne (comme l'attribut style=""). Les propriétés CSS avec un tiret s'écrivent en camelCase : background-color devient backgroundColor.
const champ = document.getElementById("b1");
champ.style.borderColor = "red"; // border-color
champ.style.backgroundColor = "#fff0f0"; // background-color
champ.style.fontSize = "18px"; // font-size : n'oublie pas l'unité
champ.style.display = "none"; // cacher
champ.style.display = ""; // revenir au style de la feuille CSSLe résumé écrit document.getElementsByClassName("style1").style.borderColor = "red". Cela provoque une TypeError : getElementsByClassName renvoie une collection. Il faut sélectionner un élément : document.getElementsByClassName("style1")[0].style.borderColor = "red", ou mieux document.querySelector(".style1").style.borderColor = "red". La même erreur se trouve dans l'exemple de className.
Les classes : className et classList
La bonne pratique est de définir les styles dans le CSS, puis d'ajouter ou retirer des classes en JavaScript.
.erreur { border: 2px solid #c0392b; background: #fdecea; }
.cache { display: none; }
.actif { color: #b8860b; font-weight: bold; }<button type="button" id="btn">Cliquer</button>
<a href="#" id="lien">OFPPT</a>
<script>
const btn = document.getElementById("btn");
btn.setAttribute("class", "style1"); // ajoute class="style1"
btn.setAttribute("disabled", ""); // désactive le bouton
const lien = document.getElementById("lien");
lien.setAttribute("href", "https://www.ofppt.ma"); // modifie href
console.log(lien.getAttribute("href")); // https://www.ofppt.ma
lien.removeAttribute("href"); // le lien n'est plus cliquable
</script>Le résumé présente l'objet DOMMenu, qui correspond à l'élément HTML <menu> avec des <menuitem>.
Comme le résumé le signale lui-même, <menu type="context"> et <menuitem> ne sont plus supportés par les navigateurs : <menuitem> a été retiré de la norme HTML. Aujourd'hui, <menu> est simplement un équivalent de <ul>. Pour construire un menu, on crée des listes et des liens avec createElement, comme ci-dessous.
const pages = [
{ titre: "Accueil", url: "index.html" },
{ titre: "Formations", url: "formations.html" },
{ titre: "Contact", url: "contact.html" },
];
const nav = document.createElement("nav");
const ul = document.createElement("ul");
pages.forEach(page => {
const li = document.createElement("li");
const a = document.createElement("a");
a.textContent = page.titre;
a.setAttribute("href", page.url);
if (location.pathname.endsWith(page.url)) {
a.classList.add("actif"); // la page courante est mise en valeur
}
li.append(a);
ul.append(li);
});
nav.append(ul);
document.body.prepend(nav); // le menu en haut de la page<nav><ul style="list-style:none;display:flex;gap:18px;padding:0;margin:0"><li><a href="#" style="color:#946800;font-weight:bold">Accueil</a></li><li><a href="#">Formations</a></li><li><a href="#">Contact</a></li></ul></nav>Pour une liste de 1 000 éléments, chaque append dans la page provoque un recalcul de l'affichage. On construit d'abord toute la liste hors de la page (ici dans ul, qui n'est pas encore attaché), puis on l'ajoute en une seule fois. C'est ce que fait l'exemple : nav n'est attaché qu'à la toute fin.
Cacher et afficher des éléments (en anglais).
Une page contient un champ #article, un bouton #ajouter et une liste vide #courses. Au clic sur le bouton, ajoute le texte du champ comme nouvel élément de liste (s'il n'est pas vide), avec un bouton « ✕ » qui supprime l'élément. Vide le champ après chaque ajout et affiche le nombre d'articles dans un <p id="compteur">.
Avec <ul id="liste"><li>A</li><li>B</li></ul>, quelle est la liste affichée après ce code ?
const liste = document.querySelector("#liste");
const c = document.createElement("li");
c.textContent = "C";
liste.append(c);
const z = document.createElement("li");
z.textContent = "Z";
liste.prepend(z);
liste.children[1].remove();
liste.firstElementChild.after(c);À partir de l'objet const profil = { nom: "Sara Benali", filiere: "Développement digital", photo: "sara.jpg", competences: ["HTML", "CSS", "JavaScript"] };, crée entièrement en JavaScript une carte <article class="carte"> contenant une image (avec un attribut alt), un titre <h2>, un paragraphe pour la filière et une liste <ul> des compétences. Ajoute-la dans <main>.
Si un utilisateur saisit <img src=x onerror="alert('piraté')"> et que tu l'insères avec innerHTML, le navigateur exécute son code : c'est une faille de sécurité appelée XSS (cross-site scripting). Pour afficher une donnée saisie, utilise toujours textContent.
const bouton = document.querySelector("#btnDetails");
const details = document.querySelector("#details");
bouton.onclick = () => details.classList.toggle("cache");Avec classList, la présentation reste dans le CSS (un seul endroit à modifier) et le JavaScript ne gère que l'état (« en erreur », « actif », « caché »). className = ... est risqué : il efface les autres classes de l'élément.
classList : add, remove, toggle, contains (en anglais).
Les attributs personnalisés data-* servent à stocker des données dans le HTML : <li data-prix="60">Tajine</li>. On les lit avec li.dataset.prix (une chaîne : "60"). C'est très utile pour relier un élément de la page à une donnée.
Crée un bouton « Mode sombre » qui bascule la classe sombre sur body (définie en CSS : fond #1e1e1e, texte #eeeeee) et qui change son propre texte en « Mode clair » quand le mode sombre est actif, et inversement.