correction-coquilles-et-maj-du-document (#867)

* correction-coquilles-et-maj-du-document

* solve issue #806

* Review - demacroify xref + en-US ids, various typos

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 134 insertions, 135 deletions

diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
index f51770507e..76b8b9cfb7 100644
--- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -20,42 +20,42 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p>
+<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
+   <th scope="row">Prérequis :</th>
    <td>Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
-   <td>Sa familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document</td>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Les_principaux_composants_du_navigateur">Les principaux composants du navigateur</h2>
+<h2 id="the_important_parts_of_a_web_browser">Les principaux composants du navigateur</h2>
 
-<p>Les navigateurs web sont des logiciels très compliqués avec beaucoup de pièces mobiles, dont beaucoup qui ne peuvent pas être contrôlées ou manipulées par un développeur web en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou autre information sensible, et se connecter à des sites Web comme si c'était vous?</p>
+<p>Les navigateurs web sont des logiciels très complexes avec beaucoup de composants, dont beaucoup ne peuvent pas être contrôlés ou manipulés en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou à d'autres informations sensibles, ou se connecter à des sites web comme si c'était vous?</p>
 
-<p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire pleins de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'oeil au diagramme suivant, il représente les principaux composants du navigateur directemment impliqués dans l'affichage des pages web:</p>
+<p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="document-window-navigator.png" style="display: block; margin: 0 auto;"></p>
 
 <ul>
- <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet {{domxref("Window")}}. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/Apprendre/JavaScript/Building_blocks/Evènements">gestionnaire d'événément</a> à la fenêtre en cours, et plus encore.</li>
- <li>La <em>navigateur</em> est l'état et l'identité du navigateur (le user-agent par exemple) tel qu'il existe sur le web. En JavaScript, il est représenté par l'objet {{domxref("Navigator")}}. Vous pouvez utiliser cet objet pour récupérer des choses telles que la géolocalisation, les préférences de langages de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.</li>
- <li>Le <em>document</em> (accédé par le DOM dans les navigateurs) est la page en cours, chargée dans la fenêtre. Il est représenté en JavaScript par l'objet {{domxref("Document")}}. Vous pouvez utiliser cet objet pour retourner et manipuler le HTML et CSS qui composent le document, par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux style dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.</li>
+ <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a>. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir <a href="/fr/docs/Web/API/Window/innerWidth"><code>Window.innerWidth</code></a> et <a href="/fr/docs/Web/API/Window/innerHeight"><code>Window.innerHeight</code></a>), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">gestionnaire d'événement</a> à la fenêtre en cours, et plus encore.</li>
+ <li>Le <em>navigateur</em> représente l'état et l'identité du navigateur web (le user-agent par exemple) tel qu'il existe sur le Web. En JavaScript, il est représenté par l'objet <a href="/fr/docs/Web/API/Navigator"><code>Navigator</code></a>. Vous pouvez utiliser cet objet pour récupérer des informations telles que la géolocalisation, les préférences de langue de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.</li>
+ <li>Le <em>document</em> (accédé par le DOM dans les navigateurs) est la page actuellement chargée dans la fenêtre. Il est représenté en JavaScript par l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Vous pouvez utiliser cet objet pour retourner et manipuler les éléments HTML et CSS qui composent le document. Par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux styles dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.</li>
 </ul>
 
 <p>Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.</p>
 
-<h2 id="Le_modèle_objet_du_document_(Document_Object_Model)">Le modèle objet du document (Document Object Model)</h2>
+<h2 id="the_document_object_model">Le modèle objet du document (Document Object Model)</h2>
 
-<p>Le document chargé dans l'onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer les informations de style ou pour corriger les éléments lorsque le HTML est invalide, tandis qu'un développeur peut l'utiliser pour manipuler la page une fois qu'elle a été chargée.</p>
+<p>Le document chargé dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer différents styles aux éléments correspondants sur la page, tandis qu'un développeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript après que la page ait été chargée.</p>
 
-<p>Nous avons créé une simple page d'example, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">voir en direct</a>). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément {{htmlelement("section")}}, à l'intérieur duquel se situe une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:</p>
+<p>Nous avons créé une simple page d'exemple, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">voir en direct</a>). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, à l'intérieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:</p>
 
 <pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -71,142 +71,141 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p>Le DOM, d'autre part, ressemble à ça:</p>
+<p>Le DOM, quant à lui, ressemble à ça :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <div class="note">
-<p><strong>Note</strong>: Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p>
+<p><strong>Note :</strong> Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p>
 </div>
 
-<p>Vous pouvez voir ici que chaque élément et donnée texte dans le document a sa propre entrée dans l'arbre — appelé un <strong>noeud</strong> (node). Vous rencontrerez également différents termes pour décrire différents type de noeuds et leur position dans l'arbre par rapport à d'autres:</p>
+<p>Vous pouvez voir ici que chaque élément et morceau de texte dans le document possède sa propre entrée dans l'arbre — chacune étant appelée <strong>nœud</strong> (<i>node</i>). Vous rencontrerez également plusieurs termes pour décrire les différents type de nœuds ou leur position dans l'arbre les uns par rapport aux autres :</p>
 
 <ul>
