DOM en JavaScript : le modèle objet de document

Le modèle objet de document, ou DOM, est l’arbre dynamique des objets de la page dans le navigateur. JavaScript lit et modifie ces objets pour mettre la page à jour sans la recharger. Le navigateur fournit l’API DOM ; JavaScript est le langage utilisé pour l’appeler.

Commencer par le document

document est le point d’entrée. document.documentElement fait référence à <html>, document.head à <head> et document.body à <body>. L’onglet du navigateur est représenté par window, dont la propriété document fait référence à ce document.

Chaque élément de l’arbre est un nœud. Les éléments représentent des balises ; les nœuds texte contiennent des caractères ; les nœuds commentaires contiennent des commentaires HTML ; le nœud document se trouve au-dessus des éléments de la page. Leurs valeurs nodeType sont respectivement 1, 3, 8 et 9. Tout élément est un nœud, mais les textes et les commentaires ne sont pas des éléments.

Lire les relations familiales

<ul id="menu"><li>Home</li><li>About</li></ul>

La liste est le parent de deux éléments de liste frères. Chacun est son enfant. Le premier possède un nœud texte enfant contenant « Home ». La liste est un ancêtre de ce nœud texte, et le texte est un descendant de la liste. Ces relations décrivent l’imbrication, pas les positions à l’écran.

Les espaces et les sauts de ligne entre les balises deviennent généralement des nœuds texte contenant des caractères d’espacement. Une liste indentée peut donc avoir deux éléments enfants mais plus de deux nœuds enfants. children et firstElementChild ne renvoient que des éléments ; childNodes et firstChild incluent les textes et les commentaires.

Comparer l’arbre au code source

L’analyse syntaxique transforme le balisage en arbre et peut le compléter ou le réparer. Les lignes écrites directement dans un <table> reçoivent un parent <tbody>. Les éléments <html>, <head> ou <body> manquants peuvent aussi être ajoutés. Effectue tes sélections dans l’arbre réel, y compris les éléments ajoutés par l’analyseur.

Les modifications apportées par un script affectent le DOM actuel du navigateur, pas le fichier HTML sur le serveur. « Afficher le code source de la page » montre le HTML d’origine, tandis que le panneau Éléments des outils de développement montre l’arbre actuel. Un rechargement reconstruit le DOM ; une modification seule n’enregistre pas les données correspondantes.

Inspecter un objet

Fais un clic droit sur un élément et choisis « Inspecter ». Saisis $0 dans la console pour faire référence à cet élément sélectionné. console.log($0) le présente sous forme de balisage ; console.dir($0) expose ses propriétés. Déplie une liste indentée pour voir les nœuds contenant des caractères d’espacement à côté de ses éléments de liste.

Les propriétés de l’arbre permettent à un script d’atteindre du contenu voisin à partir d’un élément qu’il possède déjà. Choisis si ce chemin doit inclure les textes et les commentaires ou seulement les éléments.

Choisir les nœuds ou les éléments

Les propriétés pour les nœuds comprennent parentNode, childNodes, firstChild, lastChild, previousSibling et nextSibling. Leurs équivalents pour les éléments sont parentElement, children, firstElementChild, lastElementChild, previousElementSibling et nextElementSibling. children est une HTMLCollection ; childNodes est une NodeList.

<ul id="tasks">
  <li>Buy milk</li>
  <li>Call Sam</li>
</ul>

Ici, tasks.childNodes.length vaut 5 : deux éléments et trois suites de caractères d’espacement. tasks.children.length vaut 2. tasks.firstChild est un nœud texte contenant des caractères d’espacement, tandis que tasks.firstElementChild.textContent vaut « Buy milk ». Les indices commencent à 0 : tasks.children[1] est donc le deuxième élément de liste.

Suivre un chemin court

const tasks = document.querySelector("#tasks");
const first = tasks.firstElementChild;
const second = first.nextElementSibling;
console.log(second.textContent);
console.log(second.parentElement === tasks);

Le résultat est « Call Sam », puis true. tasks.lastElementChild atteint directement le même élément, tout comme tasks.children[tasks.children.length - 1].

Gérer l’absence d’un nœud lié

Le nextElementSibling du dernier élément de liste vaut null. Un élément sans enfant qui soit un élément a firstElementChild === null et une collection children vide. Le parentNode de l’élément HTML racine est le document, mais son parentElement vaut null.

Lire une propriété de null déclenche une TypeError. Vérifie d’abord le résultat ou utilise second.nextElementSibling?.textContent, qui donne undefined lorsqu’il n’existe pas d’élément suivant.

Trouver un élément englobant

closest(selector) vérifie l’élément actuel, puis ses ancêtres, et renvoie l’élément correspondant le plus proche ou null. Un bouton à l’intérieur de <li class="task" data-id="7"> peut utiliser button.closest(".task") ; le dataset.id de l’élément correspondant vaut « 7 ». matches(selector) teste quant à lui uniquement l’élément actuel et renvoie un booléen.

Les longs chemins tels que el.parentElement.parentElement.nextElementSibling dépendent d’une imbrication précise. L’ajout d’un élément conteneur change leur signification. Utilise des sélecteurs pour les zones nommées, une navigation courte pour les relations stables et closest() pour trouver un élément englobant.

Un sélecteur transforme une description d’élément en référence à un objet. Commence par la recherche la plus restreinte qui permet d’identifier l’élément voulu, puis vérifie qu’il a été trouvé avant de le modifier.

Rechercher avec un sélecteur CSS ou un identifiant

document.querySelector(selector) renvoie le premier élément correspondant dans l’ordre du document. Cette méthode accepte les sélecteurs CSS familiers : "h1", ".price", "#cart", "nav a" ou 'input[type="email"]'. Si rien ne correspond, elle renvoie null.

document.getElementById("cart") recherche directement un identifiant. Son argument est l’identifiant seul. getElementById("#cart") recherche un identifiant qui contient réellement le caractère dièse, tandis que querySelector("cart") recherche une balise <cart>. Utilise querySelector("#cart") pour le sélecteur d’identifiant.

