Modifier les attributs et les classes
Utilisez setAttribute et l’API classList.
Modifier les attributs et les classes est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Attributs et classes
Les éléments portent des attributs (comme href ou data-id) et des classes CSS. JavaScript fournit des API précises pour lire et modifier les uns comme les autres.
getAttribute
getAttribute lit la valeur d’un attribut sous forme de chaîne ou renvoie null s’il est absent.
const link = document.querySelector("a");
console.log(link.getAttribute("href"));setAttribute
setAttribute crée ou met à jour un attribut. Les valeurs sont toujours des chaînes.
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");removeAttribute et hasAttribute
Utilisez removeAttribute pour supprimer un attribut et hasAttribute pour vérifier sa présence.
if (link.hasAttribute("target")) {
link.removeAttribute("target");
}Propriétés et attributs
De nombreux attributs existent également comme propriétés d’élément (comme element.id ou input.value). Les propriétés reflètent l’état actuel, tandis que les attributs contiennent souvent la valeur initiale du code HTML.
input.value; // current value
input.getAttribute("value"); // original defaultdataset pour data-*
Les attributs personnalisés data-* sont accessibles via l’objet dataset, au moyen de clés en camelCase.
const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open"; // sets data-statePrésentation de classList
classList est un objet dynamique qui permet de gérer les classes sans modifier manuellement la chaîne className.
const box = document.querySelector(".box");
console.log(box.classList);classList.add et remove
add et remove acceptent un ou plusieurs noms de classes et ignorent proprement les doublons ou les classes absentes.
box.classList.add("active", "highlight");
box.classList.remove("hidden");classList.toggle
toggle ajoute la classe si elle est absente et la supprime si elle est présente, en renvoyant un booléen indiquant le nouvel état. Un deuxième argument force l’activation ou la désactivation.
box.classList.toggle("open");
box.classList.toggle("open", true); // force addclassList.contains et replace
contains vérifie l’appartenance et replace remplace une classe par une autre sur place.
if (box.classList.contains("active")) {
box.classList.replace("active", "inactive");
}Pourquoi classList est préférable à className
Modifier className comme une chaîne risque d’écraser d’autres classes. classList ne modifie en toute sécurité que les classes ciblées.
box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the restVérification rapide
Choisissez le comportement de basculement.
Récapitulatif
Lisez et modifiez les attributs avec getAttribute/setAttribute/removeAttribute/hasAttribute, et accédez aux attributs data-* via dataset. Gérez les classes avec les méthodes de classList add, remove, toggle, contains et replace, qui sont plus sûres que le remplacement de className.
Questions Fréquemment Posées
La leçon « Modifier les attributs et les classes » est-elle gratuite ?
Oui — le texte complet de « Modifier les attributs et les classes » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modifier les attributs et les classes » ?
Utilisez setAttribute et l’API classList. Tu pratiques JavaScript 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 JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript 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 les attributs et les classes » ?
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 JavaScript Academy ?
Oui. Chaque leçon JavaScript 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
- Modifier le texte et le contenu HTML
- Créer et insérer des éléments
- Modifier les attributs et les classes
- Supprimer et remplacer des nœuds