- <li><strong>Noeud élément (element node)</strong>: N'importe quel élément, tel qu'il existe dans le DOM..</li>
- <li><strong>Racine (root)</strong>: Le noeud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du noeud <code>HTML</code> (d'autres langages de balilsage tels que SVG et XML auront des racines différentes).</li>
- <li><strong>Enfant (child)</strong>: Un noeud <em>directement</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> dans l'exemple ci-dessus.</li>
- <li><strong>Descendant (descendent)</strong>: Un noeud <em>n'importe où</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> mais aussi un de ses descendants. <code>IMG</code> n'est pas un enfant de <code>BODY</code>, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.</li>
- <li><strong>Parent (parent)</strong>: Un noeud qui a un autre noeud <em>directement</em> à l'intérieur. Par exemple, <code>BODY</code> est le parent de <code>SECTION</code>.</li>
- <li><strong>Ancêtre (ancestor)</strong>: Un noeud qui a un autre noeud <em>n'importe où</em> à l'intérieur. Par exemple, <code>BODY</code> est l'ancêtre d'<code>IMG</code>.</li>
- <li><strong>Frère (sibling)</strong>: Des noeuds qui ont le même parent. Par exemple, <code>IMG</code> et <code>P</code> sont frères.</li>
- <li><strong>Texte (text node)</strong>: Noeud constitué par une chaîne de caractères.</li>
+ <li><strong>Nœud élément (<i>element node</i>)</strong> : N'importe quel élément, tel qu'il existe dans le DOM.</li>
+ <li><strong>Racine (<i>root</i>)</strong> : Le nœud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du nœud <code>HTML</code> (d'autres langages de balisage tels que SVG et XML auront des racines différentes).</li>
+ <li><strong>Enfant (<i>child</i>)</strong> : Un nœud <em>directement</em> à l'intérieur d'un autre nœud. Ainsi, dans l'exemple ci-dessus, <code>IMG</code> est un enfant de <code>SECTION</code>.</li>
+ <li><strong>Descendant</strong> : Un nœud <em>n'importe où</em> à l'intérieur d'un autre nœud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> mais également l'un de ses descendants. En revanche <code>IMG</code> n'est pas un enfant de <code>BODY</code>, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.</li>
+ <li><strong>Parent</strong> : Un nœud qui a un autre nœud <em>directement</em> à l'intérieur. Par exemple, <code>BODY</code> est le parent de <code>SECTION</code>.</li>
+ <li><strong>Ancêtre (<i>ancestor</i>)</strong> : Un nœud qui a un autre nœud <em>n'importe où</em> à l'intérieur. Par exemple, <code>BODY</code> est l'ancêtre d'<code>IMG</code>.</li>
+ <li><strong>Frères et sœurs (<i>sibling</i>)</strong> : Des nœuds qui ont le même parent. Par exemple, <code>IMG</code> et <code>P</code> sont frères et sœurs.</li>
+ <li><strong>Nœud texte (<i>text node</i>)</strong> : Un nœud contenant une chaîne de caractères.</li>
 </ul>
 
-<p>Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié CSS (ex. sélecteur descendant, sélecteur enfant).</p>
+<p>Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié le CSS (ex. sélecteur descendant, sélecteur enfant).</p>
 
-<h2 id="Apprentissage_actif_Manipulations_basiques_du_DOM">Apprentissage actif: Manipulations basiques du DOM</h2>
+<h2 id="active_learning_basic_dom_manipulation">Apprentissage actif : Manipulations basiques du DOM</h2>
 
-<p>Pour commencer l'apprentissage de la manipulation du DOM, commençons par la pratique.</p>
+<p>Pour commencer l'apprentissage de la manipulation du DOM, commençons par un exemple concret.</p>
 
 <ol>
  <li>Faites une copie locale de la page <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> et de l'<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> qui l'accompagne.</li>
  <li>Ajoutez un élément <code>&lt;script&gt;&lt;/script&gt;</code> juste avant la balise fermante <code>&lt;/body&gt;</code>.</li>
- <li>Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence vers cet élément dans une variable. À l'intérieur de votre élément <code>&lt;script&gt;</code>, ajoutez la ligne suivante:
-  <pre class="brush: js">var link = document.querySelector('a');</pre>
+ <li>Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence à cet élément dans une variable. À l'intérieur de votre élément <code>&lt;script&gt;</code>, ajoutez la ligne suivante:
+  <pre class="brush: js">const link = document.querySelector('a');</pre>
  </li>
- <li>Maintenant que nous avons une référence vers l'élément, nous pouvous commencer à le manipuler en utilisant les propriétés et les méthodes disponibles dessus (celles-ci sont définies sur les interfaces telles que {{domxref("HTMLAnchorElement")}} dans le cas d'un élément {{htmlelement("a")}}, et sur les interfaces plus génériques {{domxref("HTMLElement")}}, et {{domxref("Node")}} — qui représente tout noeud dans le DOM). Tout d'abord, nous allons changer le texte du lien en mettant à jour la valeur de la propriété {{domxref("Node.textContent")}}. Ajoutez la ligne suivante à la suite de la précédente:
+ <li>Maintenant que nous avons la référence à l'élément enregistrée dans une variable, nous pouvons commencer à le manipuler en utilisant les propriétés et les méthodes qui lui sont associées (celles-ci sont définies sur les interfaces telles que <a href="/fr/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a> dans le cas d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, et sur les interfaces plus génériques <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, et <a href="/fr/docs/Web/API/Node"><code>Node</code></a> — qui représente tous les nœuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant à jour la valeur de la propriété <a href="/fr/docs/Web/API/Node/textContent"><code>Node.textContent</code></a>. Ajoutez la ligne suivante à la suite de la précédente :
   <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre>
  </li>
- <li>Nous allons également changer l'URL où dirige le lien, pour qu'il ne dirige pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante au bas de votre JavaScript:
+ <li>Nous devons également modifier l'URL ciblée par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript :
   <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre>
  </li>
 </ol>
 
 <div>
-<p>Notez que, comme beaucoup de choses en JavaScript, il y a plusieurs façons de sélectionner et récupérer une référence vers un élément dans une variable. {{domxref("Document.querySelector()")}} est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à <code>querySelector()</code> que nous avons utilisé plus tôt récupère le premier élément {{htmlelement("a")}} qui apparaît dans le document. Si vous vouliez récupérer plusieurs éléments, vous auriez pu utiliser {{domxref("Document.querySelectorAll()")}}, qui récupère tous les éléments du document qui correspondent au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un <a href="/fr/docs/Learn/JavaScript/First_steps/tableaux">tableau</a> appelé un NodeList.</p>
+<p>Notez que, comme souvent en JavaScript, il y a plusieurs façons de sélectionner et d'enregistrer une référence à un élément dans une variable. <a href="/fr/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à <code>querySelector()</code> que nous avons utilisé plus tôt récupère le premier élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> qui apparaît dans le document. Si vous souhaitez au contraire récupérer plusieurs éléments, vous pouvez utiliser <a href="/fr/docs/Web/API/Document/querySelectorAll"><code>Document.querySelectorAll()</code></a>, qui récupère tous les éléments du document correspondant au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un <a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">tableau</a> appelé un <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a>.</p>
 
-<p>Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que:</p>
+<p>Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que :</p>
 
 <ul>
- <li>{{domxref("Document.getElementById()")}}, qui sélectionne un élément avec un attribut <code>id</code> donné, par exemple <code>&lt;p id="myId"&gt;My paragraph&lt;/p&gt;</code>. L'ID est passé par paramètre, par exemple <code>var elementRef = document.getElementById('myId')</code>.</li>
- <li>{{domxref("Document.getElementsByTagName()")}}, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <code>&lt;p&gt;</code>, <code>&lt;a&gt;</code>, etc. Le type de l'élément est passé par paramètre, par exemple <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li>
+ <li><a href="/fr/docs/Web/API/Document/getElementById"><code>Document.getElementById()</code></a>, qui sélectionne un élément grâce à son attribut <code>id</code> (par exemple : <code>&lt;p id="myId"&gt;My paragraph&lt;/p&gt;</code>). L'ID est passé à la fonction en paramètre, de la façon suivante : <code>var elementRef = document.getElementById('myId')</code>.</li>
+ <li><a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>Document.getElementsByTagName()</code></a>, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <code>&lt;p&gt;</code>, <code>&lt;a&gt;</code>, etc. Le type de l'élément est passé comme paramètre de la fonction, c'est-à-dire : <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li>
 </ul>
 
-<p>Ces deux dernières méthodes fonctionnent même dans les anciens navigateurs, contrairement à <code>querySelector()</code>, mais sont beaucoup moins pratiques. Jetez un coup d'oeil aux docs et essayez d'en trouver d'autres!</p>
+<p>Ces deux dernières méthodes fonctionnent mieux dans les navigateurs plus anciens que des méthodes plus modernes comme <code>querySelector()</code>, mais elles sont beaucoup moins pratiques. Regardez autour de vous et essayez d'en trouver d'autres!</p>
 </div>
 
-<h3 id="Créer_et_placer_de_nouveaux_noeuds">Créer et placer de nouveaux noeuds</h3>
+<h3 id="creating_and_placing_new_nodes">Créer et placer de nouveaux nœuds</h3>
 
 <p>Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.</p>
 
 <ol>
- <li>De retour à notre exemple, commençons par récupérer une référence vers notre élément {{htmlelement("section")}} — ajoutez le code suivant au bas de votre script existant (faites de même avec les lignes qui suivront):
+ <li>Pour revenir à notre exemple, commençons par récupérer une référence à notre élément <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a> — ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) :
   <pre class="brush: js">var sect = document.querySelector('section');</pre>
  </li>