Les identifiants doivent être uniques. Si du balisage copié donne le même identifiant à deux éléments, ces recherches renvoient le premier dans l’ordre du document. Corrige le balisage en double au lieu d’attendre d’une recherche par identifiant qu’elle atteigne la seconde copie.

Rechercher dans un conteneur

Supposons que plusieurs cartes possèdent un élément de classe name. Sélectionne d’abord la carte de profil, puis recherche parmi ses descendants :

const card = document.querySelector("#profile");
if (card) {
  const name = card.querySelector(".name");
  if (name) name.textContent = "Maya";
}

La recherche interne se limite à la carte de profil : un élément .name situé plus tôt ailleurs ne perturbe donc pas le résultat. Le conteneur lui-même ne fait pas partie des éléments examinés par sa propre recherche querySelector(). Les éléments ordinaires prennent en charge cette méthode, mais getElementById() appartient à document.

Distinguer une absence de résultat d’un sélecteur invalide

Une recherche valide sans correspondance donne null. Essayer de définir null.textContent déclenche une TypeError : protège donc l’accès au contenu facultatif :

const banner = document.querySelector(".banner");
if (banner) banner.textContent = "Sale ends Friday";

Un sélecteur CSS invalide déclenche une SyntaxError avant qu’un résultat puisse être obtenu. Pour <p id="1st">, querySelector("#1st") est invalide, car le chiffre doit être échappé dans ce sélecteur d’identifiant CSS. getElementById("1st") utilise un identifiant littéral et fonctionne directement.

Exécuter le script après la création du balisage nécessaire

Un script externe classique placé dans <head> s’exécute avant que le navigateur ait analysé le corps de la page. Une recherche portant sur un paragraphe situé plus bas renvoie donc null, même lorsque le HTML le contient. Utilise <script src="app.js" defer></script> pour exécuter le script après l’analyse, utilise un script de module ou place le script juste avant </body>. Les scripts de module sont différés par défaut. L’attribut defer n’a aucun effet sur un script interne classique.

Pour une page HTML commençant par <!DOCTYPE html>, les sélecteurs d’identifiant et de classe sont sensibles à la casse : .Price ne correspond pas à class="price". Les sélecteurs de balises HTML ne sont pas sensibles à la casse : "LI" et "li" correspondent donc tous deux aux éléments de liste. Lorsqu’une recherche échoue, vérifie l’orthographe, la syntaxe du sélecteur, le conteneur de recherche et le moment d’exécution du script.

Utilise querySelectorAll() lorsque la même opération doit s’appliquer à plusieurs éléments. Son résultat est une collection : tu dois donc choisir comment la parcourir et déterminer si tu as besoin d’un instantané ou d’une vue dynamique.

Lire et parcourir une NodeList

document.querySelectorAll(".note") renvoie une NodeList des éléments correspondants dans l’ordre du document. En l’absence de correspondance, la NodeList est vide et sa longueur vaut 0. La collection elle-même reste une valeur vraie : if (notes) ne t’indique pas si elle contient des éléments. Vérifie notes.length.

Une NodeList prend en charge les indices, length, forEach() et for...of, mais ce n’est pas un tableau et elle n’a ni map(), ni filter(), ni reduce(). Convertis-la lorsque tu as besoin de ces méthodes :

const weights = Array.from(document.querySelectorAll(".weight"))
  .map(el => Number(el.textContent));
const total = weights.reduce((sum, weight) => sum + weight, 0);

Pour des éléments contenant « 4.5 », « 12 » et « 3.25 », le tableau est [4.5, 12, 3.25] et le total est de 19,75 kg. La conversion en nombres est importante, car les valeurs textuelles sont des chaînes.

Une collection n’est pas un élément combiné. Définir notes.textContent ne modifie aucune note, et notes.classList.add("saved") déclenche une erreur, car la NodeList n’a pas de classList. Applique la modification à chaque élément :

const notes = document.querySelectorAll(".note");
notes.forEach(note => note.classList.add("saved"));

Comparer les résultats statiques et dynamiques

La NodeList issue de querySelectorAll() est statique : les éléments qu’elle contient sont fixés au moment de la recherche. Les éléments auxquels elle fait référence restent les objets réels ; leur texte ou leurs classes peuvent donc changer.

getElementsByClassName("note") et getElementsByTagName("li") renvoient une HTMLCollection dynamique. children est aussi dynamique. Ces collections mettent à jour les éléments qu’elles contiennent lorsque le DOM change. Elles prennent en charge les indices et for...of, mais pas forEach().

Dans une liste contenant trois éléments .item, enregistre à la fois list.getElementsByClassName("item") et list.querySelectorAll(".item"). Ajoute un quatrième élément correspondant. La longueur de la collection dynamique vaut maintenant 4 ; celle de l’instantané vaut toujours 3.

Éviter le piège d’une collection dynamique qui rétrécit pendant une boucle

Supposons que quatre éléments appartiennent à une collection dynamique nommée live :

for (let i = 0; i < live.length; i++) {
  live[i].classList.remove("item");
}

Retirer la classe du premier élément le retire de la collection. L’élément suivant passe à l’indice 0, mais la boucle avance à l’indice 1 et l’ignore. Seuls deux des quatre éléments perdent la classe. Parcours Array.from(live) ou un instantané obtenu avec querySelectorAll() lorsque tu modifies l’appartenance à la collection.

Vérifier les espaces dans les sélecteurs

.task.done désigne un élément possédant les deux classes. .task .done désigne un descendant .done situé dans un élément .task. Pour <li class="task done">, compte les éléments terminés avec document.querySelectorAll(".task.done").length. Une virgule combine des sélecteurs : "h2, h3" renvoie les éléments correspondants dans l’ordre du document, et non tous les titres d’un type suivis de ceux de l’autre.

Le texte et le HTML sont des entrées différentes. Le texte brut doit apparaître sous forme de caractères ; le HTML décrit des éléments que le navigateur doit construire. Le choix entre les deux a des conséquences sur la structure de la page et sur la possibilité qu’un texte extérieur exécute du code indésirable.

Lire et remplacer du texte

