path: root/files/fr/web/api/element/classlist/index.html

---
title: element.classList
slug: Web/API/Element/classList
tags:
  - API
  - Classe
  - DOM
  - Element
  - Liste
  - Propriétés
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>

<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p>

<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>

<h2 id="Syntax" name="Syntax">Syntaxe</h2>

<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
</pre>

<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>

<h2 id="Méthodes">Méthodes</h2>

<dl>
 <dt>add( String [, String] )</dt>
 <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd>
 <dt>remove( String [, String] )</dt>
 <dd>Supprime les classes spécifiées.<br>
 <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd>
 <dt><strong>item</strong>( Number )</dt>
 <dd>Renvoie la position d'une classe dans une collection.</dd>
 <dt><strong>toggle</strong>( String [, force] )</dt>
 <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br>
 Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
 <dt>contains( String )</dt>
 <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
 <dt>replace( oldClass, newClass )</dt>
 <dd>Remplace une classe par une autre.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>

<span class="comment token">// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// &lt;div class="anotherclass"&gt;&lt;/div&gt;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token">&lt;</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>

console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// ajouter ou supprimer plusieurs classes</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span>
<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span>
div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<div class="note">
<p class="brush: js">Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
</div>

<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>

<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p>

<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p>

<pre class="brush: js">// 1. String.prototype.trim polyfill
if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
(function(window){"use strict"; // prevent global namespace pollution
if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
  if (V === "") throw new DOMException(
    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
}
// 2. Implement the barebones DOMTokenList livelyness polyfill
if (typeof DOMTokenList !== "function") (function(window){
    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
    function DOMTokenList(){
        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
    }
    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
    DOMTokenList.prototype.add = function(){
        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
                if (this[i] === val) continue a; else resStr += " " + this[i];
            this[Len] = val, proto.length += 1, proto.value = resStr;
        }
        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
    };
    DOMTokenList.prototype.remove = function(){
        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
            if (!is) continue;
            delete this[Len], proto.length -= 1, proto.value = resStr;
        }
        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
    };
    window.DOMTokenList = DOMTokenList;
    function whenPropChanges(){
        var evt = window.event, prop = evt.propertyName;
        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
            var oldLen = protoObjProto.length;
            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
                resTokenList[cI-sub] = tokens[cI];
            }
            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
            if(prop !== "classList") return;
            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
            skipPropChange = 0, resTokenList.length = tokens.length - sub;
        }
    }
    function polyfillClassList(ele){
        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
        allowTokenListConstruction = 1;
        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
        finally { allowTokenListConstruction = 0 }
        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
            this[cI-sub] = toks[cI];
        }
        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
            enumerable:   1, get: function(){return resTokenList},
            configurable: 0, set: function(newVal){
                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
                    resTokenList[cI-sub] = toks[cI];
                }
                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
            }
        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
        }); defineProperty(protoObjProto, " uCL", {
            enumerable: 0, configurable: 0, writeable: 0, value: ele
        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
        ele.attachEvent( "onpropertychange", whenPropChanges );
    }
    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
        window.Object.defineProperty(window.Element.prototype, "classList", {
            enumerable: 1,   get: function(val){
                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
                                 return this.classList;
                             },
            configurable: 0, set: function(val){this.className = val}
        });
    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
        window[" uCL"] = polyfillClassList;
        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
        );
    }
})(window);
// 3. Patch in unsupported methods in DOMTokenList
(function(DOMTokenListProto, testClass){
    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
    };
    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
        var oldValue = this.value;
        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
    };
    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
        DOMTokenListProto.replace = function(oldToken, newToken){
            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
            var oldValue = this.value;
            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
        };
    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
        return false;
    };
    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
    };
    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
        var nextIndex = 0, that = this;
        return {next: function() {
            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
        }};
    };
    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
        var nextIndex = 0, that = this;
        return {next: function() {
            return nextIndex&lt;that.length ? {value: that[nextIndex++], done: false} : {done: true};
        }};
    };
    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
        var nextIndex = 0, that = this;
        return {next: function() {
            return nextIndex&lt;that.length ? {value: nextIndex++, done: false} : {done: true};
        }};
    };
})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
})(window);
</pre>

<h3 id="Mise_en_garde">Mise en garde</h3>

<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p>

<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p>

<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("api.Element.classList")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{domxref("element.className")}}</li>
 <li>{{domxref("DOMTokenList")}}</li>
</ul>