- <li>Nous allons créer un nouveau paragraphe avec {{domxref("Document.createElement()")}} et lui donner un texte de la même manière que précédemment:
+ <li>Nous allons maintenant créer un nouveau paragraphe grâce à <a href="/fr/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a>, et lui donner du contenu texte de la même manière que précédemment :
   <pre class="brush: js">var para = document.createElement('p');
 para.textContent = 'We hope you enjoyed the ride.';</pre>
  </li>
- <li>Nous pouvons maintenant ajouter ce paragraphe en bas de la section en utilisant {{domxref("Node.appendChild()")}}:
+ <li>Nous pouvons à présent ajouter ce paragraphe au bas de la section en utilisant <a href="/fr/docs/Web/API/Node/appendChild"><code>Node.appendChild()</code></a>:
   <pre class="brush: js">sect.appendChild(para);</pre>
  </li>
- <li>Finallement, ajoutons un noeud texte au premier paragraphe, pour finir la phrase joliment. D'abord, créons un noeud texte avec {{domxref("Document.createTextNode()")}}:
+ <li>Enfin, ajoutons un nœud texte au premier paragraphe, pour finir la phrase joliment. Créons d'abord un nœud texte avec <a href="/fr/docs/Web/API/Document/createTextNode"><code>Document.createTextNode()</code></a> :
   <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre>
  </li>