Pour <p id="msg">Total: <strong>3</strong> items</p>, msg.textContent vaut « Total: 3 items ». Cette propriété réunit le texte des descendants de l’élément sans inclure leurs balises, et inclut le texte masqué par CSS.

Définir textContent remplace tous les enfants par un nœud texte. Après msg.textContent = "Cart is empty", l’enfant <strong> n’existe plus dans le paragraphe. Définir msg.textContent = "<b>Hi</b>" affiche les caractères littéraux « Hi » ; cela ne crée aucun élément en gras.

Les valeurs textuelles sont des chaînes. Si un compteur contient « 4 », count.textContent + 1 produit « 41 ». Convertis la valeur avant l’addition :

count.textContent = Number(count.textContent) + 1;

L’addition donne le nombre 5, et l’affectation affiche sa forme textuelle, « 5 ».

Lire le texte qui suit la mise en page

Pour un élément affiché, innerText suit le texte affiché et la mise en page. Cette propriété omet les descendants masqués avec display: none et inclut les sauts de ligne qui suivent la mise en page. Sa lecture peut nécessiter un calcul de mise en page. Utilise textContent pour les opérations courantes sur le texte ; choisis innerText lorsque tu as besoin du texte affiché. Si l’élément lui-même est détaché ou n’est pas affiché, innerText renvoie son contenu textuel.

Analyser volontairement du HTML

innerHTML lit le balisage à l’intérieur d’un élément. Le définir analyse la chaîne et remplace les enfants :

msg.innerHTML = "Total: <strong>5</strong> items";

Cela crée un nouvel élément <strong>. Cette méthode convient au balisage que tu as écrit et que tu contrôles. Pour le texte provenant d’un utilisateur ou de données extérieures, utilise textContent et construis la structure avec createElement().

L’insertion de HTML non fiable peut permettre une injection de script intersite (XSS) : du code contrôlé par un attaquant s’exécute dans le navigateur du visiteur. Une image injectée peut porter un attribut onerror qui exécute du code lorsque le chargement de l’image échoue. Les balises script insérées par innerHTML ne s’exécutent pas, mais cela ne rend pas les autres formes de HTML injecté sûres. Bloquer seulement les balises script laisse cette voie d’attaque ouverte.

Conserver les enfants existants lors de l’ajout de contenu

list.innerHTML += "<li>New</li>" lit le balisage existant, y concatène une chaîne, puis analyse et remplace l’ensemble des enfants. Cette opération ne préserve pas leur identité d’objet. Une variable contenant un ancien enfant conserve cet objet détaché, et les valeurs saisies dans les champs remplacés peuvent être perdues. Utilise append() avec de nouveaux nœuds, ou insertAdjacentHTML("beforeend", markup) pour du balisage fiable, afin d’ajouter du contenu sans recréer les enfants existants.

outerHTML inclut la balise de l’élément lui-même ainsi que son contenu. Le définir remplace l’élément lui-même. Une référence enregistrée pointe toujours vers l’ancien élément détaché après ce remplacement ; elle ne bascule pas automatiquement vers le nouvel élément.

Un attribut est un nom et une valeur dans le HTML. Une propriété appartient à l’objet JavaScript qui représente un élément. De nombreux attributs standard possèdent des propriétés correspondantes, mais ces propriétés peuvent traiter les valeurs ou indiquer un autre type d’état.

Manipuler un attribut par son nom

Pour <img src="logo.png" alt="Company logo">, le navigateur initialise des propriétés telles que img.src et img.alt. Tu peux aussi utiliser des méthodes qui prennent le nom de l’attribut sous forme de chaîne :

• getAttribute(name) renvoie une chaîne, ou null si l’attribut est absent.
• setAttribute(name, value) ajoute ou modifie un attribut et enregistre sa valeur sous forme de texte.
• hasAttribute(name) indique si l’attribut est présent.
• removeAttribute(name) le supprime.

Par exemple, link.setAttribute("href", "https://example.com/help") modifie la cible d’un lien. En l’absence d’attribut target, link.getAttribute("target") renvoie null, et non une chaîne vide.

Lire la valeur dont tu as réellement besoin

Sur une page située à https://example.com/shop/, le lien <a href="/about"> possède un attribut dont la valeur est « /about ». Sa propriété href est l’URL résolue, « https://example.com/about ». Lis l’attribut lorsque tu as besoin de la valeur exactement telle qu’elle est écrite, et la propriété lorsque tu as besoin de l’URL résolue.

Les propriétés peuvent avoir d’autres types que les chaînes. button.disabled est un booléen ; input.maxLength est un nombre. Les méthodes d’attributs renvoient toujours des chaînes ou null. Les noms de propriétés sont aussi des noms JavaScript sensibles à la casse : el.id fonctionne, tandis que el.ID est une propriété différente qui vaut normalement undefined.

La plupart des noms sont familiers, mais il existe des exceptions. L’attribut HTML class est accessible par className et classList. L’attribut for d’un label correspond à sa propriété htmlFor :

label.htmlFor = "email";

Cela associe le label à l’élément dont l’identifiant est « email ».

Traiter les attributs booléens selon leur présence

Les attributs booléens comprennent disabled, checked, required et readonly. Leur présence signifie que l’attribut est vrai, même si son texte est « false ». Ce code désactive un bouton :

button.setAttribute("disabled", "false");

Pour l’activer, définis button.disabled = false ou appelle button.removeAttribute("disabled"). button.toggleAttribute("disabled", isBusy) ajoute l’attribut lorsque isBusy est vrai et le supprime lorsque cette valeur est fausse.

Décrire les composants de manière accessible

Les attributs ARIA fournissent des informations aux technologies d’assistance. Les méthodes d’attributs sont utiles pour les définir, par exemple button.setAttribute("aria-label", "Close dialog") pour nommer un bouton composé d’une seule icône. Leurs valeurs sont des chaînes ; par exemple, une valeur indiquant l’état développé est « true » ou « false ».

Utilise les propriétés pour les opérations courantes telles que img.src = "photo.jpg" ou input.disabled = true. Utilise les méthodes d’attributs lorsque le nom est stocké dans une variable, lorsque la valeur exacte écrite est importante ou lorsque l’attribut ne possède pas de propriété correspondante que tu utilises.

