Frontend Academy · Leçon

Modifier le contenu : textContent, innerHTML, classList

Lisez et mettez à jour le texte des éléments, insérez du HTML et activez, ajoutez ou supprimez des classes CSS par programmation.

Modifier le contenu : textContent, innerHTML, classList est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Lire et écrire avec textContent

element.textContent permet de récupérer ou de définir le contenu textuel brut d’un élément, y compris celui de tous ses descendants. Cette propriété est sûre : elle n’interprète jamais le HTML. La définir avec une saisie utilisateur ne crée donc pas de vulnérabilité XSS.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — À utiliser avec prudence

element.innerHTML permet de récupérer ou de définir le balisage HTML situé à l’intérieur d’un élément. Cette propriété est pratique, mais dangereuse avec une saisie utilisateur : elle interprète le HTML et peut exécuter des scripts (XSS). Ne définissez jamais innerHTML avec des données utilisateur non nettoyées.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText et textContent

innerText renvoie uniquement le texte visible (il respecte CSS display:none) et déclenche une mise en page. textContent renvoie tout le texte, y compris le texte masqué, et est plus rapide. Préférez textContent, sauf si vous avez précisément besoin du comportement lié au texte visible.

classList — Ajouter et supprimer des classes

element.classList fournit des méthodes permettant de modifier les classes CSS sans manipuler toute la chaîne className. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle avec un paramètre de forçage

classList.toggle('class', condition) ajoute la classe lorsque condition est évaluée comme vraie et la supprime lorsqu’elle est évaluée comme fausse. C’est une manière claire de synchroniser une classe avec un état booléen.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Lire et définir des attributs

element.getAttribute('attr') lit n’importe quel attribut. element.setAttribute('attr', value) le définit. element.removeAttribute('attr') le supprime. element.hasAttribute('attr') vérifie son existence.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

Attributs data-*

Les attributs personnalisés data-* permettent de stocker des données supplémentaires sur les éléments sans modifier le DOM. Accédez-y via element.dataset, en utilisant la notation camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Propriété de style

element.style.propertyName définit des styles en ligne. Utilisez camelCase pour les propriétés contenant des tirets. Préférez l’activation et la désactivation de classes CSS à la définition de styles en ligne : les classes maintiennent les styles dans les fichiers CSS, où ils doivent se trouver.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Lire les styles calculés

getComputedStyle(element) renvoie les styles effectivement appliqués après la cascade, et pas uniquement les styles en ligne. Utilisez-le pour lire les styles définis par des classes CSS ou par les valeurs par défaut du navigateur.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Modifier les balises title et meta

Le titre du document (l’onglet du navigateur) peut être modifié à tout moment avec document.title = 'New Title'. Dans les SPA, cela améliore l’expérience lorsque l’utilisateur navigue entre les vues.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) fait défiler doucement la page pour afficher l’élément. Cette méthode est idéale pour la navigation vers une section et pour mettre en évidence les erreurs de validation dans les formulaires.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Vérification rapide

Quelle propriété devez-vous utiliser pour afficher en toute sécurité du texte fourni par l’utilisateur dans le DOM sans risque de XSS ?

Récapitulatif : modifier le DOM

textContent définit du texte brut en toute sécurité. innerHTML définit du HTML, ce qui est dangereux avec une saisie utilisateur. classList.add/remove/toggle gère proprement les classes CSS. setAttribute/dataset gère les attributs HTML. Préférez l’activation et la désactivation de classes aux styles en ligne. getComputedStyle lit les styles finalement appliqués.

Questions Fréquemment Posées

La leçon « Modifier le contenu : textContent, innerHTML, classList » est-elle gratuite ?

Oui — le texte complet de « Modifier le contenu : textContent, innerHTML, classList » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modifier le contenu : textContent, innerHTML, classList » ?

Lisez et mettez à jour le texte des éléments, insérez du HTML et activez, ajoutez ou supprimez des classes CSS par programmation. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Modifier le contenu : textContent, innerHTML, classList » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

querySelector et querySelectorAll
addEventListener et objet Event
Modifier le contenu : textContent, innerHTML, classList
Créer et ajouter des éléments

← Retour à Frontend Academy