- <li>Puis, après avoir récupéré un référence vers le premier paragraphe, ajoutons-y le noeud texte:
+ <li>Puis, après avoir récupéré une référence au premier paragraphe, ajoutons-y le nœud texte:
   <pre class="brush: js">var linkPara = document.querySelector('p');
 linkPara.appendChild(text);</pre>
  </li>
 </ol>
 
-<p>C'est le plus gros de ce dont vous aurez besoin pour ajouter des noeuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous verrons quelques exemples plus tard).</p>
+<p>C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nœuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard).</p>
 
-<h3 id="Déplacer_des_éléments">Déplacer des éléments</h3>
+<h3 id="moving_and_removing_elements">Déplacer et supprimer des éléments</h3>
 
-<p>Il peut y avoir des moments où vous allez vouloir déplacer des noeuds. Si on voulait déplacer le premier paragraphe au bas de la section, on pourrait faire ça:</p>
+<p>Il peut arriver qu'on veuille déplacer des nœuds, ou même les supprimer du DOM. C'est tout à fait possible, et voyons comment.</p>
 
-<pre class="brush: js">sect.appendChild(linkPara);</pre>
 
-<p>Cela déplace le paragraphe tout au bas de la section. On pourrait penser que cela ajouterait une copie, mais ce n'est pas le cas — <code>linkPara</code> est une référence vers un et un seul élément. Si on voulait ajouter une copie, on devrait utiliser {{domxref("Node.cloneNode()")}} à la place.</p>
+<p>Par exemple, si l'on veut déplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser :</p>
+
+<pre class="brush: js">sect.appendChild(linkPara);</pre>
 
-<h3 id="Supprimer_des_éléments">Supprimer des éléments</h3>
+<p>Cette commande va déplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : <code>linkPara</code> ne fait référence qu'à un seul et unique élément. Pour copier le paragraphe, il faudrait utiliser <a href="/fr/docs/Web/API/Node/cloneNode"><code>Node.cloneNode()</code></a> à la place.</p>
 
-<p>Supprimer des éléments est également plutôt simple, du moins quand on a une référence de l'élément et de son parent. Dans notre cas, on peut utiliser {{domxref("Node.removeChild()")}}, comme ceci:</p>
+<p>Supprimer des éléments est également plutôt simple, dès lors qu'on a une référence de l'élément à supprimer et de son parent. Dans notre cas, on peut simplement utiliser <a href="/fr/docs/Web/API/Node/removeChild"><code>Node.removeChild()</code></a>, comme ceci :</p>
 
 <pre>sect.removeChild(linkPara);</pre>
 
-<p>Vous pourriez aussi vouloir supprimer un élément en n'ayant qu'une référence vers cet élément, et c'est souvent le cas. Il n'existe pas de méthode pour dire à un noeud de se supprimer, vous auriez donc à faire comme suit:</p>
+<p>Si vous souhaitez un élément uniquement à partir d'une référence à cet élément, comme c'est souvent le cas, vous pouvez utiliser <a href="/fr/docs/Web/API/ChildNode/remove"><code>ChildNode.remove()</code></a> :</p>
 
-<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre>
+<pre class="brush: js">linkPara.remove();</pre>
 
