initial commit

14 files changed, 1113 insertions, 0 deletions

diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html
new file mode 100644
index 0000000000..472030ca72
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/add/index.html
@@ -0,0 +1,79 @@
+---
+title: DOMTokenList.add()
+slug: Web/API/DOMTokenList/add
+tags:
+  - API
+  - Ajout
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/add
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>add()</strong></code> de l'interface {{domxref("DOMTokenList")}} ajoute  le <em>token</em> (<em>marque</em>) à la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque (<em>token</em>) que vous souhaitez ajouter à la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code>, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Vous pouvez ajouter plusieurs <em>token</em> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">span<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">"d"</span><span class="punctuation token">,</span> <span class="string token">"e"</span><span class="punctuation token">,</span> <span class="string token">"f"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.add")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html
new file mode 100644
index 0000000000..282e4743b2
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/contains/index.html
@@ -0,0 +1,78 @@
+---
+title: DOMTokenList.contains()
+slug: Web/API/DOMTokenList/contains
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+  - Recherche contenu
+translation_of: Web/API/DOMTokenList/contains
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>contains()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient le symbole donné, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.contains(token);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la "token" (<em>marque</em>) dont vous voulez vérifier l'existence dans la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>)— <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient la marque donnée, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var result = classes.contains("c");
+if(result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.contains")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html
new file mode 100644
index 0000000000..8e8527b904
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/entries/index.html
@@ -0,0 +1,72 @@
+---
+title: DOMTokenList.entries()
+slug: Web/API/DOMTokenList/entries
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>DOMTokenList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>), chacun représentant une seule marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant <code>entries()</code>, puis parcourons chacune d'entre elles en utilisant une boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un  {{domxref("Node.textContent")}}  du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.entries();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.entries")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable<em> .value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html
new file mode 100644
index 0000000000..a472bdc26d
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/foreach/index.html
@@ -0,0 +1,98 @@
+---
+title: DOMTokenList.forEach()
+slug: Web/API/DOMTokenList/forEach
+tags:
+  - API
+  - Boucle
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Méthodes
+  - Pour chaque
+translation_of: Web/API/DOMTokenList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>tokenList</var><em>.</em>forEach(<var>callback</var>);
+<em>tokenList.</em>forEach<em>(callback, argument);</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments :
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'élément en cours de traitement dans le tableau.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'index de l'élément en cours de traitement dans le tableau.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>Le tableau que <code>forEach()</code> est en train d'appliquer.</dd>
+ </dl>
+ </dd>
+ <dt><em><code>argument</code></em><code> {{Optional_inline}}</code></dt>
+ <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>{{jsxref('undefined')}} (<em>indéfinie</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec <code>forEach()</code> et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code> pendant l'exécution de la fonction interne <code>forEach()</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+classes.forEach(
+  function(value, key, listObj) {
+    span.textContent += value + ' ' + key + "/" + this + '  ++  ';
+  },
+  "arg"
+);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.forEach")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable <em>.value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..0784f5b071
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/index.html
@@ -0,0 +1,117 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Interface
+  - Listes
+  - Marques
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>DOMTokenList</strong></code> représente un ensemble de "token" (<em>marques</em>) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.<code> DOMTokenList</code> est toujours sensible à la casse.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.</dd>
+ <dt>{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}</dt>
+ <dd>retourne la valeur de la liste comme une {{domxref("DOMString")}}  <em>(chaîne de caractères).</em></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si la chaîne de caractères contient la marque <em>(token)</em> passée en argument, <code>false</code> <em>(faux)</em> sinon.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>ajoute une marque à la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>retire une marque de la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>remplace une marque existant par une nouvelle.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>retire une marque de la chaîne de caractères sous-jacente et renvoie <code>false</code>. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>exécute une fonction pour chaque élément de la <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<p>Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que <code>DOMTokenList</code> en<code> </code>utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <code>&lt;p&gt;</code> pour qu'il soit égal à la  <code>DOMTokenList</code>.</p>
+
+<p>D'abord HTML :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a b c<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Puis Javascript :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> para<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+para<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">"d"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'paragraph classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2>
+
+<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) <span id="result_box" lang="fr"><span>suppriment automatiquement les espaces en excès et les valeurs en double de la liste.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>    d   d e f<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> span<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+span<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">"x"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+span<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'span classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</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("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList")}}</div>
+
+<div id="compat-mobile">
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html
new file mode 100644
index 0000000000..1591d5c9fc
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/item/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.item()
+slug: Web/API/DOMTokenList/item
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/item
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>item()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.item(index);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'index de l'élément dont on veut le retour.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'élément renvoyé. Le retour est <code>undefined</code> (<em>indéfini</em>) si le nombre est plus grand que ou égal à la longueur de la liste.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant <em>item(length-1)</em> et l'écrivons dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.item")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html
new file mode 100644
index 0000000000..85855c60c6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/keys/index.html
@@ -0,0 +1,76 @@
+---
+title: DOMTokenList.keys()
+slug: Web/API/DOMTokenList/keys
+tags:
+  - API
+  - Boucle
+  - Clés
+  - DOM
+  - Itérateur
+  - Listes
+  - Méthodes
+  - for of
+translation_of: Web/API/DOMTokenList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>keys()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type <code>unsigned integer</code> <em>(entier non signé)</em>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.keys();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant <code>values()</code>, alors, nous itérons ces clés avec une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.keys();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.keys")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html
new file mode 100644
index 0000000000..020d7bd7f6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/length/index.html
@@ -0,0 +1,68 @@
+---
+title: DOMTokenList.length
+slug: Web/API/DOMTokenList/length
+tags:
+  - API
+  - DOM
+  - Listes
+  - Longueur
+  - Propriétés
+translation_of: Web/API/DOMTokenList/length
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>length</strong></code> (<em>longueur</em>) de l'interface {{domxref("DOMTokenList")}} est un <code>integer</code> (<em>entier</em>) représentant le nombre d'objets stockés dans la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.length;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un <code>integer</code> (<em>entier</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (<em>length</em>) de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.length")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html
new file mode 100644
index 0000000000..b3721f931c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/remove/index.html
@@ -0,0 +1,85 @@
+---
+title: DOMTokenList.remove()
+slug: Web/API/DOMTokenList/remove
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Suppression
+translation_of: Web/API/DOMTokenList/remove
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>remove()</strong></code> de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (<em>token)</em> spécifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tokenN...</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">syntaxe de décomposition</a>. L'ordre des classes n'a pas d'importance :</p>
+
+<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove(...['c', 'b']);
+span.textContent = classes;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.remove")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..64de0066fd
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,80 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Remplacement
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>replace()</strong></code> de l'interface {{domxref("DOMTokenList")}} remplace une marque <em>(token)</em> existante par une nouvelle marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.replace(oldToken,newToken);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>oldToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez remplacer.</dd>
+ <dt>newToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque avec laquelle vous voulez remplacer l'ancienne.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+try {
+  classes.replace("c", "z");
+  span.textContent = classes;
+} catch(e) {
+  span.textContent = e;
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.replace")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html
new file mode 100644
index 0000000000..b536c5f40c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/supports/index.html
@@ -0,0 +1,66 @@
+---
+title: DOMTokenList.supports()
+slug: Web/API/DOMTokenList/supports
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/DOMTokenList/supports
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>supports()</code></strong> de l'interface {{domxref("DOMTokenList")}} renvoie <code>true</code> (<em>vrai</em>) si une marque (<em>token)</em> donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = element.supports(<em>token</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>token</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant la marque à interroger.</dd>
+</dl>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la marque a été trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js"><code>var iframe = document.getElementById('display');
+if (iframe.sandbox.supports('an-upcoming-feature')) {
+  // code de support pour la future et mystérieuse fonctionnalité
+} else {
+  // code de secours
+}
+
+if (iframe.sandbox.supports('allow-scripts')) {
+  // instruction cadre de l'exécution de JavaScript
+   // NOTE: ceci fonctionne bien mais est juste un exemple!
+}</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.supports")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html
new file mode 100644
index 0000000000..5dcf5826cf
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/toggle/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMTokenList.toggle()
+slug: Web/API/DOMTokenList/toggle
+tags:
+  - API
+  - Basculement
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/toggle
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>toggle()</strong></code> (<em>bascule</em>) de l'interface {{domxref("DOMTokenList")}} supprime une marque (<em>token)</em> donnée de la liste et renvoie <code>false</code> (<em>faux</em>). Si <em>token</em> n'existe pas, il est ajouté et la fonction renvoie <code>true</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.toggle(token, force);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que l'on veut activer.</dd>
+ <dt>force {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie <code>false</code> (<em>faux</em>), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie <code>true</code> (<em>vrai</em>), la marque sera seulement ajoutée et pas supprimée après.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>false</code> (<em>faux</em>) si la marque n'est pas dans la liste après l'appel ou <code>true</code> (<em>vrai</em>) si elle y est.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b"&gt;classList is 'a b'&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.onclick = function() {
+  var result = classes.toggle("c");
+  if(result) {
+    span.textContent = "'c' added; classList is now '" + classes + "'.";
+  } else {
+    span.textContent = "'c' removed; classList is now '" + classes + "'.";
+  }
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.toggle")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html
new file mode 100644
index 0000000000..179b6dc852
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/value/index.html
@@ -0,0 +1,65 @@
+---
+title: DOMTokenList.value
+slug: Web/API/DOMTokenList/value
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Valeur
+translation_of: Web/API/DOMTokenList/value
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>value</strong></code> (<em>valeur</em>) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.value;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.textContent = classes.value;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.value")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html
new file mode 100644
index 0000000000..2abea40a04
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/values/index.html
@@ -0,0 +1,74 @@
+---
+title: DOMTokenList.values()
+slug: Web/API/DOMTokenList/values
+tags:
+  - API
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+  - Valeurs
+translation_of: Web/API/DOMTokenList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>values()</strong></code> (<em>valeurs</em>) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la <code>DOMTokenList</code>. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.values();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant <code>values()</code>, nous les itérons alors en utilisant une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.values")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>