Suivre l’effet d’une modification de propriété sur le HTML

const field = document.createElement("input");
field.disabled = true;
console.log(field.hasAttribute("disabled"));
console.log(typeof field.disabled);
console.log(typeof field.getAttribute("disabled"));
field.removeAttribute("disabled");
console.log(field.disabled);

Les résultats sont true, « boolean », « string » et false. Définir la propriété ajoute l’attribut booléen. Lire cet attribut renvoie toujours du texte, même si la propriété est un booléen. Le supprimer redonne à la propriété la valeur faux. La méthode et la propriété exposent la même présence au moyen de types de valeurs différents.

Un élément peut porter un identifiant pour les données qu’il affiche sans montrer cet identifiant à l’écran. Les composants de formulaire portent aussi des valeurs, mais leur contenu actuel se lit par des propriétés. Ces deux types de valeurs nécessitent souvent une conversion avant une comparaison ou un calcul.

Stocker des données personnalisées avec des attributs de données

Les noms HTML commençant par data- stockent des informations pour les scripts :

<li data-task-id="17" data-priority="high">Prepare slides</li>

L’objet dataset donne accès à ces attributs. Retire le préfixe data- et remplace chaque tiret suivi d’une lettre minuscule par cette lettre en majuscule : data-task-id devient dataset.taskId. data-priority devient dataset.priority.

li.dataset.dueDate = "2026-11-05";
delete li.dataset.priority;

L’affectation crée data-due-date="2026-11-05". L’instruction delete supprime data-priority. Les attributs de données peuvent aussi être sélectionnés avec des sélecteurs d’attribut CSS, tels que '[data-priority="high"]'.

Un attribut inventé comme taskid="17" rend le HTML invalide et ne crée aucune propriété li.taskid. getAttribute("taskid") peut toujours le lire, mais data-task-id est la forme correcte pour une donnée personnalisée.

Convertir volontairement les valeurs de type chaîne

li.dataset.taskId vaut « 17 », une chaîne. li.dataset.taskId === 17 est faux, car les types diffèrent. Lorsque les identifiants des données sont des nombres, utilise Number(li.dataset.taskId) === 17. Un attribut de données absent donne undefined. L’affectation li.dataset.count = 3 enregistre le texte « 3 ».

Cela permet de relier facilement un élément affiché à son objet :

const id = Number(li.dataset.taskId);
const task = tasks.find(task => task.id === id);

La comparaison utilise maintenant deux nombres. Si aucun objet ne possède cet identifiant, find() renvoie undefined ; vérifie le résultat avant d’en lire les propriétés.

Lire la valeur actuelle d’un champ

Un <input> ne contient pas la valeur saisie dans son contenu textuel. Lis input.value, qui est une chaîne, ou affecte-lui une valeur pour modifier le champ. input.value = "" vide le champ.

Pour <input id="qty" value="1">, après que l’utilisateur a saisi 3, qty.value vaut « 3 », mais qty.getAttribute("value") vaut toujours « 1 ». L’attribut fournit la valeur initiale ; la propriété fournit la valeur actuelle. Une case à cocher fonctionne de façon similaire : sa propriété checked indique son état booléen actuel, tandis que l’attribut décrit l’état coché initial.

Utiliser la bonne valeur pour chaque composant

Même <input type="number"> possède une value de type chaîne. Si la quantité est « 3 » et que chaque article pèse 0,25 kg, Number(qty.value) * 0.25 donne 0,75 kg. Mais qty.value + 1 donne « 31 », car + concatène une chaîne et un nombre. Un <select> renvoie la valeur de l’option sélectionnée par select.value. Pour une case à cocher, lis checkbox.checked, et non checkbox.value, lorsque tu dois savoir si elle est cochée.

Conserve les règles visuelles fixes dans CSS, puis laisse JavaScript modifier les classes qui sélectionnent ces règles. Une classe peut exprimer un état tel que « terminé », « actif » ou « erreur » sans répéter dans le code les couleurs et les décorations correspondantes.

Ajouter et supprimer des noms de classes

Supposons que la feuille de style contienne :