-<p>Testez les lignes ci-dessus dans votre code.</p>
+<p>Cette méthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possèdent en effet pas de méthodes pour dire à un nœud de se supprimer, et il faut donc procéder comme suit :</p>
 
-<h3 id="Manipuler_le_style">Manipuler le style</h3>
+<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre>
 
-<p>Il est possible de manipuler le style CSS JavaScript de plusieurs manières.</p>
+<p>À votre tour : essayez les lignes ci-dessus en les ajoutant à votre code.</p>
 
-<h4 id="Stylesheets">Stylesheets</h4>
+<h3 id="manipulating_styles">Manipuler le style</h3>
 
-<p>Vous pouvez obtenir une liste de toutes les feuilles de style du document en utilisant {{domxref("Document.stylesheets")}}, qui retourne un tableau d'objets {{domxref("CSSStyleSheet")}}. Vous pouvez ainsi ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités car elles sont archaïques et il est difficule de manipuler le style avec. Il y a des moyens plus simples.</p>
+<p>Il est possible de manipuler des styles CSS grâce à du JavaScript de plusieurs manières.</p>
 
-<h4 id="Propriété_style">Propriété style</h4>
+<p> Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associées à un document en utilisant <a href="/fr/docs/Web/API/Document/styleSheets"><code>Document.stylesheets</code></a>, qui retourne un objet, ressemblant à un tableau composé d'objets <a href="/fr/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a>. Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités, car elles sont archaïques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples.</p>
 
-<p>La première façon consiste à ajouter des styles en ligne (inline style), directement sur les éléments que vous voulez styler. Pour ce faire, on utilise la propriété {{domxref("HTMLElement.style")}}, qui nous permet d'accéder au style en ligne des éléments du document. Vous pouvez définir les propriétés de cet objet pour mettre à jour directement le style en ligne d'un élément.</p>
+<p>La première d'entre elles consiste à ajouter des styles en ligne (<i>inline styles</i>), directement sur les éléments que vous voulez styliser de façon dynamique. Pour ce faire, on utilise la propriété <a href="/fr/docs/Web/API/ElementCSSInlineStyle/style"><code>HTMLElement.style</code></a>, qui contient les informations de style en ligne de chaque élément du document. Vous pouvez définir des propriétés de cet objet de façon à pouvoir mettre à jour directement le style des éléments.</p>
 
 <ol>
- <li>À titre d'exemple, essayez d'ajouter les lignes suivantes au bas de votre JavaScript:
+ <li>À titre d'exemple, essayez d'ajouter les lignes suivantes à notre exemple :
   <pre class="brush: js">para.style.color = 'white';
 para.style.backgroundColor = 'black';
 para.style.padding = '10px';
 para.style.width = '250px';
 para.style.textAlign = 'center';</pre>
  </li>
- <li>Rafraichissez la page et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez le paragraphe dans l'<a href="/fr/docs/Outils/Inspecteur">Inspecteur</a> du navigateur, vous verrez que que ces lignes sont en effet ajoutées comme style en ligne au document:
+ <li>Rafraichissez la page, et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez ce paragraphe dans l'<a href="/fr/docs/Tools/Page_Inspector">Inspecteur</a> du navigateur, vous verrez que ces lignes sont en effet ajoutées comme du style en ligne au document:
   <pre class="brush: html">&lt;p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"&gt;We hope you enjoyed the ride.&lt;/p&gt;</pre>
  </li>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: Notez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que la version CSS est liée par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Assurez-vous de ne pas les mélanger, sans quoi ça ne marchera pas.</p>
+<p><strong>Note</strong> : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que les versions CSS sont reliées par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.</p>
 </div>
 
-<h4 id="Attribut_classe">Attribut classe</h4>
-
-<p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons voir maintenant.</p>
+<p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.</p>
 
 <ol>
- <li>Supprimez l'exemple précédent de votre JavaScript (5 lignes).</li>
- <li>Ajoutez ce qui suit de le {{htmlelement("head")}} de votre HTML:
+ <li>Supprimez les cinq lignes précédentes que nous avons ajoutées à notre code JavaScript.</li>
+ <li>Ajoutez ce qui suit au sein de la balise <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> de votre HTML:
   <pre>&lt;style&gt;
 .highlight {
   color: white;
@@ -217,117 +216,117 @@ para.style.textAlign = 'center';</pre>
 }
 &lt;/style&gt;</pre>
  </li>
- <li>Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale — {{domxref("Element.setAttribute()")}}. Cette fonction prend deux paramètres, le nom de l'attribut que vous voulez définir sur l'élémént et la valeur que vous voulez lui attribuer. En l'occurence, nous allons définir la classe de l'élément à <code>highlight</code>:
+ <li>Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale : <a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a>. Cette fonction prend deux paramètres : le nom de l'attribut que vous voulez définir sur l'élément, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe <code>highlight</code> à notre élément :
   <pre class="brush: js">para.setAttribute('class', 'highlight');</pre>
  </li>
- <li>Rafraichissez votre page, et vous pourrez constater qu'il n'y a aucun changement par rapport au dernier exemple. La seule différence est qu'on a utilisé une classe et non des styles en ligne.</li>
+ <li>Rafraîchissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqué au paragraphe, mais la seule différence c'est qu'on a utilisé une classe pour le faire et non des styles en ligne.</li>
 </ol>
 
-<p>La méthode que vous utilisez ne dépend que de vous; chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus puriste — on ne mélange pas le CSS et le JavaScript. Alors que vous construirez des applications de plus en plus volumineuses et complexes, vous allez probablement utiliser la dernière méthode plus fréquemment, mais c'est à vous de décider.</p>
+<p>A vous de choisir la méthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus pure (on ne mélange pas le CSS et le JavaScript, on évite donc les styles en ligne, car c'est considéré comme une mauvaise pratique). Au fur et à mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxième méthode plus souvent, mais c'est à vous de décider.</p>
 
-<p>À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec JavaScript — autant l'écrire directement en HTML et ne pas utiliser JavaScript c'est plus complexe qu'HTML et vient avec quelques inconvénients, comme le fait que ce ne soit pas lisible par les moteurs de recherche.</p>
+<p>À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec du JavaScript — autant l'écrire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problèmes (comme le fait qu'il ne puisse pas être lu par les moteurs de recherche).</p>
 
-<p>Dans les prochaines sections, nous verrons un exemple plus pratique de l'utilisation des APIs du DOM.</p>
+<p>Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p>
+<p><strong>Note</strong> : Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p>
 </div>
 
-<h2 id="Apprentissage_actif_Récupérer_des_informations_à_partir_de_l'objet_Window">Apprentissage actif: Récupérer des informations à partir de l'objet Window</h2>
+<h2 id="active_learning_getting_useful_information_from_the_window_object">Apprentissage actif : Récupérer des informations utiles depuis l'objet Window</h2>
 
-<p>Jusqu'à présent nous avons utilisé les fonctionnalités de {{domxref("Node")}} et {{domxref("Document")}} (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources. Repensez à notre démo <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> du dernier article — on y récupérait des données de géolocalisation pour afficher une carte de votre région. Vous devez juste vous assurer que vos données sont dans le bon format, et JavaScript rend cette tâche facile par rapport à de nombreux autres langages, puisqu'il est faiblement typé — par exemple, les nombres sont automatiquement convertis en chaîne de caractères quand on veut les afficher à l'écran.</p>
+<p>Jusqu'à présent nous avons seulement utilisé les fonctionnalités de <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et <a href="/fr/docs/Web/API/Document"><code>Document</code></a> (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources pour les intégrer à votre interface utilisateur (UI). Il faut simplement s'assurer que les données sont au bon format ; c'est plus simple avec JavaScript qu'avec d'autres langages, puisqu'on utilise un typage faible — les nombres par exemple sont automatiquement convertis en texte lorsqu'on les affiche à l'écran.</p>
 
-<p>Dans cet exemple, nous allons résoudre un problème très commun — s'assurer que votre application est de la taille de la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utilisé pour les jeux, où vous voulez utiliser autant de place à l'écran que vous en avez pour jouer.</p>
+<p>Dans cet exemple, nous allons résoudre un problème très courant — s'assurer que votre application est de la même taille que la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utile pour des jeux par exemple, où l'on veut utiliser autant d'espace d'écran que possible pour jouer.</p>
+
+<p>Pour commencer, faites une copie en local des fichiers de démonstration <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Ouvrez-les : vous y trouverez un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> qui couvre une petite partie de l'écran avec un motif en mosaïque. Nous utiliserons cet élément pour représenter la surface de notre interface utilisateur.</p>
 
 <ol>