.done { text-decoration: line-through; color: #888; }

item.classList.add("done") applique l’apparence correspondant à une tâche terminée. item.classList.remove("done") supprime cet état tout en conservant les autres classes. Les deux méthodes acceptent plusieurs noms ; ajouter une classe existante ou supprimer une classe absente ne pose aucun problème.

contains("done") renvoie un booléen. replace("wide", "narrow") remplace une classe présente par une autre. toggle("active") ajoute une classe absente ou supprime une classe présente et indique par sa valeur de retour si la classe existe après l’appel.

Suivre un changement de classe

Pars de <div class="card"> :

card.classList.add("active", "wide");
const active = card.classList.toggle("active");
const replaced = card.classList.replace("wide", "narrow");

Après la première ligne, les classes sont « card active wide ». Le basculement supprime « active » : active vaut donc false et les classes deviennent « card wide ». Le remplacement de « wide » laisse « card narrow » et renvoie true. Un appel ultérieur à card.classList.contains("active") donne false.

Définir une classe à partir d’une condition

Lorsque les données indiquent l’état souhaité, passe un second argument :

row.classList.toggle("overdue", daysLeft < 0);

Une valeur négative de daysLeft garantit la présence de la classe ; sinon, elle est absente. Répéter l’appel conserve cet état. Un simple toggle("overdue") l’inverserait à chaque appel.

Conserver le reste de l’attribut de classe

className est la chaîne complète des classes. card.className = "active" remplace toutes les classes existantes, y compris « card ». Utilise cette affectation lorsque tu veux remplacer tout l’ensemble ; utilise classList pour modifier des états individuellement.

Passe les noms de classes seuls, sans la ponctuation des sélecteurs CSS. classList.add(".active") ajoute un nom contenant un point littéral ; ce n’est pas la classe à laquelle correspond .active. Un argument unique ne peut pas contenir d’espaces : classList.add("big red") déclenche une InvalidCharacterError. Écris classList.add("big", "red") pour deux classes.

Vérifier le CSS lorsque l’apparence ne change pas

Si une classe n’a aucun effet visible, inspecte son nom et sa règle dans les outils de développement. Vérifie si une règle est absente ou mal orthographiée et si des déclarations supplantées sont barrées dans le volet Styles.

Utilise des classes pour les apparences fixes et des styles en ligne pour les valeurs calculées. L’objet style lit et écrit les déclarations en ligne, pas toutes les règles qui affectent un élément.

Écrire des valeurs CSS avec style

Les noms CSS contenant des tirets deviennent des propriétés JavaScript en camelCase. background-color devient backgroundColor, font-size devient fontSize et z-index devient zIndex :

box.style.backgroundColor = "gold";
box.style.width = "250px";

Les valeurs de style sont des chaînes. Inclus une unité lorsque la propriété l’exige. Dans une page en mode standard, l’affectation box.style.width = 250 est ignorée, car une largeur non nulle a besoin d’une unité CSS. La chaîne « 0 » est valide pour une largeur nulle.

style.setProperty() prend quant à lui le nom CSS :

box.style.setProperty("background-color", "gold");
document.documentElement.style.setProperty("--accent", "#0a7d5a");

La propriété personnalisée de l’élément racine fournit une valeur aux règles qui font référence à var(--accent).

Transformer un calcul en valeur CSS

Une barre de progression indique que 3 tâches sur 8 sont terminées :

const percent = (3 / 8) * 100;
bar.style.width = `${percent}%`;

Le rapport 0,375 devient 37,5 %. Le littéral de gabarit fournit « 37.5% », avec l’unité requise.

Supprimer une déclaration en ligne temporaire

Définis box.style.backgroundColor = "" ou appelle box.style.removeProperty("background-color") pour supprimer cette déclaration en ligne. Le navigateur applique alors les règles restantes de la feuille de style. Utilise le nom CSS avec des tirets pour removeProperty().

Fais attention à style.cssText. L’affectation box.style.cssText = "color: red" remplace tout le style en ligne : une largeur définie en ligne est donc perdue. Modifier une seule propriété de style laisse les autres déclarations en ligne intactes.

Lire ce que le navigateur applique

Si une feuille de style rend un paragraphe rouge mais que celui-ci n’a pas de couleur définie en ligne, p.style.color est une chaîne vide. Utilise getComputedStyle(p).color pour obtenir la valeur appliquée, généralement « rgb(255, 0, 0) ». Les valeurs calculées sont accessibles en lecture seule ; modifie la classe ou la déclaration en ligne pour changer l’apparence.

Les déclarations en ligne prennent le dessus sur les règles ordinaires de la feuille de style, mais les déclarations !important applicables peuvent l’emporter. Si un changement de classe semble sans effet, vérifie s’il reste une déclaration en ligne qui prend le dessus.

Masquer un panneau le laisse dans le DOM, prêt à réapparaître avec son contenu et les valeurs de ses champs. Le supprimer le retire de l’arbre. Choisis de masquer un panneau qui réapparaîtra et de supprimer un élément dont les données n’existent plus.

Utiliser la propriété hidden

panel.hidden = true ajoute l’état masqué ordinaire. Le style par défaut du navigateur masque le panneau sans lui laisser d’espace dans la mise en page. panel.hidden = false supprime cet état et l’affiche à nouveau.

Une feuille de style peut prendre le dessus sur ce comportement par défaut. Par exemple, .panel { display: flex; } peut rendre visible un panneau masqué. Lorsque l’état masqué doit toujours l’emporter, inclus :

[hidden] { display: none !important; }

Tu peux aussi contrôler la visibilité avec une classe CSS. Avec .is-hidden { display: none; }, menu.classList.toggle("is-hidden", !isOpen) ajoute la classe de masquage lorsque le menu est fermé. Vérifie la feuille de style si la classe est présente mais qu’une autre déclaration de display prend le dessus.

Comparer trois façons de masquer

display: none supprime l’espace de l’élément dans la mise en page et le masque aux lecteurs d’écran. visibility: hidden le rend invisible tout en conservant son espace et le masque aussi aux lecteurs d’écran. opacity: 0 le rend transparent mais conserve son espace ; l’élément reste cliquable et accessible aux lecteurs d’écran. La transparence seule est donc une mauvaise façon de fermer un panneau qui ne devrait plus être accessible.

Ces effets concernent la visibilité et la mise en page, pas la suppression. Un champ masqué peut conserver la valeur qui y a été saisie, car le même objet reste dans l’arbre.

Maintenir la description du bouton à jour

Un bouton associé à un panneau repliable doit indiquer si celui-ci est déployé. Définis aria-expanded à la chaîne « true » lorsqu’il est ouvert et à « false » lorsqu’il est fermé. Fais dépendre cette valeur et la visibilité du panneau du même état.

Pour un panneau de réponse initialement défini par <div id="answer-1" hidden>, avec des références nommées answer et button, exécute :

const willOpen = answer.hidden;
answer.hidden = !willOpen;
button.setAttribute("aria-expanded", String(willOpen));

Au départ, answer.hidden vaut true, donc willOpen est vrai. L’affectation donne à hidden la valeur faux et affiche le panneau. L’attribut du bouton devient « true ». Exécuter à nouveau les mêmes instructions part d’un état hidden faux, masque le panneau et écrit « false » dans l’attribut.

Diagnostiquer une incohérence

Si le bouton annonce « déployé » alors que le panneau est masqué, les deux valeurs n’ont pas été mises à jour ensemble. Si hidden est vrai mais que le panneau reste visible, inspecte son display calculé et la règle CSS responsable. Le premier problème est un état incohérent de l’application ; le second est un style qui prend le dessus sur l’état masqué. Lire à la fois les propriétés DOM et le CSS appliqué permet de les distinguer.

Un nouvel élément n’apparaît pas simplement parce que tu l’as créé. Crée d’abord l’objet, donne-lui ensuite du contenu et des attributs, puis insère-le dans le document. Avant l’insertion, tu peux assembler en mémoire toute une structure imbriquée.

Construire un élément complet

const li = document.createElement("li");
li.textContent = "Water the plants";
li.className = "task";
li.dataset.id = "4";
document.querySelector("#tasks").append(li);

createElement("li") crée un élément vide. Les lignes suivantes le remplissent ; la dernière l’insère comme dernier enfant de la liste de tâches existante. Elle produit <li class="task" data-id="4">Water the plants</li>. L’appel attend un nom de balise, pas du balisage : createElement("<li>") déclenche une InvalidCharacterError. Définis les classes et les attributs après la création.

Pour du contenu imbriqué, crée séparément un span pour le titre et un bouton, définis leur texte et appelle li.append(title, button). Insère ensuite l’élément assemblé dans la liste. document.createTextNode("…") crée directement du texte ; passer une chaîne à append() insère aussi un nœud texte.

Choisir une position d’insertion

• parent.append(...) ajoute après les enfants existants.
• parent.prepend(...) ajoute avant les enfants existants.
• element.before(...) ajoute des frères précédents.
• element.after(...) ajoute des frères suivants.

Chaque méthode accepte plusieurs nœuds et chaînes. Les chaînes sont traitées comme du texte : list.append("<li>New</li>") ne construit donc pas un élément de liste. Les chevrons apparaissent comme des caractères dans la liste.

Des méthodes plus anciennes apparaissent encore dans le code. appendChild(node) accepte un nœud et le renvoie ; elle n’accepte pas de chaîne. append() renvoie undefined. parent.insertBefore(newNode, referenceNode) insère un nœud avant un enfant existant ; utiliser null comme référence l’ajoute à la fin.

Comprendre la différence entre déplacer et copier

Un nœud ne peut occuper qu’un seul endroit dans l’arbre. Insérer un nœud existant le déplace. Pour une liste dans l’ordre a, b, c, list.prepend(list.lastElementChild) déplace c au début et produit c, a, b. Cela ne laisse pas un second c à la fin.

Cela explique aussi un bogue courant dans une boucle : créer un seul <li> à l’extérieur de la boucle et l’ajouter à plusieurs reprises ne laisse qu’un seul élément. Chaque passage modifie et déplace ce même objet. Crée un nouvel élément à chaque passage lorsque la page en nécessite plusieurs, ou crée des clones distincts.

Insérer du balisage fiable à côté du contenu existant

insertAdjacentHTML(position, markup) analyse du HTML sans remplacer les enfants existants. Ses quatre noms de position sont "beforebegin" et "afterend" pour les frères à l’extérieur de l’élément, et "afterbegin" et "beforeend" pour les enfants à l’intérieur. list.insertAdjacentHTML("beforeend", "<li>New</li>") ajoute un élément analysé. Utilise cette méthode uniquement pour du balisage fiable ; le texte extérieur doit être placé dans textContent. insertAdjacentElement() et insertAdjacentText() utilisent les mêmes noms de position pour un élément ou du texte brut.

Supprimer un élément modifie l’arbre, mais n’efface pas toutes les références à cet objet. Son remplacement crée une distinction similaire : le nouvel objet occupe sa place, tandis que des variables enregistrées peuvent toujours faire référence à l’ancien.

Supprimer un élément ou plusieurs éléments correspondants

element.remove() détache cet élément. parent.removeChild(child) est l’ancienne forme passant par le parent et renvoie le nœud supprimé. Si une variable contient toujours le nœud, le script peut le lire ou l’insérer à nouveau plus tard.

Pour supprimer les tâches terminées, sélectionne une collection statique et parcours-la avec une boucle :

document.querySelectorAll(".task.done")
  .forEach(task => task.remove());

Avec cinq tâches, dont deux marquées comme terminées, il en reste trois. Supprimer un élément ne modifie pas les références contenues dans la NodeList statique : la boucle passe donc par les deux tâches sélectionnées.

Ne pas parcourir dans l’ordre croissant une liste dynamique qui rétrécit

list.children est dynamique. Avec six enfants, une boucle qui parcourt les indices dans l’ordre croissant et supprime items[i] n’en supprime que trois. Après la première suppression, le deuxième élément passe à l’indice 0, mais i avance à 1. L’enfant d’origine suivant est ignoré et le même décalage se répète.

Prends un instantané avant de supprimer tous les enfants actuels :

Array.from(list.children).forEach(item => item.remove());

Pour simplement vider un conteneur, list.replaceChildren() est plus clair. Définir list.textContent = "" ou list.innerHTML = "" le vide aussi. Une chaîne vide ne conduit à analyser aucun contenu extérieur.

Remplacer un seul nœud ou tous les enfants

old.replaceWith(newElement) place un nouveau nœud à l’endroit où se trouvait l’ancien. Pour <p id="status">Loading…</p>, document.querySelector("#status").replaceWith(list) remplace le message par la liste. parent.replaceChildren(a, b, c) remplace tous les enfants du parent en une seule opération tout en conservant le parent lui-même.

Cette différence compte pour les références enregistrées. Une variable contenant le parent reste valide après replaceChildren(), mais les références aux enfants supprimés pointent désormais vers des objets détachés. Remplacer un conteneur avec replaceWith() détache également ce conteneur.

Copier l’élément avec ou sans ses descendants

element.cloneNode(true) crée une copie profonde, incluant les descendants et les attributs. cloneNode() ou cloneNode(false) copie l’élément et ses attributs sans ses enfants. Un élément de liste cloné sans descendants ne contient aucun texte de l’élément d’origine.

Un clone est initialement détaché et doit être inséré. Il hérite aussi de l’identifiant de l’original. Donne-lui un nouvel identifiant ou supprime cet attribut avant de le placer sur la même page, afin que la sélection par identifiant reste fiable.

Gérer les éléments facultatifs

Si une recherche peut échouer, n’appelle pas immédiatement une méthode sur son résultat. document.querySelector("#promo").remove() déclenche une erreur lorsqu’aucune promotion n’existe. document.querySelector("#promo")?.remove() ne fait rien dans ce cas, sans déclencher d’erreur. Pour un conteneur obligatoire, un résultat absent est un signal utile pour vérifier le sélecteur et le moment d’exécution du script avant de tenter une modification de structure.

Le rendu consiste à transformer des données en une structure DOM visible. Garde le tableau de données comme source et construis un élément pour chaque objet. Place les valeurs des données dans textContent afin qu’elles restent du texte même si elles contiennent des chevrons.

Construire un élément pour chaque objet

Utilise ces objets représentant des livres :

const books = [
  { id: 1, title: "Dune", pages: 412 },
  { id: 2, title: "Emma", pages: 474 },
  { id: 3, title: "Beloved", pages: 324 }
];
function createBookItem(book) {
  const li = document.createElement("li");
  li.dataset.id = String(book.id);
  li.textContent = `${book.title} (${book.pages} pages)`;
  return li;
}
const list = document.querySelector("#books");
list.append(...books.map(createBookItem));

map() appelle la fonction de construction une fois par livre et produit trois éléments distincts. La décomposition transmet ces éléments comme arguments séparés à append(). L’affichage indique « Dune (412 pages) », « Emma (474 pages) » et « Beloved (324 pages) ». La somme des nombres de pages est de 1 210.

Sans décomposition, list.append(books.map(createBookItem)) reçoit un seul tableau. La méthode le convertit en texte contenant des chaînes telles que « [object HTMLLIElement] » au lieu d’insérer les éléments de liste.

L’identifiant stocké relie l’élément affiché aux données. Lis Number(li.dataset.id) avant de le comparer aux identifiants numériques des livres, puis utilise books.find(book => book.id === id).

Gérer les données manquantes et vides

Si un champ facultatif indiquant l’auteur est absent, son interpolation directe affiche « undefined ». Utilise book.author ?? "Unknown author" comme solution de repli lorsque le champ vaut null ou undefined. La coalescence des nuls laisse les autres valeurs inchangées, y compris 0 et une chaîne vide.

Si le tableau est vide, affiche un message tel que « Aucun livre pour le moment ». Un résultat vide doit indiquer à l’utilisateur qu’il n’y a actuellement aucun élément. Lors d’un nouvel affichage, remplace l’ancien pour qu’un message ou des éléments précédents ne restent pas à côté du nouveau résultat.

Comprendre l’approche par chaîne HTML

Un tableau fiable peut être transformé en chaînes HTML, puis celles-ci peuvent être réunies avec join("") avant l’affectation à innerHTML. La réunion supprime les virgules que la conversion du tableau en chaîne insérerait autrement. Cette approche analyse chaque valeur interpolée comme du HTML. Utilise l’approche qui construit des éléments lorsque les valeurs peuvent provenir de sources extérieures.

Construire une structure de tableau valide

Pour des données tabulaires, construis un <tr> par objet et un <td> pour chaque champ affiché. Ajoute les lignes au <tbody> du tableau. Pour des relevés à Oslo de 4,25 °C et au Caire de 28,5 °C, la cellule de température peut utiliser reading.temp.toFixed(1) : cette méthode affiche « 4.3 » et « 28.5 ». toFixed() renvoie une chaîne avec le nombre de décimales demandé. toLocaleString() met quant à lui en forme selon les paramètres régionaux de l’utilisateur, qui peuvent utiliser une virgule décimale. Réserve la mise en forme à l’étape d’affichage pour que les données numériques restent disponibles pour les calculs.

Construire les deux cellules avant d’insérer la ligne

Pour un corps de tableau vide existant nommé tbody, ce code affiche les relevés :

const readings = [{ city: "Oslo", temp: 4.25 }, { city: "Cairo", temp: 28.5 }];
const rows = readings.map(reading => {
  const row = document.createElement("tr");
  const city = document.createElement("td");
  const temperature = document.createElement("td");
  city.textContent = reading.city;
  temperature.textContent = reading.temp.toFixed(1) + " °C";
  row.append(city, temperature);
  return row;
});
tbody.replaceChildren(...rows);

Chaque passage crée une nouvelle ligne et deux nouvelles cellules. Remplir les deux cellules avant d’ajouter la ligne rend l’ordre des champs explicite. La décomposition de rows fournit séparément les deux nœuds de ligne ; le remplacement final supprime aussi les lignes précédentes.

Lorsqu’une liste contient de nombreux éléments, construis le nouveau contenu hors de la page et insère-le en une fois. Un DocumentFragment regroupe des nœuds sans ajouter d’élément conteneur. Un élément template permet d’écrire une structure répétée en HTML et d’en remplir une nouvelle copie pour chaque objet.

Regrouper des nœuds dans un fragment

const fragment = document.createDocumentFragment();
for (const book of books) {
  fragment.append(createBookItem(book));
}
list.append(fragment);

Le fragment se trouve initialement hors du document. Chaque nouvel élément devient son enfant. Ajouter le fragment déplace ses enfants dans la liste dans leur ordre actuel ; le fragment lui-même n’est pas inséré comme conteneur. Après le transfert de 100 éléments dans une liste vide, la liste a 100 enfants et le fragment en a 0.

Ce schéma regroupe l’insertion et organise le code de construction. Il ne garantit pas de gain de vitesse particulier. Un tableau de nœuds construits convient aussi : list.append(...items) les ajoute, tandis que list.replaceChildren(...items) remplace le contenu actuel par ces nœuds.

Définir du balisage répété dans un élément template

<template id="book-row">
  <li class="book"><span class="title"></span>
    (<span class="pages"></span> pages)</li>
</template>

Le navigateur analyse ce balisage sans l’afficher. Le contenu se trouve dans un DocumentFragment distinct, accessible par template.content. Une recherche au niveau du document ne recherche pas dans ce fragment. Sélectionne l’élément template, clone son contenu, puis recherche dans le clone :

const template = document.querySelector("#book-row");
const clone = template.content.cloneNode(true);
clone.querySelector(".title").textContent = book.title;
clone.querySelector(".pages").textContent = book.pages;
const item = clone.firstElementChild;
list.append(clone);

Le titre et le nombre de pages sont remplis avant l’insertion. item enregistre une référence au nouveau <li>. Après l’ajout, clone est vide parce que ses enfants ont été déplacés, mais item fait toujours référence à l’élément inséré.

Préserver la source réutilisable

Ajoute une copie à chaque fois. Appeler list.append(template.content) déplace les nœuds sources hors de l’élément template. Une recherche ultérieure dans template.content renvoie alors null, et la tentative suivante de remplir le titre manquant déclenche une erreur. L’élément template source doit rester disponible pour les livres suivants.

Pour de nombreuses copies, remplis chaque fragment cloné, ajoute ces copies à un fragment de regroupement, puis insère l’ensemble. Un fragment peut recevoir les enfants d’un autre fragment, tout comme une liste.

Choisir une méthode de construction lisible

createElement() convient à une petite structure ou à une structure qui varie considérablement selon l’élément. Un élément template convient à un balisage répété plus volumineux, plus facile à modifier sous forme de HTML. Dans les deux cas, insère les valeurs extérieures comme du texte. Une chaîne HTML convient au balisage fiable, mais l’interpolation dans cette chaîne déclenche tout de même une analyse HTML. Choisis la méthode de construction selon la structure que tu dois maintenir, en conservant l’ordre : créer ou cloner, remplir, puis insérer.

Regrouper les copies remplies pour un seul remplacement

Avec l’élément template de livre ci-dessus et un tableau books existant :

const group = document.createDocumentFragment();
for (const book of books) {
  const copy = template.content.cloneNode(true);
  copy.querySelector(".title").textContent = book.title;
  copy.querySelector(".pages").textContent = book.pages;
  group.append(copy);
}
list.replaceChildren(group);

Chaque copie remplie transfère son élément dans group. La dernière ligne remplace le contenu de la liste par ces éléments et vide group. L’élément template d’origine reste intact pendant toute l’opération : la fonction peut donc répéter la construction pour un tableau ultérieur.

Utilise les données comme unique source de vérité. Une fonction de rendu construit un affichage à partir du tableau actuel. Appelle-la après avoir modifié le tableau ou un objet qu’il contient.

Remplacer l’affichage à chaque rendu

Supposons que tasks contienne quatre objets, dont exactement un est terminé, et que la tâche 2 existe et ne soit pas terminée. Une fonction de rendu peut construire de nouveaux éléments et un récapitulatif :

function render() {
  const items = tasks.map(task => {
    const li = document.createElement("li");
    li.dataset.id = String(task.id);
    li.textContent = task.text;
    li.classList.toggle("done", task.done);
    return li;
  });
  list.replaceChildren(...items);
  const doneCount = tasks.filter(task => task.done).length;
  summary.textContent = `${doneCount} of ${tasks.length} done`;
}

Après tasks.push({ id: 5, text: "Book dentist", done: false }); render();, la liste contient cinq éléments et le récapitulatif indique « 1 of 5 done ». L’exécution de tasks.find(task => task.id === 2).done = true; render(); le remplace par « 2 of 5 done ».

Le remplacement des enfants est essentiel ici. Si la fonction se contentait d’ajouter tous les éléments, l’appeler deux fois dupliquerait l’affichage. Supprimer uniquement un élément DOM est aussi temporaire : si son objet reste dans le tableau, le rendu le fait réapparaître. Avec tasks déclaré au moyen de let, supprime-le des données avec tasks = tasks.filter(task => task.id !== id) et effectue à nouveau le rendu.

Construire une vue sans perdre la source

Pour une fonction de rendu qui accepte un tableau représentant une vue, passe tasks.filter(task => !task.done) pour n’afficher que les tâches non terminées. Conserve le tableau complet pour les vues ultérieures et les décomptes portant sur toute la liste. Donne un sens clair aux récapitulatifs : le nombre de tâches visibles diffère du nombre total de tâches.

sort() modifie le tableau sur lequel la méthode est appelée. Trie une copie pour l’affichage avec [...tasks].sort(...), ou utilise tasks.toSorted(...) pour obtenir une copie triée. Fournis un comparateur : les valeurs numériques nécessitent (a, b) => a - b, et les titres peuvent utiliser (a, b) => a.title.localeCompare(b.title). Le tri par défaut compare les formes textuelles : [100, 25, 3].sort() conserve donc cet ordre ; le tri numérique donne [3, 25, 100].

Faire correspondre les identifiants et analyser correctement les données

Le dataset.id d’un élément affiché est une chaîne. Convertis-le avant une comparaison stricte avec des identifiants numériques, sinon find() peut renvoyer undefined même si l’objet recherché existe. Les données JSON sont différentes : JSON.parse() conserve les nombres et les booléens JSON dans leurs types respectifs. Les objets obtenus par analyse peuvent passer par la même fonction de rendu que les objets écrits directement dans le code.

Préserver l’état local si nécessaire

Une reconstruction complète crée de nouveaux éléments. Elle peut faire perdre le focus et le texte saisi dans les champs de la zone reconstruite. Pour une petite modification d’état qui doit préserver ces objets, mets les données à jour, puis modifie l’élément existant, par exemple avec li.classList.toggle("done", task.done). Les données doivent toujours enregistrer le changement pour qu’un rendu complet ultérieur corresponde à l’affichage actuel.

Fournir des entrées distinctes à la vue et au récapitulatif

Une vue filtrée peut tout de même afficher un récapitulatif de toutes les tâches :

function renderOpenTasks() {
  const visible = tasks.filter(task => !task.done);
  const nodes = visible.map(task => {
    const li = document.createElement("li");
    li.textContent = task.text;
    return li;
  });
  if (visible.length === 0) {
    const empty = document.createElement("li");
    empty.textContent = "No open tasks";
    nodes.push(empty);
  }
  list.replaceChildren(...nodes);
  const done = tasks.filter(task => task.done).length;
  summary.textContent = `${done} of ${tasks.length} done`;
}

Un tableau dont toutes les tâches sont terminées affiche le message indiquant que cette vue est vide, mais conserve chaque objet pour le total. Compter à partir de visible répondrait à une autre question et pourrait indiquer qu’aucune tâche n’est terminée simplement parce que cette vue les exclut.