- <li>Pour commencer, faites une copie locale des fichiers de démo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Ouvrez le fichier html — vous verrez que nous avons un élément {{htmlelement("div")}} qui recouvre une petite partie de l'écran avec un motif de mosaïques. Nous allons l'utiliser pour représenter la surface de notre interface.</li>
- <li>Premièrement, nous allons récupérer une référence au <code>&lt;div&gt;</code>, ainsi que la largeur et la hauteur de la fenêtre, et les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}. Ajoutez les lignes qui suivent à l'intérieur de l'élément {{htmlelement("script")}}:
-  <pre class="brush: js">var div = document.querySelector('div');
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;</pre>
- </li>
- <li>Ensuite, nous allons modifier dynamiquement la largeur et hauteur du <code>&lt;div&gt;</code> pour qu'elles soient égales à celles de la fenêtre. Ajoutez les lignes suivantes à la suite des précédentes:
-  <pre class="brush: js">div.style.width = WIDTH + 'px';
-div.style.height = HEIGHT + 'px';</pre>
- </li>
- <li>Sauvegardez et rafraichissez votre page — vous devriez désormais voir que le <code>&lt;div&gt;</code> est aussi grand que la fenêtre, quelle qu'en soit la taille. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater qu'il ne change pas de taille — nous ne définissons la taille qu'une seule fois.</li>
- <li>Nous pouvons utiliser un gestionnaire d'événément pour que le <code>&lt;div&gt;</code> soit redimensionné à chaque fois que la fenêtre est redimensionnée. L'objet {{domxref("Window")}} a pour ça un événement disponible appelé <code>resize</code>, qui est déclenché lorsque la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code:
+  <li>Tout d'abord, nous allons récupérer : une référence au <code>&lt;div&gt;</code>,  la largeur de la fenêtre d'affichage ("viewport", celle où notre document est affiché) et sa hauteur, avant de les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés <a href="/fr/docs/Web/API/Window/innerWidth"><code>Window.innerWidth</code></a> et <a href="/fr/docs/Web/API/Window/innerHeight"><code>Window.innerHeight</code></a>. Ajoutez les lignes qui suivent à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> :
+    <pre class="brush: js">const div = document.querySelector('div');
+      let winWidth = window.innerWidth;
+      let winHeight = window.innerHeight;</pre>
+       </li>
+ <li>Ensuite, nous allons modifier dynamiquement la largeur et la hauteur de notre <code>&lt;div&gt;</code> pour qu'elles soient égales à celles de la fenêtre d'affichage. Ajoutez les lignes suivantes à la suite des précédentes :
+  <pre class="brush: js">div.style.width = winWidth + 'px';
+    div.style.height = winHeight + 'px';</pre>
+     </li>
+ <li>Sauvegardez vos modifications et rafraîchissez votre page : vous devriez désormais constater que la <code>&lt;div&gt;</code> est aussi grande que la fenêtre, quelle que soit la taille de la fenêtre. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater que la div ne change pas de taille — nous ne définissons la taille qu'une seule fois.</li>
+ <li>Nous pouvons utiliser un gestionnaire d'événement pour que la <code>&lt;div&gt;</code> soit redimensionnée à chaque fois que la fenêtre l'est. L'objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a> dispose d'un événement dédié appelé <code>resize</code>, qui est déclenché à chaque fois que la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("GlobalEventHandlers/onresize", "Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code:
   <pre class="brush: js">window.onresize = function() {
-  WIDTH = window.innerWidth;
-  HEIGHT = window.innerHeight;
-  div.style.width = WIDTH + 'px';
-  div.style.height = HEIGHT + 'px';
-}</pre>
- </li>
-</ol>
+    winWidth = window.innerWidth;
+    winHeight = window.innerHeight;
+    div.style.width = winWidth + 'px';
+    div.style.height = winHeight + 'px';
+  }</pre>
+   </li>
+  </ol>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez trouver notre<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html"> exemple de redimensionnement de la fenêtre terminé</a> sur Github (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p>
+<p><strong>Note</strong> : En cas de blocage, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">exemple de redimensionnement de la fenêtre terminé</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p>
 </div>
 
-<h2 id="Apprentissage_actif_Une_liste_de_courses_dynamique">Apprentissage actif: Une liste de courses dynamique</h2>
+<h2 id="active_learning_a_dynamic_shopping_list">Apprentissage actif : Une liste de courses dynamique</h2>
 
-<p>Pour clore l'article, nous aimerions vous proposer un petit challenge — nous voulons créer une simple liste de courses qui nous permette d'ajouter des items à la liste dynamiquement en utilisant un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton:</p>
+<p>Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons créer une liste de courses simple qui nous permette d'ajouter des articles à la liste de façon dynamique, le tout grâce à un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton :</p>
 
 <ul>
- <li>La valeur du champ doit être ajoutée à la liste.</li>
- <li>Chaque élément de la liste doit avoir un bouton qui, quand il est pressé, supprime cet élément de la liste.</li>
- <li>Le champ doit être vidé et prendre le focus pour que vous puissez entrer un autre élément directement.</li>
+ <li>L'article doit être ajouté à la liste.</li>
+ <li>Chaque article de la liste doit avoir un bouton qui, quand on le presse, supprime cet élément de la liste.</li>
+ <li>Le champ doit être vidé et reprendre le focus pour que vous puissiez entrer directement un nouvel article.</li>
 </ul>
 
 <p>La démo terminée doit ressembler à ça:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p>
+<p><img alt="" src="shopping-list.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
 <p>Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.</p>
 
 <ol>
- <li>Tout d'abord, téléchargez une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Vous verrez qu'il contient un peu de CSS, un label, champ et bouton, une liste vide et un élément {{htmlelement("script")}}. Vous devrez apporter toutes vos modifications à l'intérieur du script.</li>
- <li>Créez trois variables, contenant des références à la liste {{htmlelement("ul")}}, champ {{htmlelement("input")}}, et bouton {{htmlelement("button")}}.</li>
- <li>Créez une <a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">fonction</a> qui est déclenchée lorsqu'on clique sur le bouton.</li>
- <li>À l'intérieur du corps de la fonction, commencez par stoquer la <a href="/fr/docs/Web/API/HTMLInputElements">valeur</a> (propriété <code>value</code>) du champ dans une variable.</li>
- <li>Ensuite, videz le champ en définissant sa valeur à une chaîne vide — <code>''</code>.</li>
- <li>Créez trois nouveaux éléments — un élément de liste {{htmlelement('li')}}, un {{htmlelement('span')}} et {{htmlelement('button')}}, et stockez-les dans des variables.</li>
- <li>Ajoutez le <code>&lt;span&gt;</code> et <code>&lt;button&gt;</code> comme enfant du <code>&lt;li&gt;</code>.</li>
- <li>Définissez le contenu du <code>&lt;span&gt;</code> à la valeur du champ que vous avez récupéré précedemment, et définissez le contenu du boutton à "Supprimer".</li>
- <li>Ajoutez le <code>&lt;li&gt;</code> comme enfant de la liste.</li>
- <li>Ajoutez un gestionnaire d'événément pour le bouton "Supprimer", pour que quand il est cliqué, le <code>&lt;li&gt;</code> dans lequel il se situe est supprimé.</li>
- <li>Finalement, utilisez la méthode {{domxref("HTMLElement.focus")}} pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain élément.</li>
+ <li>Tout d'abord, téléchargez une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Vous verrez qu'il contient : un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un élément <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a>. Vous apporterez toutes vos modifications à l'intérieur du script.</li>
+ <li>Créez trois variables, contenant des références aux éléments de liste <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>, de champ <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> et de bouton <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>.</li>
+ <li>Créez une <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">fonction</a> qui sera déclenchée lorsqu'on clique sur le bouton.</li>
+ <li>À l'intérieur du corps de la fonction, commencez par stocker la <a href="/fr/docs/Web/API/HTMLInputElement#properties">valeur actuelle</a> (propriété <code>value</code>) du champ dans une variable.</li>
+ <li>Ensuite, videz le champ en définissant sa valeur comme une chaîne vide — <code>''</code>.</li>
+ <li>Créez trois nouveaux éléments : un élément de liste <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>, un <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> et un bouton <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, et stockez-les chacun dans des variables.</li>
+ <li>Attachez le <code>&lt;span&gt;</code> et le <code>&lt;button&gt;</code> comme enfants de <code>&lt;li&gt;</code>.</li>
+ <li>Définissez le contenu texte du <code>&lt;span&gt;</code> comme égal à la valeur du champ que vous avez récupéré précédemment, et le contenu du bouton à "Supprimer".</li>
+ <li>Attachez l'article <code>&lt;li&gt;</code> comme enfant de la liste.</li>
+ <li>Ajoutez un gestionnaire d'événement au bouton "Supprimer", de façon à ce que lorsqu'on le clique le <code>&lt;li&gt;</code> dans lequel il se situe soit supprimé.</li>
+ <li>Enfin, utilisez la méthode <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus"><code>HTMLElement.focus</code></a> pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain article de la liste de courses.</li>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: Si vous êtes vraiment bloqué, vous pouvez regarder notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p>
+<p><strong>Note</strong> : Si vous bloquez vraiment, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p>
 </div>
 
-<h2 id="Sommaire">Sommaire</h2>
+<h2 id="summary">Résumé</h2>
 
-<p>Nous avons finit de voir la manipulation du document par le DOM. À ce stade, vous devriez comprendre quels sont les composants importants du navigateur web en ce qui concerne le contrôle des documents et l'expérience utilisateur sur le web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.</p>
+<p>Nous avons fini notre étude de la manipulation de document et du DOM. À ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matière de contrôle de documents et certains aspects de l'expérience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
-<p>Il y a beaucoup plus à voir que ce qui est couvert dans cet article. Jetez un coup d'oeil à nos références pour en découvrir davantage:</p>
+<p>Il y a bien d'autres fonctionnalités que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'œil à quelques-unes de nos notices pour en découvrir davantage :</p>
 
 <ul>
- <li>{{domxref("Document")}}</li>
- <li>{{domxref("Window")}}</li>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li>
+ <li><a href="/fr/docs/Web/API/Document"><code>Document</code></a></li>
+ <li><a href="/fr/docs/Web/API/Window"><code>Window</code></a></li>
+ <li><a href="/fr/docs/Web/API/Node"><code>Node</code></a></li>
+ <li><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>, <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a>, etc.</li>
 </ul>
 
-<p>(Voir notre <a href="/fr/docs/Web/API">Référence Web API</a> pour une liste complètes des APIs web documentées sur MDN!)</p>
+<p>(Voir notre <a href="/fr/docs/Web/API">Référence Web API</a> pour une liste complète des APIs web documentées sur MDN!)</p>
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<div>
-<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
-</ul>
-</div>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
\ No newline at end of file