initial commit

70 files changed, 8063 insertions, 0 deletions

diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..35a7d777cb
--- /dev/null
+++ b/files/fr/web/api/element/accesskey/index.html
@@ -0,0 +1,21 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Raccourcis clavier
+  - Reference
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La propriété <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p>
+</div>
diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html
new file mode 100644
index 0000000000..5d547f1e5e
--- /dev/null
+++ b/files/fr/web/api/element/animate/index.html
@@ -0,0 +1,205 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+translation_of: Web/API/Element/animate
+---
+<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.animate()</code></strong> est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.</p>
+
+<div class="note">
+<p>Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+</div>
+
+<h3 id="Paramèters">Paramèters</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Un nombre entier (<em>Integer</em>) <strong>représentant la durée de l'animation</strong> (en millisecondes), ou un objet (<em>Object</em>) <strong>contenant une ou plusieurs propriétés de timing</strong>: </dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>Une propriété unique pour <code>animate()</code>: une <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> qui permet de référencer l'animation.</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Options_à_venir">Options à venir</h4>
+
+<p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est <code>replace</code>.
+ <ul>
+  <li><code>add</code> induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour <code>transform</code>, une valeur <code>translateX(-200px)</code> n'annulerait pas une précédente valeur <code>rotate(20deg)</code> mais s'y ajouterait, pour donner <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>accumulate</code> est similaire mais un peu plus intéressant: <code>blur(2)</code> et <code>blur(5)</code> deviennent <code>blur(7) et non</code> <code>blur(2) blur(5)</code>.</li>
+  <li><code>replace</code>, quand à elle, remplace la précédente valeur par la nouvelle. </li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Détermine comment les valeurs se construisent, d'itération en itération, <strong>dans une même animation</strong>. Peut être définie par <code>accumulate</code> ou <code>replace</code> (voir ci-dessus). La valeur par défaut est <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est <code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.</li>
+  <li><code>paced</code> positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne un objet de type {{domxref("Animation")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans la démo <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, la méthode <code>animate()</code> est utilisée pour immédiatement créer et jouer une animation sur l'élément <code>#tunnel,</code> pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</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('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..97ac7f7019
--- /dev/null
+++ b/files/fr/web/api/element/attachshadow/index.html
@@ -0,0 +1,54 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes :
+ <ul>
+  <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes :
+   <ul>
+    <li><code>open : </code>spécifie une encapsulation ouverte.</li>
+    <li><code>closed</code> : spécifie une encapsulation fermée.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Retourne un {{domxref("ShadowRoot")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..7ddf8438c3
--- /dev/null
+++ b/files/fr/web/api/element/attributes/index.html
@@ -0,0 +1,120 @@
+---
+title: element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <strong><code>Element.attributes</code></strong> renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (<em>Array</em>), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. <span id="result_box" lang="fr"><span>Pour être plus précis, les <code>attributs</code> sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.</span></span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Exemples_basiques">Exemples basiques</h3>
+
+<pre>// récupère le premier élément &lt;p&gt; du document
+var para = document.getElementsByTagName("p")[0];
+var attr = para.attributes;
+</pre>
+
+<h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3>
+
+<p><span id="result_box" lang="fr"><span>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.</span><br>
+ <span>L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;Exemple d'attributs</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+   <span class="keyword token">function</span> <span class="function token">listAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> paragraph <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"paragraph"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="keyword token">var</span> result <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"result"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+     <span class="comment token">// D'abord, vérifier que le "paragraph" a quelques attributs    </span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span>paragraph<span class="punctuation token">.</span><span class="function token">hasAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">var</span> attrs <span class="operator token">=</span> paragraph<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span>
+       <span class="keyword token">var</span> output <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+       <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> attrs<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> i <span class="operator token">&gt;=</span> <span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">--</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         output <span class="operator token">+</span><span class="operator token">=</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">"-&gt;"</span> <span class="operator token">+</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> output<span class="punctuation token">;</span>
+     <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">"No attributes to show"</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span>
+  </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>paragraph<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Sample Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><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>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show first attribute name and value<span class="punctuation token">"</span></span>
+      <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>listAttributes();<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>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><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>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li>
+ <li><span id="result_box" lang="fr"><span>Considérations de compatibilité entre navigateurs : sur</span></span> <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li>
+</ul>
diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..b14bd520a8
--- /dev/null
+++ b/files/fr/web/api/element/classlist/index.html
@@ -0,0 +1,286 @@
+---
+title: element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Liste
+  - Propriétés
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p>
+
+<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd>
+ <dt>remove( String [, String] )</dt>
+ <dd>Supprime les classes spécifiées.<br>
+ <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd>
+ <dt><strong>item</strong>( Number )</dt>
+ <dd>Renvoie la position d'une classe dans une collection.</dd>
+ <dt><strong>toggle</strong>( String [, force] )</dt>
+ <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br>
+ Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
+ <dt>contains( String )</dt>
+ <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
+ <dt>replace( oldClass, newClass )</dt>
+ <dd>Remplace une classe par une autre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>
+
+<span class="comment token">// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// &lt;div class="anotherclass"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token">&lt;</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span>
+<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p class="brush: js">Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p>
+
+<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p>
+
+<pre class="brush: js">// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex++], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex++, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Mise_en_garde">Mise en garde</h3>
+
+<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p>
+
+<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p>
+
+<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html
new file mode 100644
index 0000000000..b5f2930e5e
--- /dev/null
+++ b/files/fr/web/api/element/classname/index.html
@@ -0,0 +1,81 @@
+---
+title: element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Propriétés
+translation_of: Web/API/Element/className
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">La propriété <strong>className</strong> de l'interface {{domxref("Element")}} récupère et définit la valeur de l'<a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut <code>class</code></a> de l'élément spécifié</span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><em><var>cName</var> est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.</em></li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> elm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'item'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">if</span><span class="punctuation token">(</span>elm<span class="punctuation token">.</span>className <span class="operator token">===</span> <span class="string token">'active'</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'inactive'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'active'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Le nom <code>className</code> est utilisé pour cette propriété au lieu de <code>class</code> à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.</p>
+
+<p><code>className</code> peut être une instance de {{domxref("SVGAnimatedString")}} si l'<code>element</code> est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de <code>className</code> ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. </p>
+
+<pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code>
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.className")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..c290291e10
--- /dev/null
+++ b/files/fr/web/api/element/click_event/index.html
@@ -0,0 +1,155 @@
+---
+title: 'Element : évènement click'
+slug: Web/API/Element/click_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Reference
+  - click
+translation_of: Web/API/Element/click_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code><strong>click</strong></code> est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.</p>
+
+<p><code>click</code> est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.</p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est <code>click</code>) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, <code>detail</code> vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 8 &amp; 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> qui recouvrent d'autres éléments ne recevront pas d'évènements <code>click</code>. Les évènements <code>click</code> toucheront les éléments en dessous à la place.</p>
+
+<p>Quelques méthodes de contournement pour ce bug :</p>
+
+<ul>
+ <li>Pour IE9 :
+  <ul>
+   <li>Utiliser {{cssxref("background-color")}}<code>: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Appliquer {{cssxref("opacity")}}<code>: 0</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>Pour IE8 et IE9 : appliquer <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>Safari Mobile 7.0+ (et antérieures) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">souffre d'un bug</a> indiquant que les évènements <code>click</code> ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">la documentation de Safari sur le fait de rendre les éléments cliquables</a> et <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">la définition d'un élément cliquable</a>.</p>
+
+<p>Méthodes de contournement connues :</p>
+
+<ul>
+ <li>Ajouter {{cssxref("cursor")}}<code>: pointer;</code> sur l'élément ou l'un des ancêtres.</li>
+ <li>Ajouter un attribut <code>onclick="void(0)"</code> à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).</li>
+ <li>Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).</li>
+ <li>Ne pas utiliser la délégation d'évènement pour <code>click</code>.</li>
+</ul>
+
+<p>Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (tant qu'il est associé à un formulaire)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>Liste à compléter.</em></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Cliquer ici&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.addEventListener('click', event =&gt; {
+  button.innerHTML = `Nombre de clics : ${event.detail}`;
+});</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-click')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.click_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..820b06e770
--- /dev/null
+++ b/files/fr/web/api/element/clientheight/index.html
@@ -0,0 +1,93 @@
+---
+title: element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie la hauteur intérieure d'un élément en pixels. Celle-ci comprend les marges intérieures éventuelles (padding), mais ni la barre de défilement horizontale, ni les bordures ,ni les marges extérieures (margin).</p>
+<p><code>clientHeight</code> peut être calculée comme la propriété CSS <code>height</code> + la propriété CSS <code>padding</code> - la hauteur de la barre de défilement horizontale (si présente).</p>
+<h3 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h3>
+<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
+</pre>
+<p><var>h</var> est un entier représentant la valeur <code>clientHeight</code> de l'élément <var>element</var> en pixels. <code>clientHeight</code> est une propriété en lecture seule.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>LA CHOUETTE<br>
+   <br>
+   Tel un fantôme dans la nuit<br>
+   Elle s'envole sans un bruit<br>
+   C'est la silhouette de la chouette<br>
+   Qui régurgite des boulettes<br>
+   Son cri terrifie les petits<br>
+   Qui se blottissent dans leur lit<br>
+   <br>
+   <br>
+   LE RENARD<br>
+   <br>
+   Animal nocturne et rusé<br>
+   Il a un beau manteau de feu<br>
+   C'est un canidé très futé<br>
+   S'approcher de lui on ne peut<br>
+   Avec sa queue immaculée<br>
+   Des passants il flatte les yeux<br>
+   <br>
+   <br>
+   LA CHAUVE-SOURIS<br>
+   <br>
+   C'est très dur de la voir<br>
+   Puisqu'elle vit dans le noir<br>
+   Elle aime du sang boire<br>
+   Et elle sort le soir<br>
+   <br>
+   <br>
+   LA GRENOUILLE<br>
+   <br>
+   Qu'est-c'qui saute et qui mouille<br>
+   Qui plonge et qui farfouille<br>
+   Qui nage et qui patouille<br>
+   C'est bien sûr la grenouille<br>
+   <br>
+   <br>
+   LE LION<br>
+   <br>
+   Le lion est carnivore<br>
+   Il a un beau pelage<br>
+   Il est souvent en cage<br>
+   Et ce soir il est mort<br>
+   <br>
+   <br>
+   L'ELEPHANT<br>
+   <br>
+   Descendant du mammouth<br>
+   Il est très imposant<br>
+   c'est bien sûr l'éléphant<br>
+   attendez j'ai un doute<br>
+   <br>
+   <br>
+   LE CHAT<br>
+   <br>
+   Talentueux chasseur<br>
+   Le chat est un joueur-né<br>
+   Il cherche avec son nez<br>
+   Et vit dans sa demeure</p>
+  <p>poèmes venant du <a class="external" href="http://membres.lycos.fr/peter2000/">site de peter2000</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientHeight_fr.png"></p>
+<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
+<p><code>clientHeight</code> ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientHeight</code> est une propriété non standard, qui a été introduite dans le modèle objet d'Internet Explorer.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp">Définition de clientHeight sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">Mesure des dimensions et de la position d'un élément sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Référence du DOM Gecko sur clientHeight (en anglais)</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>
diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..ce24f4ea3c
--- /dev/null
+++ b/files/fr/web/api/element/clientleft/index.html
@@ -0,0 +1,53 @@
+---
+title: element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientLeft
+---
+<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La largeur de la bordure gauche d'un élément en pixels. Celle-ci comprend la largeur de la barre de défilement verticale si la direction de l'élément est de droite à gauche et si un débordement provoque l'apparition d'une barre de défilement vertical sur la gauche. Les marges et le remplissage gauche (padding) ne font pas partie de <code>clientLeft</code>. Cette propriété est en lecture seule.</p>
+<p>Les applications basées sur <a href="fr/Gecko">Gecko</a> gèrent <code>clientLeft</code> à partir de Gecko 1.9 (<a href="fr/Firefox_3">Firefox 3</a>, implémentation dans le {{ Bug(111207) }}). Cette propriété n'est pas disponible dans Firefox 2 et les versions précédentes.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>gauche</var> = <var>element</var>.clientLeft;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p>
+<p><img alt="Position de la barre de défilement verticale lorsque la propriété layout.scrollbar.side est à 1 ou 3"></p>
+<p>Lorsque la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a> est à 1 ou 3 et que la direction du texte est de droite à gauche (RTL), <b>la barre de défilement vertical sera placée à gauche</b> et cela influencera la manière dont <code>clientLeft</code> est calculée.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientLeft</code> faisait au départ partie du modèle objet DHTML de Microsoft Internet Explorer.</p>
+<p>La position de la barre de défilement vertical lorsque la direction du texte sur l'élément est de droite à gauche dépendra de la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a>.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">
+  <i>
+   clientLeft definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "ja": "ja/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..6510d9fab8
--- /dev/null
+++ b/files/fr/web/api/element/clientwidth/index.html
@@ -0,0 +1,66 @@
+---
+title: element.clientWidth
+slug: Web/API/Element/clientWidth
+tags:
+  - API
+  - CSSOM View
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>Element.clientWidth</strong></code> vaut zéro pour les éléments en ligne (<em>inline</em>) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (<em>padding</em>) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.</p>
+
+<p>Lorsque <code>clientWidth</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code> par défaut ou <code>&lt;body&gt;</code> si le document utilise le mode <em>quirks</em>), c'est la largeur de la zone d'affichage (<em>viewport</em>) à l'exception des barres de défilement qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">Il s'agit d'un cas au limite pour <code>clientWidth</code></a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> est un entier correspondant à la largeur d'<code><var>element</var></code>, en pixels. La propriété <code>clientWidth</code> est uniquement accessible en lecture-seule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>clientWidth</code> fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
+</ul>
diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html
new file mode 100644
index 0000000000..7159cfcd51
--- /dev/null
+++ b/files/fr/web/api/element/closest/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/closest
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<p>La méthode <code><strong>Element.closest()</strong></code> renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie <code>null</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selecteurs</code></dt>
+ <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+var r2 = el.closest("div div");
+// Renvoie le plus proche ancêtre qui est un div
+// dans un div. Ici, c'est div-03 lui-même.
+
+var r3 = el.closest("article &gt; div");
+// Renvoie le plus proche ancêtre qui est un div
+// et dont l'élément parent est article. Ici c'est
+// div-01.
+
+var r4 = el.closest(":not(div)");
+// Renvoie le plus proche ancêtre qui n'est pas un
+// div. Dans ce cas, c'est l'élément article.</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p>
+
+<pre class="brush: js">if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null &amp;&amp; el.nodeType == 1);
+        return null;
+    };</pre>
+
+<p>Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</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-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez récupérer le répository <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et faire une pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<ul>
+ <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Element")}}</li>
+ <li>
+  <div class="syntaxbox"><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html
new file mode 100644
index 0000000000..dc47f428bb
--- /dev/null
+++ b/files/fr/web/api/element/contextmenu_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'Element : évènement contextmenu'
+slug: Web/API/Element/contextmenu_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - contextemenu
+translation_of: Web/API/Element/contextmenu_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>contextmenu</code></strong> est délenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.</span> Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.</p>
+
+<p>Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement <code>contextmenu</code> sur l'élément cible.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on annule l'action par défaut de l'évènement <code>contextmenu</code> avec <code>preventDefault()</code> lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="noContextMenu"&gt;Le menu contextuel a été désactivé sur ce paragraphe.&lt;/p&gt;
+&lt;p&gt;Mais pas sur celui-ci.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">noContext = document.getElementById('noContextMenu');
+
+noContext.addEventListener('contextmenu', e =&gt; {
+  e.preventDefault();
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.contextmenu_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/currentstyle/index.html b/files/fr/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..09a7425ce9
--- /dev/null
+++ b/files/fr/web/api/element/currentstyle/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+translation_of: Web/API/Element/currentStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>Element.currentStyle</code></strong> is a property which is a proprietary similar to the standardized {{domxref("window.getComputedStyle")}} method. It is available in old versions of Microsoft Internet Explorer. However, it returns the units set in CSS while window.getComputedStyle returns the values in pixels.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">a une description MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html
new file mode 100644
index 0000000000..431a961e5f
--- /dev/null
+++ b/files/fr/web/api/element/dblclick_event/index.html
@@ -0,0 +1,119 @@
+---
+title: 'Element : évènement dblclick'
+slug: Web/API/Element/dblclick_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - dblclick
+translation_of: Web/API/Element/dblclick_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>dblclick</code></strong> se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).</span></p>
+
+<p><code>dblclick</code> se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;aside&gt;
+  &lt;h3&gt;Une tuile&lt;/h3&gt;
+  &lt;p&gt;Double-cliquer pour redimensionner cet objet.&lt;/p&gt;
+&lt;/aside&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.large {
+  transform: scale(1.3);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.dblclick_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..5c50b4cd64
--- /dev/null
+++ b/files/fr/web/api/element/getattribute/index.html
@@ -0,0 +1,85 @@
+---
+title: element.getAttribute
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>)
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li>
+ <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Soit l'HTML :</p>
+
+<pre class="notranslate">const div1 = document.getElementById("div1");</pre>
+
+<p>Exemple de JavaScript :</p>
+
+<pre class="eval notranslate">const div1 = document.getElementById("div1");
+//=&gt; &lt;div id="div1"&gt;Hi Champ!&lt;/div&gt;
+
+const attributID = div1.getAttribute("id");
+//=&gt; "div1"
+
+cont alignement = div1.getAttribute("align");
+//=&gt; null
+</pre>
+
+<h2 id="Notes" name="Notes">Description</h2>
+
+<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+
+<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p>
+
+<h3 id="Attributs_inexistants">Attributs inexistants</h3>
+
+<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p>
+
+<h3 id="Récupération_de_nonces">Récupération de nonces</h3>
+
+<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p>
+
+<pre class="brush: js example-bad notranslate">let nonce = script.getAttribute("nonce");
+// renvoie une chaine vide</pre>
+
+<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p>
+
+<pre class="brush: js notranslate">let nonce = script.nonce;</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+   <td><strong>État</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getAttribute")}}</div>
diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html
new file mode 100644
index 0000000000..8aa41d44ad
--- /dev/null
+++ b/files/fr/web/api/element/getattributenames/index.html
@@ -0,0 +1,116 @@
+---
+title: Element.getAttributeNames()
+slug: Web/API/Element/getAttributeNames
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/getAttributeNames
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>Element.getAttributeNames()</code> renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (<em>tableau</em>) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.</p>
+
+<p>L'utilisation de <code>getAttributeNames()</code> complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">// Itérer sur les attributs de l'élément
+for(let name of element.getAttributeNames())
+{
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (Element.prototype.getAttributeNames == undefined) {
+  Element.prototype.getAttributeNames = function () {
+    var attributes = this.attributes;
+    var length = attributes.length;
+    var result = new Array(length);
+    for (var i = 0; i &lt; length; i++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}</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-element-getattributenames", "Element.getAttributeNames")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html
new file mode 100644
index 0000000000..efe33f1fa1
--- /dev/null
+++ b/files/fr/web/api/element/getattributenode/index.html
@@ -0,0 +1,53 @@
+---
+title: element.getAttributeNode
+slug: Web/API/Element/getAttributeNode
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Noeud
+translation_of: Web/API/Element/getAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var attrNode = element.getAttributeNode(attrName);</code></pre>
+
+<ul>
+ <li><code>attrNode</code> est un nœud <code>Attr</code> pour l'attribut demandé.</li>
+ <li><code>attrName</code> est une chaîne de caractères qui contient le nom de l'attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// html: &lt;div id="top" /&gt;
+var t = document.getElementById("top");
+var idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, <code>getAttributeNode</code> passe en minuscules son argument avant de continuer.</p>
+
+<p>Les nœuds <code>Attr</code> héritent de <code>Node</code>, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme <a href="fr/DOM/element.parentNode">parentNode</a>, <a href="fr/DOM/element.previousSibling">previousSibling</a>, et <a href="fr/DOM/element.nextSibling">nextSibling</a> sont <code>null</code> pour un nœud <code>Attr</code>. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété <code>ownerElement</code>.</p>
+
+<p><a href="fr/DOM/element.getAttribute">getAttribute</a> est habituellement utilisé à la place de <code>getAttributeNode</code> pour obtenir la valeur d'un attribut d'un élément.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html
new file mode 100644
index 0000000000..f7d11eaaee
--- /dev/null
+++ b/files/fr/web/api/element/getattributenodens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.getAttributeNodeNS
+slug: Web/API/Element/getAttributeNodeNS
+translation_of: Web/API/Element/getAttributeNodeNS
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<dl>
+ <dt><code>attributeNode</code></dt>
+ <dd>Le nœud pour l'attribut spécifié.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Une chaîne spécifiant le nom de l'attribut.</dd>
+</dl>
+
+<p><span class="comment">== Example == TBD The example needs to be fixed // html: &lt;div id="top" /&gt; t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</span></p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>getAttributeNodeNS</code> est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.getAttributeNodeNS", "ja": "ja/DOM/element.getAttributeNodeNS", "pl": "pl/DOM/element.getAttributeNodeNS" } ) }}</p>
diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html
new file mode 100644
index 0000000000..1a256de5fa
--- /dev/null
+++ b/files/fr/web/api/element/getattributens/index.html
@@ -0,0 +1,126 @@
+---
+title: element.getAttributeNS
+slug: Web/API/Element/getAttributeNS
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttributeNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>getAttributeNS()</code></strong> est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit <code>null</code>, soit <code>""</code> (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespace </code></dt>
+ <dd><span id="result_box" lang="fr"><span>L'espace de noms dans lequel rechercher l'attribut spécifié.</span></span></dd>
+ <dt><code>name </code></dt>
+ <dd>Le nom de l'attribut à chercher.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est <code>null</code>.</p>
+
+<div class="note">
+<p>Note : <span id="result_box" lang="fr"><span>Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens.</span> <span>La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</span></span></p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le document SVG suivantu utilise une valeur d'attribut <code>foo</code> d'un espace de nom spécifique :</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
+
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  &lt;/script&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Dans un document HTML5, il faut utiliser <code>test:foo</code> pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/&gt;
+&lt;/svg&gt;
+
+&lt;script type="text/javascript"&gt;
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place <code>getAttribute()</code> .</p>
+
+<p>La méthode <code>getAttributeNS</code> diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.</p>
+
+<p><span id="result_box" lang="fr"><span>Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants.</span> <span>Cependant, la plupart des navigateurs ont renvoyé null.</span> <span>À partir de DOM4, la spécification dit maintenant de retourner null.</span> <span>Cependant, certains navigateurs plus anciens renvoient une chaîne vide.</span> <span>Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttributeNS()</code> s'il est possible que l'attribut demandé n'existe pas</span> <span>sur l'élément spécifié.</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code>  <span class="short_text" id="result_box" lang="fr"><span>est levée si l'agent utilisateur ne supporte pas la fonctionnalité</span></span> <code>"XML"</code>. <span id="result_box" lang="fr"><span>Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getAttributeNS")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Add-ons/Code_snippets/getAttributeNS">Code snippets:getAttributeNS</a></li>
+</ul>
diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..ba2e4c2a85
--- /dev/null
+++ b/files/fr/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,119 @@
+---
+title: element.getBoundingClientRect
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - CSSOM
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossaire/Viewport">zone d'affichage</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de retour est un objet <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect">DOMRect</a></code> qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="https://mdn.mozillademos.org/files/17155/element-box-diagram.png" style="height: 1099px; width: 1466px;"></p>
+
+<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est définit pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
+
+<p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p>
+
+<p>Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel <code>width</code> et <code>height</code> valent 0 et où <code>top</code> et <code>left</code> correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.</p>
+
+<p>La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).</p>
+
+<p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p>
+
+<h3 id="Solution_de_prise_en_charge_multi-navigateurs">Solution de prise en charge multi-navigateurs</h3>
+
+<p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p>
+
+<pre class="brush:js notranslate">// Pour scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Pour scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p>
+
+<pre class="brush:html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}</pre>
+
+<pre class="brush:js notranslate">let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p>
+
+<p>En raison de problèmes de comptabilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
+
+<p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p>
+
+<pre class="brush:js notranslate">rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{ width, ...emptyObj } = rect</pre>
+
+<p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, une version plus ancienne de <code>DOMRect</code></li>
+</ul>
diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..6db517f757
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,71 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Classes
+  - Element
+  - Method
+  - Reference
+  - getElementByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p>
+
+<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li>
+ <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li>
+ <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Obtient tous les élements ayant une classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</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-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..db034104c0
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,143 @@
+---
+title: element.getElementsByTagName
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/tagName" title="fr/DOM/element.tagName">nom de balise</a> donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est <em>live</em>, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois  <code>Element.getElementsByTagName()</code>  avec le même élément et les mêmes arguments.</p>
+
+<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code><span id="result_box" lang="fr"><span>place son argument en minuscule avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG "</span></span> camel-cased" <span lang="fr"><span> dans une sous-arborescence dans un document HTML.</span> <span>{{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span><code>Element.getElementsByTagName</code> est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code>  est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la <code>HTMLCollection</code> est vide.</li>
+ <li><code>element</code> est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.</li>
+ <li><code>tagName</code>  est le nom qualifié à rechercher. La chaîne spéciale <code>"*"</code> représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// vérifie l'alignement sur un nombre de cellules dans un tableau. </span>
+<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"forecast-table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cells <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> cells<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> status <span class="operator token">=</span> cells<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span> status <span class="operator token">==</span> <span class="string token">"open"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// saisit les données </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-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="short_text" id="result_box" lang="fr"><span>Avant Firefox 19, cette méthode retournait une</span></span> {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+
+<p>[2] Initiallement, la méthode retournait une {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..9348f8eb5a
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagnamens/index.html
@@ -0,0 +1,77 @@
+---
+title: Element.getElementsByTagNameNS()
+slug: Web/API/Element/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagNameNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} <span id="result_box" lang="fr"><span>avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode</span></span> {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que <code>getElementsByTagNameNS()</code> recherche parmi les descendants de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>L'URI de l'espace de noms des éléments à rechercher (cf. <code><a href="/fr/docs/Web/API/Element/namespaceURI">namespaceURI</a></code>). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom local des éléments à rechercher ou la valeur spéciale <code>"*"</code> (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<pre class="brush: js">// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("<span class="plain">http://www.w3.org/1999/xhtml</span>", "td");
+for (var i = 0; i &lt; cells.length; i++) {
+  var axis = cells[i].getAttribute("axis");
+  if (axis == "year") {
+    // saisit les données
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getElementsByTagNameNS")}}</p>
diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..2f1ab2a913
--- /dev/null
+++ b/files/fr/web/api/element/hasattribute/index.html
@@ -0,0 +1,127 @@
+---
+title: element.hasAttribute
+slug: Web/API/Element/hasAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/hasAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode  <strong><code>Element.hasAttribute()</code></strong>  renvoie une <strong>valeur booléenne</strong> indiquant si l'élément courant possède l'attribut spécifié ou non.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>récupère la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>est une chaine de caractères représentant le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasAttribute</span><span class="punctuation token">(</span><span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Polyfill</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span> <span class="operator token">&amp;&amp;</span>
+                  <span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span><span class="punctuation token">.</span>specified<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html
new file mode 100644
index 0000000000..d927bbc3c3
--- /dev/null
+++ b/files/fr/web/api/element/hasattributens/index.html
@@ -0,0 +1,54 @@
+---
+title: element.hasAttributeNS
+slug: Web/API/Element/hasAttributeNS
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/hasAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">result =
+element.hasAttributeNS(
+namespace,
+localName)</code></pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>Une valeur booléenne <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Vérifie que l'attribut existe
+// avant de définir une valeur
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        <span class="nowiki">"http://www.mozilla.org/ns/specialspace/"</span>,
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/hasattributes/index.html b/files/fr/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..1699e0d651
--- /dev/null
+++ b/files/fr/web/api/element/hasattributes/index.html
@@ -0,0 +1,81 @@
+---
+title: element.hasAttributes
+slug: Web/API/Element/hasAttributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/API/Element/hasAttributes
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>hasAttributes()</code></strong>, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:js">var result = element.hasAttributes();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>contient la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js ">var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // faire quelque chose avec 'foo.attributes'
+}</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js ">;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length &gt; 0);
+    }
+})(Element.prototype);</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-element-hasattributes", "Element.hasAttributes()")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale, sur l'interface {{domxref("Node")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.hasAttributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Element.hasAttribute()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html
new file mode 100644
index 0000000000..2dd8fedbfb
--- /dev/null
+++ b/files/fr/web/api/element/id/index.html
@@ -0,0 +1,122 @@
+---
+title: element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/id
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La propriété  <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p>
+
+<p><span id="result_box" lang="fr"><span>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}.</span> <span>Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID">ID de l'élément en tant que sélecteur</a> lors de la mise en forme du document avec <a href="https://developer.mozilla.org/fr/docs/Web/CSS">CSS</a>.</span></span></p>
+
+<div class="note">
+<p><strong><span lang="fr"><span>Note : </span></span></strong> <span id="result_box" lang="fr"><span>Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir <a href="https://developer.mozilla.org/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Obtenez l'identifiant
+<em>elt</em>.id = <em>idStr; // Définir l'identifiant</em></pre>
+
+<ul>
+ <li><code>idStr</code> est l'identifiant de l'élément.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</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', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html
new file mode 100644
index 0000000000..aa58fc3ea5
--- /dev/null
+++ b/files/fr/web/api/element/index.html
@@ -0,0 +1,812 @@
+---
+title: element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Elements
+  - Interface
+  - Reference
+  - Web API
+translation_of: Web/API/Element
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p>
+
+<p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd>
+ <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd>
+ <dt>{{domxref("Element.className")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd>
+ <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la hauteur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la largeur de la bordure gauche de l'élément.</dd>
+ <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd>
+ <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}}  contenant l'étiquette affichée pour l'accessibilité.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd>
+ <dt>{{domxref("Element.id")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd>
+ <dt>{{domxref("Element.innerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p>
+</div>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd>
+ <dt>{{domxref("Element.outerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd>
+ <dt>{{DOMxRef("Element.part")}}</dt>
+ <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd>
+ <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd>
+ <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeft")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant le décalage maximum de défilement gauche possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollTop")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd>
+ <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd>
+ <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd>
+ <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd>
+ <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd>
+ <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong>  DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p>
+
+<p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
+</div>
+
+<h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3>
+
+<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd>
+ <dt>{{domxref("Element.attachShadow()")}}</dt>
+ <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd>
+ <dt>{{domxref("Element.closest()")}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd>
+ <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt>
+ <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd>
+ <dt>{{domxref("Element.getAttribute()")}}</dt>
+ <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNames()")}}</dt>
+ <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd>
+ <dt>{{domxref("Element.getAttributeNS()")}}</dt>
+ <dd>Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.</dd>
+ <dt>{{domxref("Element.getBoundingClientRect()")}}</dt>
+ <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd>
+ <dt>{{domxref("Element.getClientRects()")}}</dt>
+ <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd>
+ <dt>{{domxref("Element.getElementsByClassName()")}}</dt>
+ <dd>Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd>
+ <dt>{{domxref("Element.getElementsByTagName()")}}</dt>
+ <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd>
+ <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.</dd>
+ <dt>{{domxref("Element.hasAttribute()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd>
+ <dt>{{domxref("Element.hasAttributeNS()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd>
+ <dt>{{domxref("Element.hasAttributes()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indique si l'élément sur lequel la méthode est invoquée a  une capture de pointeur pour le pointeur spécifié par son identifiant.</dd>
+ <dt>{{domxref("Element.insertAdjacentElement")}}</dt>
+ <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd>
+ <dt>{{domxref("Element.insertAdjacentHTML")}}</dt>
+ <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd>
+ <dt>{{domxref("Element.insertAdjacentText")}}</dt>
+ <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd>
+ <dt>{{domxref("Element.matches()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd>
+ <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
+ <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd>
+ <dt>{{domxref("Element.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.querySelectorAll")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.releasePointerCapture")}}</dt>
+ <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Supprime l'élément de la liste des enfants de son parent.</dd>
+ <dt>{{domxref("Element.removeAttribute()")}}</dt>
+ <dd>Supprime l'attribut nommé du noeud courant.</dd>
+ <dt>{{domxref("Element.removeAttributeNS()")}}</dt>
+ <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Supprime un écouteur d'évènement de l'élément.</dd>
+ <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt>
+ <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd>
+ <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd>
+ <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.setAttribute()")}}</dt>
+ <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNS()")}}</dt>
+ <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
+ <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt>
+ <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.</dd>
+ <dt>
+ <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3>
+ </dt>
+ <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt>
+ <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt>
+ <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.</dd>
+ <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt>
+ <dd>Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br>
+ Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd>
+ <dt>{{domxref("Element/error_event", "error")}}</dt>
+ <dd>Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Déclenché quand la vue du document un élément a été défilé.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Déclenché quand une portion de texte a été sélectionnée.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd>
+ <dt>
+ <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3>
+ </dt>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_composition">Évènements de composition</h3>
+ </dt>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_focale">Évènements de focale</h3>
+ </dt>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Déclenché quand un élément a perdu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Déclenché quand un élément a obtenu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd>
+ <dt>
+ <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3>
+ </dt>
+ <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
+ <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd>
+ <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
+ <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_clavier">Évènements de clavier</h3>
+ </dt>
+ <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
+ <dd>Déclenché quand une touche est pressée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd>
+ <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
+ <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd>
+ <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
+ <dd>Déclenché quand une touche est relâchée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_souris">Évènements de souris</h3>
+ </dt>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd>
+ <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
+ <dd>Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd>
+ <dt>
+ <h3 id="Évènements_de_toucher">Évènements de toucher</h3>
+ </dt>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Ajoute la méthode <code>getAnimations()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Ajoute la méthode<code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Ajoute la méthode <code>requestFullscreen().</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br>
+    Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br>
+    Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br>
+    Supprime la propriété <code>schemaTypeInfo</code>.<br>
+    Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br>
+    Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br>
+    Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br>
+    Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 with a significant bug [1]<br>
+    9.0 according to the spec</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td>
+   <td>{{CompatChrome(52.0)}} [4]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[3]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} with the standard name</td>
+   <td>9.0 with the non-standard name <code>msMatchesSelector</code></td>
+   <td>11.5 with the non-standard name <code>oMatchesSelector</code><br>
+    15.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br>
+    22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> and <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoDesktop("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatChrome(41)}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoMobile("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 et 8 retourne incorrectement les commentaires dans le cadre des enfants d'un élément. <span>Ceci est corrigé dans Internet Explorer 9 et versions ultérieures.</span></p>
+
+<p>[2] Chrome 16 permet <code>webkitRequestPointerLock()</code> uniquement en plein écran ; Chrome 21 pour un site web de confiance (permission demandée) ; Chrome 22 autorise par défaut pour tous les documents de même origine ; Chrome 23 autorise dans le bac à sable {{HTMLElement("iframe")}} si la valeur non-standard <code>webkit-allow-pointer-lock</code> est définie dans l'attribut {{htmlattrxref("sandbox", "iframe")}}.</p>
+
+<p>[3] Implémentation <span class="short_text" id="result_box" lang="fr"><span>retiré.</span></span> Voir {{Bug("1166347")}}.</p>
+
+<p>[4] <span class="short_text" id="result_box" lang="fr"><span>Derrière une balise (flag).</span></span></p>
+
+<dl>
+ <dd></dd>
+</dl>
+
+<p><span class="comment">Devrait figurer sur une page traitant de NodeList  ; <a href="/fr/DOM/element.item">item</a>: Retrouve un nœud dans une &lt;code&gt;NodeList&lt;/code&gt; par son indice. (DOM Core, ne fait pas partie de l'interface &lt;code&gt;Element&lt;/code&gt;)</span> <span class="comment">?? ; <a href="/fr/DOM/element.supports">supports</a>: Teste si cette implémentation du DOM gère une fonctionnalité particulière. (DOM Core)</span></p>
diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerthtml/index.html
new file mode 100644
index 0000000000..6addb7d54e
--- /dev/null
+++ b/files/fr/web/api/element/innerthtml/index.html
@@ -0,0 +1,203 @@
+---
+title: element.innerHTML
+slug: Web/API/Element/innertHTML
+tags:
+  - API
+  - DOM
+  - Elements
+  - HTML
+  - Propriétés
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <strong><code>Element.innerHTML</code></strong> de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.</p>
+
+<div class="note"><strong>Note: </strong>Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères <code>(&amp;), (&lt;),</code> ou <code>(&gt;)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> et <code>"&amp;gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</div>
+
+<p>Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>content</em> = <em>element</em>.innerHTML;
+
+<em>element</em>.innerHTML = <em>htmlString</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>innerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>La propriété <code>innerHTML</code> peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.</p>
+
+<h3 id="Lecture_du_contenu_HTML_dun_élément">Lecture du contenu HTML d'un élément</h3>
+
+<p>La lecture de <code>innerHTML</code> amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">let</span> contents <span class="operator token">=</span> myElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span></code></pre>
+
+<p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span><strong>Note :</strong> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.</span></span></p>
+</div>
+
+<h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3>
+
+<p>Définir la valeur de <code>innerHTML</code> vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.</p>
+
+<p>Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"&lt;"</code> par l'entité HTML <code>"&amp; lt;"</code>, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de <code>innerHTML</code> est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"&lt;pre&gt;"</span> <span class="operator token">+</span>
+         document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/&lt;/g</span><span class="punctuation token">,</span><span class="string token">"&amp;lt;"</span><span class="punctuation token">)</span> <span class="operator token">+</span>
+            <span class="string token">"&lt;/pre&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Détails_opérationnels">Détails opérationnels</h4>
+
+<p>Qu'arrive-t-il exactement quand vous définissez la valeur de <code>innerHTML</code> ?  Cela entraîne l'agent utilisateur à suivre ces étapes :</p>
+
+<ol>
+ <li>La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.</li>
+ <li>Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <code>&lt;template&gt;</code> est remplacé par le nouveau <code>DocumentFragment</code> créé à l'étape 1.</li>
+ <li>Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p>Il n'est pas rare de voir <code>innerHTML</code> utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"John"</span><span class="punctuation token">;</span>
+<span class="comment token">// en supposant que 'el' est un élément de document HTML</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span>
+
+<span class="comment token">// ...</span>
+
+name <span class="operator token">=</span> <span class="string token">"&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span></code></pre>
+
+<p>Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">ne doit pas s'exécuter</a>.</p>
+
+<p>Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez <code>innerHTML</code> pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"&lt;img src='x' onerror='alert(1)'&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// affiche l'alerte</span></code></pre>
+
+<p>Pour cette raison, il est recommandé de ne pas utiliser <code>innerHTML</code> pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <span id="result_box" lang="fr"><span>Si votre projet est soumis à une vérification de sécurité, l'utilisation de <code>innerHTML</code> entraînera probablement le rejet de votre code.</span> <span>Par exemple, si vous utilisez <code>innerHTML</code> dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.</span></span></p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise <code>innerHTML</code> pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> logElem <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">".log"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> time <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> timeStr <span class="operator token">=</span> time<span class="punctuation token">.</span><span class="function token">toLocaleTimeString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  logElem<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> timeStr <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Logging mouse events inside this container..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>log()</code> crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe <code>"log"</code>.</p>
+
+<p>Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logEvent</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> msg <span class="operator token">=</span> <span class="string token">"Event &lt;strong&gt;"</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>type <span class="operator token">+</span> <span class="string token">"&lt;/strong&gt; at &lt;em&gt;"</span> <span class="operator token">+</span>
+            event<span class="punctuation token">.</span>clientX <span class="operator token">+</span> <span class="string token">", "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>clientY <span class="operator token">+</span> <span class="string token">"&lt;/em&gt;"</span><span class="punctuation token">;</span>
+  <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> boxElem <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">".box"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseenter"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseleave"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le HTML est assez simple pour notre exemple.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<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>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>Log:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<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>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Le {{HTMLElement ("div")}} avec la classe <code>"box"</code> est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui.</span> <span>Le <code>&lt;div&gt;</code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</span></span></p>
+
+<h3 id="Notes" name="Notes">CSS</h3>
+
+<p>Les styles CSS suivants pour notre exemple de contenu.</p>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">600</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid black<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">4</span>px<span class="punctuation token">;</span>
+  <span class="property token">overflow-y</span><span class="punctuation token">:</span> scroll<span class="punctuation token">;</span>
+  <span class="property token">overflow-x</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.log</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">8</span>px<span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> monospace<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.</p>
+
+<p>{{EmbedLiveSample("Exemple", 640, 350)}}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr style="background-color: rgb(255, 204, 255);">
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="References" name="References">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML")}}</li>
+ <li>Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..2597358d00
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée<span id="result_box" lang="fr"><span> par rapport à l'élément sur lequel il est appelé.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Un objet {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à <code>targetElement</code> ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li>
+  <li><code style="color: green;">'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li>
+  <li><code style="color: blue;">'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li>
+  <li><code style="color: magenta;">'afterend'</code> : Après <code>targetElement</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>L'élément à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>L'élément inséré ou <code>null</code> si l'insertion a échouée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explications</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> donnée n'est pas une valeur reconnue.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>L'<code>element</code> spécifié n'est pas un élément valide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});</pre>
+
+<p>Une démo de notre <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> est disponible sur Github ( avec le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">code source</a> ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons <em>Insert before</em> (<em>insérer avant</em>) et <em>Insert after</em> (<em>insérer après</em>) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} ( même effet que <code>beforeend</code> )</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..cbf56853b6
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,102 @@
+---
+title: element.insertAdjacentHTML
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas  réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>position</code> </dt>
+ <dd>une {{domxref("DOMString")}}  représentant la position relative à l'<code>element</code>, et doit être une des chaînes de caractères suivantes :</dd>
+</dl>
+
+<ul>
+ <li><code style="color: red;">'beforebegin'</code> : Avant l'<code>element</code>  lui-même.</li>
+ <li><code style="color: green;">'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li>
+ <li><code style="color: blue;">'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li>
+ <li><code style="color: magenta;">'afterend'</code> : Après <code>element</code> lui-même.</li>
+</ul>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd> est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.</dd>
+</dl>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// Ici la nouvelle structure est :
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p><span id="result_box" lang="fr"><span>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut;</span> <span>à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>.</span> <span>Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</span></span></p>
+
+<h2 id="Spécification">Spécification</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 Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li><a class="external external-icon" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external external-icon"> par Henri Sivonen </span> <span id="result_box" lang="fr"><span>y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html
new file mode 100644
index 0000000000..5482756415
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenttext/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentText()
+slug: Web/API/Element/insertAdjacentText
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+  - Texte
+translation_of: Web/API/Element/insertAdjacentText
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li>
+  <li><code style="color: green;">'afterbegin'</code><code style="color: green;"> </code>: à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li>
+  <li><code style="color: blue;">'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li>
+  <li><code style="color: magenta;">'afterend'</code> : après l'<code>element</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+machin
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});</pre>
+
+<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p>
+
+<h2 id="Émulation">Émulation</h2>
+
+<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p>
+
+<pre>if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convertir en chaîne de caractères
+        .replace(/&amp;/g, '&amp;amp;') // intégrer des symboles d'esperluette
+        .replace(/&lt;/g, '&amp;lt;') // intégrer les symboles "plus petit que"
+    )
+  }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html
new file mode 100644
index 0000000000..da09a1887e
--- /dev/null
+++ b/files/fr/web/api/element/localname/index.html
@@ -0,0 +1,154 @@
+---
+title: Element.localName
+slug: Web/API/Element/localName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+  - XML
+  - local
+translation_of: Web/API/Element/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.localName</strong></code> renvoie la partie locale du nom qualifié d'un élément.</p>
+
+<div class="note">
+<p>Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la partie locale du nom qualifié de l'élément.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>(Doit être servi avec un type de contenu XML, tel que <code>text/xml</code> ou <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.</p>
+</div>
+
+<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', '#dom-element-localname', 'Element.localName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponiblie sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html
new file mode 100644
index 0000000000..00ae129138
--- /dev/null
+++ b/files/fr/web/api/element/matches/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+tags:
+  - API
+  - DOM
+  - Selector
+translation_of: Web/API/Element/matches
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>La méthode<strong> </strong></code><strong><code>element.matches()</code></strong> renvoie <code>true</code> lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie <code>false</code>.</p>
+
+<div class="warning">
+<p>Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
+</pre>
+
+<ul>
+ <li><code>result</code> contient la valeur retournée <code>true</code> ou <code>false</code>.</li>
+ <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<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>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>birds<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>li</span><span class="punctuation token">&gt;</span></span>perroquet amazone<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>endangered<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>aigle des Philippines<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>pélican<span class="tag token"><span class="tag token"><span class="punctuation token"> blanc&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> birds <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> birds<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span><span class="string token">'.endangered'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Le - '</span> <span class="operator token">+</span> birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">+</span> <span class="string token">'- est en voie de disparition !'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut<code> class </code>de valeur <code>endangered</code>.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Lorsque la chaîne passée en paramêtre défini sélecteur invalide.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne supportent pas <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mais fournissent le support de<code> document.querySelectorAll()</code>, il existe un <em>polyfill</em> :</p>
+
+<pre>if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<p>Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.matches")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li>
+ <li>autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..8569c6878b
--- /dev/null
+++ b/files/fr/web/api/element/mousedown_event/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Element : évènement mousedown'
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - events
+  - mousedown
+translation_of: Web/API/Element/mousedown_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mousedown</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cet évènement est différent de {{domxref("Element/click_event", "click")}}. <code>click</code> est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). <code>mousedown</code> est déclenché dès qu'on appuie sur le bouton.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+
+<h2 class="brush: css" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <thead>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousedown_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..02fcb024bd
--- /dev/null
+++ b/files/fr/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,157 @@
+---
+title: 'Element : évènement mouseenter'
+slug: Web/API/Element/mouseenter_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+  - mouseenter
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</div>
+
+<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p>
+
+<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p>
+
+<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met en forme le <code>div</code> pour le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
+});
+
+function addListItem(text) {
+  // On crée un nouveau noeud text avec le texte fourni
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute l'élément de liste à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html
new file mode 100644
index 0000000000..48425a84f8
--- /dev/null
+++ b/files/fr/web/api/element/mouseleave_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element : évènement mouseleave'
+slug: Web/API/Element/mouseleave_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - mouseleave
+translation_of: Web/API/Element/mouseleave_event
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div>
+Un évènement <code>mouseleave</code> est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <code>&lt;div&gt;</code> le plus haut dans la hiérarchie.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div>
+Un seul évènement <code>mouseout</code> est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p>
+
+<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;Pas encore d'évènement !&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
+});
+
+function addListItem(text) {
+  //  On crée un noeud texte avec le texte passé en argument
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un nouvel élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute le nouvel élément à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseleave_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html
new file mode 100644
index 0000000000..3130ac80aa
--- /dev/null
+++ b/files/fr/web/api/element/mousemove_event/index.html
@@ -0,0 +1,161 @@
+---
+title: 'Element : évènement mousemove'
+slug: Web/API/Element/mousemove_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mousemove
+translation_of: Web/API/Element/mousemove_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p>
+
+<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p>
+
+<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p>
+
+<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p>
+
+<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p>
+
+<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;Dessiner grâce aux évènements de souris&lt;/h1&gt;
+&lt;canvas id="myPics" width="560" height="360"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e =&gt; {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 450)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousemove_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html
new file mode 100644
index 0000000000..ee0921b941
--- /dev/null
+++ b/files/fr/web/api/element/mouseout_event/index.html
@@ -0,0 +1,125 @@
+---
+title: 'Element : évènement mouseout'
+slug: Web/API/Element/mouseout_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseout
+translation_of: Web/API/Element/mouseout_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseout</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils.</span> <code>mouseout</code> est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code>&lt;ul&gt;</code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p>
+
+<p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> est envoyé aux éléments individuels de la liste tandis que <code>mouseleave</code> est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;élément 1&lt;/li&gt;
+  &lt;li&gt;élément 2&lt;/li&gt;
+  &lt;li&gt;élément 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// On affiche la liste en violet lorsque le curseur quitte
+// l'élément &lt;ul&gt;
+test.addEventListener("mouseleave", function( event ) {
+  // on cible la cible de mouseleave
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// On affiche les éléments &lt;li&gt; en orange lorsque la souris
+// les quitte
+test.addEventListener("mouseout", function( event ) {
+  // on cible la cible de mouseout
+  event.target.style.color = "orange";
+
+ // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseout_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html
new file mode 100644
index 0000000000..9cfdbc5ba0
--- /dev/null
+++ b/files/fr/web/api/element/mouseover_event/index.html
@@ -0,0 +1,123 @@
+---
+title: 'Element : évènement mouseover'
+slug: Web/API/Element/mouseover_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseover
+translation_of: Web/API/Element/mouseover_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseover_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html
new file mode 100644
index 0000000000..1faf2195d2
--- /dev/null
+++ b/files/fr/web/api/element/mouseup_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Element : évènement mouseup'
+slug: Web/API/Element/mouseup_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mouseup
+translation_of: Web/API/Element/mouseup_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</span> Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseup_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html
new file mode 100644
index 0000000000..3d79a2089e
--- /dev/null
+++ b/files/fr/web/api/element/name/index.html
@@ -0,0 +1,76 @@
+---
+title: element.name
+slug: Web/API/Element/name
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
+</div>
+
+<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
+var elName = <em>HTMLElement</em>.name;
+
+var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
+var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">&lt;form action="" name="formA"&gt;
+  &lt;input type="text" value="foo"&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  // Obtient une référence au premier élément du formulaire
+  var formElement = document.forms['formA'].elements[0];
+
+  // Lui donne un nom
+  formElement.name = 'inputA';
+
+  // Affiche la valeur du champ
+  alert(document.forms['formA'].elements['inputA'].value);
+
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>Spécification DOM 2 HTML du W3C :</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li>
+</ul>
+
+<p><small>Les traductions ne sont pas normatives.</small></p>
diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html
new file mode 100644
index 0000000000..8bce63b22a
--- /dev/null
+++ b/files/fr/web/api/element/namespaceuri/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.namespaceURI
+slug: Web/API/Element/namespaceURI
+tags:
+  - API
+  - DOM
+  - Element
+  - Espace de noms
+  - Propriétés
+  - URI
+translation_of: Web/API/Element/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.namespaceURI</strong></code> renvoie l'URI d'espace de noms de l'élément ou <code>null</code> si l'élément n'est pas dans un espace de nom.</p>
+
+<div class="note">
+<p>Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre class="brush:js">if (element.localName == "browser" &amp;&amp;
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // c'est un navigateur XUL
+}</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.</p>
+
+<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.</p>
+
+<h2 id="Spécification">Spécification</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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/element/onwheel/index.html
new file mode 100644
index 0000000000..837fda2ba2
--- /dev/null
+++ b/files/fr/web/api/element/onwheel/index.html
@@ -0,0 +1,93 @@
+---
+title: Element.onwheel
+slug: Web/API/Element/onwheel
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onwheel
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété <code>onwheel</code> renvoie le code du gestionnaire d'évènements <code>onwheel</code> de l'élément courrant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.onwheel = function() { .. }</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'évènement <code>wheel</code> est déclenché lorsque l'utilisateur fait défiler le contenu de l'élément.</p>
diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..3c9b834604
--- /dev/null
+++ b/files/fr/web/api/element/outerhtml/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - Privacy
+  - Propriétés
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'attribut <code>outerHTML</code> de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.</p>
+
+<p>Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var content = element.outerHTML;
+
+element.outerHTML = htmlString;</code></pre>
+
+<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3>
+
+<p>La lecture de la valeur de <code>outerHTML</code> renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 class="highlight-spanned" id="Exceptions"><span class="highlight-span">Exceptions</span></h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>outerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite de définir  <code>outerHTML</code>  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// la chaîne '&lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;'
+// est affichée dans la fenêtre console
+</pre>
+
+<p>Remplacer un noeud en modifiant la propriété <code>outerHTML</code> :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Ceci est un div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // affiche "DIV"
+
+d.outerHTML = "&lt;p&gt;Ce paragraphe remplace le div original.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // affiche "P"
+
+// Le div #d ne fait plus partie de l'arbre décrivant le document,
+// le nouveau paragraphe l'ayant remplacé.
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>outerHTML <span class="operator token">=</span> <span class="string token">"&lt;div class=\"test\"&gt;test&lt;/div&gt;"</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// output: "&lt;div&gt;&lt;/div&gt;"</span></code></pre>
+
+<p>Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété <code>outerHTML</code> a été modifiée contiendra toujours une référence à l'élément initial :</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // affiche: "P"
+p.outerHTML = "&lt;div&gt;Ce div remplace un paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // toujours "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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 Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}</li>
+ <li>Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..f82ba6bf2d
--- /dev/null
+++ b/files/fr/web/api/element/prefix/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - Préfixe
+translation_of: Web/API/Element/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.prefix</strong></code> renvoie le préfixe d'espace de noms de l'élément spécifié ou <code>null</code> si aucun préfixe n'est précisé.</p>
+
+<div class="note">
+<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les logs "x" suivants à la console.</p>
+
+<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.</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("DOM4", "#dom-element-prefix", "Element.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..1d3af7beeb
--- /dev/null
+++ b/files/fr/web/api/element/queryselector/index.html
@@ -0,0 +1,184 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+tags:
+  - API
+  - CSS
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - Sélecteurs
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>est un groupe de <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteurs</a> à <span id="result_box" lang="fr"><span>faire correspondre aux éléments descendants du {{domxref("Element")}} <code>baseElement</code> ;</span> <span>cette syntaxe CSS doit être valide ou une exception SyntaxError se produit.</span> <span>Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</span></span></dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><span id="result_box" lang="fr"><span>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>sélectors</code> spécifié.</span> <span>La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris <code>baseElement</code> et ses descendants;</span> <span>En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels.</span> <span>Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>.</span> <span>La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</span></span></p>
+
+<p><span lang="fr"><span>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</span></span></p>
+
+<h3 id="Exceptions"><span lang="fr"><span>Exceptions</span></span></h3>
+
+<dl>
+ <dt>SyntaxError</dt>
+ <dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Dans ce premier exemple, est retourné le premier élement {{HTMLElement("style")}} dans le corps du document HTML qui, soit n'a pas de type, soit a le type <code>text/css</code>:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="Notes" name="Notes">La hiérarchie entière compte</h3>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des <code>selectors</code>, de sorte que les niveaux en dehors du </span></span> <code>baseElement</code> <span lang="fr"><span> spécifié sont toujours pris en compte lors de la recherche des correspondances.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<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>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Original content<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</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>
+    inside paragraph
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>inside span<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+    inside paragraph
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<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>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> baseElement <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>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span>
+         <span class="punctuation token">(</span>baseElement<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div span"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Le résultat ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample('The_entire_hierarchy_counts', 600, 160)}}</p>
+
+<h3 id="Notes" name="Notes">Plus d'exemples</h3>
+
+<p>Voir {{domxref("Document.querySelector()")}} pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>
+
+<h2 id="Notes" name="Notes">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','#dom-parentnode-queryselectorall','querySelector()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>9<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> est pris en charge dans IE 8, mais uniquement pour les sélecteurs CSS 2.1.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Exemples de code pour querySelector</a></li>
+ <li>autres méthodes qui prennent des sélecteurs : {{domxref("element.closest()")}} et {{domxref("element.matches()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..08c0e64631
--- /dev/null
+++ b/files/fr/web/api/element/queryselectorall/index.html
@@ -0,0 +1,231 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode  <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code> </dt>
+ <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.</p>
+</div>
+
+<h3 id="Example" name="Example">Valeur retournée</h3>
+
+<p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
+</div>
+
+<h3 id="Example" name="Example">Exception</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3>
+
+<p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code>  avec une classe  "<code>note</code>" ou  "<code>alert</code>" :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.note, div.alert"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <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">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <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">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+
+<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (<em>array</em>). Si le tableau est vide (sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+
+<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p><code>queryselectorAll</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</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>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<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>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<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>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<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>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <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">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>
+
+<p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code>&lt;div&gt; </code>avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément sur lequel la recherche est effectuée <code>(".select")</code>. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+
+<p><span lang="fr"><span>La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <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">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>norme actuelle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans Opera 15+ en activant les balises "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/element/releasepointercapture/index.html b/files/fr/web/api/element/releasepointercapture/index.html
new file mode 100644
index 0000000000..be7f127da3
--- /dev/null
+++ b/files/fr/web/api/element/releasepointercapture/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.releasePointerCapture()
+slug: Web/API/Element/releasePointerCapture
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/releasePointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Relâche (arrête) la capture de pointeur précédemment définie pour un <em>pointer</em> ({{domxref("PointerEvent")}}) spécifique.</p>
+
+<p>Voir la méthode <strong>{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}}</strong> pour une description de <em>pointer capture </em>et la façon de le définir pour un élément particulier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>releasePointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Si <code>pointerId</code> ne correspond à aucun pointeur actif, cette méthode renvoie <code>void</code> (<em>vide</em>) et déclenche une {{domxref("DOMException")}} avec le nom <code>InvalidPointerId</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // L'élément "target" va recevoir/capturer d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Relâche la capture du pointeur
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Enregistre les gestionnaires du pointeur
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A été pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..1a1d2fde8f
--- /dev/null
+++ b/files/fr/web/api/element/removeattribute/index.html
@@ -0,0 +1,51 @@
+---
+title: element.removeAttribute
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Suppression
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>);
+</pre>
+
+<ul>
+ <li><code>nomAttribut</code> est une chaîne de caractères représentant le nom de l'attribut à enlever de l'<em>element</em> .</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// avant : &lt;div id="div1" align="left" width="200"&gt;
+document.getElementById("div1").removeAttribute("align");
+// maintenant : &lt;div id="div1" width="200"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Il vaut mieux utiliser <code>removeAttribute</code> plutôt que de définir la valeur de l'attribut à <code>null</code> avec <a href="fr/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.</p>
+
+<p><code>removeAttribute</code> ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html
new file mode 100644
index 0000000000..ebee4f2e03
--- /dev/null
+++ b/files/fr/web/api/element/removeattributenode/index.html
@@ -0,0 +1,45 @@
+---
+title: element.removeAttributeNode
+slug: Web/API/Element/removeAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>)
+</pre>
+
+<ul>
+ <li><code>attributeNode</code> est le nœud <code>Attr</code> à enlever.</li>
+ <li><code>removedAttr</code> est le nœud <code>Attr</code> qui vient d'être enlevé.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">// <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align est maintenant supprimé : <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.</p>
+
+<p>Il n'y a pas de <code>removeAttributeNodeNS</code> (contrairement à la paire <code>setAttributeNode</code> et <code>setAttributeNodeNS</code> pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  <code>removeAttributeNode</code> n'a pas cette exigence.  <code>removeAttributeNode</code> peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html
new file mode 100644
index 0000000000..d7ef80e848
--- /dev/null
+++ b/files/fr/web/api/element/removeattributens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.removeAttributeNS
+slug: Web/API/Element/removeAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNS</code> supprime l'attribut spécifié d'un élément.</p>
+
+<p>{{ Fx_minversion_inline(3) }} Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne qui contient l'espace de noms de l'attribut.</li>
+ <li><code>attrName</code> est une chaîne qui nomme l'attribut à supprimer du noeud en cours.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" /&gt;
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// l'élément est devenu : &lt;div id="div1" width="200px" /&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..500c27e029
--- /dev/null
+++ b/files/fr/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,123 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+tags:
+  - Méthode
+  - Plein écran
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>La méthode <code><strong>Element.requestFullscreen()</strong></code> envoie une requête asynchrone pour que l'élément soit affiché en plein écran.</p>
+
+<p>Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.</p>
+
+<p>Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.</p>
+
+<div class="note">
+<p>Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.requestFullscreen();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Avant d'appeler <code>requestFullScreen()</code>, mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).</p>
+
+<p>tbd</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("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Également implémenté en tant que <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implémenté en tant que <code>mozRequestFullScreen</code> (remarquez le S majuscule pour <em>Screen</em>). Avant Firefox 44, Gecko autorisait incorrectement les éléments présents dans une  {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} de demander, et d'obtenir, le mode plein écran. Dans les versions 44 et supérieures de Firefox, ceci a été corrigé : seuls les éléments dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran.</p>
+
+<p>[3] Voir la <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentation sur MSDN</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..64aa93f7ae
--- /dev/null
+++ b/files/fr/web/api/element/scrollheight/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<p>L'attribut en lecture seule <strong><code>element.scrollHeight</code></strong> est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur <code>scrollHeight</code> est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.</p>
+
+<div class="note">
+<p>Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+</pre>
+
+<p><code>intElemScrollHeight</code> est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. <code>scrollHeight</code> est une propriété en lecture seule.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong><strong style="">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Problèmes et solutions</h2>
+
+<h3 id="Déterminer_si_un_élément_a_complètement_été_défilé">Déterminer si un élément a complètement été défilé</h3>
+
+<p>L'expression suivante renvoie <code>true</code> si l'élément est à la fin du défilement, <code>false</code> si ça ne l'est pas.</p>
+
+<pre class="brush: js">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p>Associée à l'événement <a href="/fr/docs/DOM/element.onscroll">element.onscroll</a>, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés <a href="/fr/docs/DOM/element.scrollTop">element.scrollTop</a> et <a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a>. Par exemple :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Merci." :
+    "Veuillez faire défiler la page et lire le texte qui suit.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p><a href="https://developer.mozilla.org/files/4589/readme-example.html">Voir l'exemple en action</a></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p><code>scrollHeight</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | Webkit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Dans les versions inférieures à Firefox 21 :</strong> quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété <code>scrollHeight</code> est égale à sa propriété <code>clientHeight</code>. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS<code> {{ cssxref("overflow") }}</code> de l'élément a pour valeur <code>visible</code>.</p>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li><a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a></li>
+ <li><a href="/fr/docs/DOM/element.offsetHeight">element.offsetHeight</a></li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..bdf1b8d8e5
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoview/index.html
@@ -0,0 +1,86 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollIntoView();
+element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen
+element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{ optional_inline() }}</dt>
+ <dd>
+ <p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p>
+
+ <ul>
+  <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li>
+  <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet qui a les propriétés suivantes :</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Définit l'animation de transition qui peut être <code>"auto"</code>, <code>"instant"</code> ou <code>"smooth"</code>. Par défaut : <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>L'une des options  <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou<code>"nearest"</code>. Par défaut : <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>L'une des options <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou <code>"nearest"</code>. Par défaut : <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html
new file mode 100644
index 0000000000..2524b1cf9a
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html
@@ -0,0 +1,97 @@
+---
+title: Element.scrollIntoViewIfNeeded()
+slug: Web/API/Element/scrollIntoViewIfNeeded
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoViewIfNeeded
+---
+<div>{{APIRef("DOM")}}{{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoViewIfNeeded()</strong></code> fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard <a href="/en-US/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>À faire.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>opt_center</code></em></dt>
+ <dd>Est une valeur {{jsxref("Boolean")}} facultative avec la valeur <code>true</code> par défaut :
+ <ul>
+  <li>Si <code>true</code> (<em>vrai</em>), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.</li>
+  <li>Si <code>false</code> (<em>faux</em>), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>À faire</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{bug(403510)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (<span class="short_text" id="result_box" lang="fr"><span>demande de fonctionnalité pour un équivalent standardisé à</span></span> <code>scrollIntoViewIfNeeded</code>)</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..da44c622ff
--- /dev/null
+++ b/files/fr/web/api/element/scrollleft/index.html
@@ -0,0 +1,71 @@
+---
+title: element.scrollLeft
+slug: Web/API/Element/scrollLeft
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">// Obtient le nombre de pixels défilés
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> est un entier représentant le nombre de pixels dont <var>element</var> a été défilé vers la gauche.</p>
+
+<pre class="eval">// Définit le nombre de pixels défilés
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><strong>scrollLeft</strong> peut être n'importe quelle valeur entière, cependant :</p>
+
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur inférieure à 0, <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+&lt;/script&gt;
+
+&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;
+&lt;script type="text/javascript"&gt;
+for (var i=0; i&lt;100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar&lt;br&gt;');
+}
+&lt;/script&gt;
+&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Défile de 50 pixels"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+&gt;
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollleftmax/index.html b/files/fr/web/api/element/scrollleftmax/index.html
new file mode 100644
index 0000000000..29c1026e81
--- /dev/null
+++ b/files/fr/web/api/element/scrollleftmax/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.scrollLeftMax
+slug: Web/API/Element/scrollLeftMax
+translation_of: Web/API/Element/scrollLeftMax
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}}</p>
+
+<p>La propriété non modifiable  <code><strong>Element.scrollLeftMax</strong></code> renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var <em>pxl</em> = <em>elt</em>.scrollLeftMax;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTopMax")}} renvoie la distance restante de défilement vers le haut de l'élément.</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html
new file mode 100644
index 0000000000..916beabbcb
--- /dev/null
+++ b/files/fr/web/api/element/scrollto/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.scrollTo()
+slug: Web/API/Element/scrollTo
+tags:
+  - API
+  - Element
+  - Méthode
+  - Reference
+  - scrollTo
+translation_of: Web/API/Element/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p>La méthode <code><strong>scrollTo()</strong></code><strong> </strong>de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+element.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>x-coord</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
+ <li><code>y-coord</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
+</ul>
+
+<p>- ou -</p>
+
+<ul>
+ <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>En utilisant des coordonnées :</p>
+
+<pre class="brush:js">element.scrollTo(0, 1000);
+</pre>
+
+<p>Ou en utilisant <code>options</code> :</p>
+
+<pre class="brush: js">element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Specifications" name="Specifications">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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.Element.scrollTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Window.scrollTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..dfd5c0f31a
--- /dev/null
+++ b/files/fr/web/api/element/scrolltop/index.html
@@ -0,0 +1,55 @@
+---
+title: element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Définit ou obtient le nombre de pixels dont le contenu de l'élément a défilé vers le haut.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Obtient le nombre de pixels défilés</span>
+<span style="color: rgb(128, 0, 128);">var</span> <var> intElemScrollTop</var> = <var>element</var>.scrollTop;
+</pre>
+<p><var>intElemScrollTop</var> est un entier correspondant au nombre de pixels dont le contenu d'<var>element</var> a défilé vers le haut.</p>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Définit le nombre de pixels défilés</span>
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+<p><strong>scrollTop</strong> peut avoir n'importe quelle valeur entière, cependant :</p>
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur inférieure à 0, <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollTop</code> est mis au maximum.</li>
+</ul>
+<h3 id="Description" name="Description">Description</h3>
+<p>L'attribut <b>scrollTop</b> d'un élément est la mesure de la distance entre le haut de cet élément et le point le plus haut de son contenu visible.</p>
+<p>Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur <code>scrollTop</code> vaut 0.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p>
+<p>Il n'est pas possible d'avoir une démonstration interactive dans cette référence.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p><code>scrollTop</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>scrollTop</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle la distance entre le haut physique d'un élément et son affichage défilant.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">
+  <i>
+   scrollTop definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollTop", "pl": "pl/DOM/element.scrollTop" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..92fbdc41e1
--- /dev/null
+++ b/files/fr/web/api/element/scrollwidth/index.html
@@ -0,0 +1,33 @@
+---
+title: element.scrollWidth
+slug: Web/API/Element/scrollWidth
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollWidth
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p><b>scrollWidth</b> est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;
+</pre>
+<p><var>xScrollWidth</var> est la largeur du contenu d'<var>element</var> en pixels.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;-FooBar-FooBar-FooBar&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);"&gt;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Il n'y a pas de spécification du W3C pour <b>scrollWidth</b>.</p>
+<p>Un brouillon de l'éditeur existe cependant : <a class="external" href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">
+  <i>
+   scrollWidth</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "pl": "pl/DOM/element.scrollWidth" } ) }}</p>
diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html
new file mode 100644
index 0000000000..b816f249bc
--- /dev/null
+++ b/files/fr/web/api/element/select_event/index.html
@@ -0,0 +1,77 @@
+---
+title: select
+slug: Web/API/Element/select_event
+translation_of: Web/API/Element/select_event
+---
+<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [<cite><a class="informative" href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a></cite>], les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p>
+
+<h2 id="Info_générale">Info générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent si généré depuis une interface utilisateur, Event sinon.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Remonte</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élément</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par Défault</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">&lt;input id="test" type="text" value="Sélectionnez-moi !" /&gt;
+&lt;script&gt;
+  var elem = document.getElementById('test');
+  elem.addEventListener('select', function() {
+    alert('La sélection a changé !');
+  }, false);
+&lt;/script&gt;</pre>
diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..9ba4ac1759
--- /dev/null
+++ b/files/fr/web/api/element/setattribute/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthode
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.</p>
+
+<p>Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand <code>setAttribute()</code> est appelé sur un élément HTML dans document HTML.</dd>
+ <dt><code>value</code></dt>
+ <dd>une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.</dd>
+</dl>
+
+<p>Les attributs booléens sont considérés être <code>true</code> (<em>vrai</em>) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (<code>""</code>) dans <code>value</code> (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.</p>
+
+<p>Puisque la valeur spécifiée est convertie en chaîne, spécifier <code>null</code> ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, <code>setAttribute()</code> est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (<em>bouton</em>).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");</pre>
+
+<p>Ceci démontre 2 choses :</p>
+
+<ul>
+ <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>L'utilisation de <code>setAttribute()</code> pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez <code>Element.value</code> à la place de <code>Element.setAttribute()</code>.</p>
diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html
new file mode 100644
index 0000000000..efee5a67fe
--- /dev/null
+++ b/files/fr/web/api/element/setattributenode/index.html
@@ -0,0 +1,49 @@
+---
+title: element.setAttributeNode
+slug: Web/API/Element/setAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/setAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNode</code><code>()</code>  ajoute un nouveau nœud <code>Attr</code> à l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var replacedAttr = element.setAttributeNode(attribute);</code></pre>
+
+<ul>
+ <li><code>attribute</code> est le nœud <code>Attr</code> à définir sur l'élément.</li>
+ <li><code>replacedAttr</code> est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" align="left"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// retourne: `left'
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.</p>
+
+<p>Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}}  pour modifier la valeur d'un attribut d'élément.</p>
+
+<p>{{DOMAttributeMethods()}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li>
+</ul>
diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html
new file mode 100644
index 0000000000..6e62b29873
--- /dev/null
+++ b/files/fr/web/api/element/setattributenodens/index.html
@@ -0,0 +1,53 @@
+---
+title: element.setAttributeNodeNS
+slug: Web/API/Element/setAttributeNodeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNodeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNodeNS</code> ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>)
+</pre>
+
+<dl>
+ <dt><code>replacedAttr</code></dt>
+ <dd>Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.</dd>
+ <dt><code>attributeNode</code></dt>
+ <dd>Un nœud <code>Attr</code>.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" special-align="utterleft"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+d2.setAttributeNodeNS(a);
+
+alert(d2.attributes[1].value) // renvoie : "utterleft"
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.</p>
+
+<p><span id="result_box" lang="fr"><span>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html
new file mode 100644
index 0000000000..d5b1699a1b
--- /dev/null
+++ b/files/fr/web/api/element/setattributens/index.html
@@ -0,0 +1,45 @@
+---
+title: element.setAttributeNS
+slug: Web/API/Element/setAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNS</code> ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.setAttributeNS(
+namespace,
+name,
+value)</code></pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne spécifiant l'espace de noms de l'attribut.</li>
+ <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; <span id="result_box" lang="fr"><span>c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</span></span></li>
+ <li><code>value</code> est la valeur chaîne désirée pour le nouvel attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var d = document.getElementById("d1");
+d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<p><code>setAttributeNS</code>  <span id="result_box" lang="fr"><span>est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire</span></span> <code>"namespace:localname"</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname">DOM-Level-2-Core: glossary qualified name</a></li>
+</ul>
diff --git a/files/fr/web/api/element/setcapture/index.html b/files/fr/web/api/element/setcapture/index.html
new file mode 100644
index 0000000000..28c60fdf20
--- /dev/null
+++ b/files/fr/web/api/element/setcapture/index.html
@@ -0,0 +1,87 @@
+---
+title: Element.setCapture()
+slug: Web/API/Element/setCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Elements
+  - Méthodes
+  - Souris
+translation_of: Web/API/Element/setCapture
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p>
+
+<p>Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.setCapture(<em>retargetToElement</em>);
+</pre>
+
+<dl>
+ <dt><code>retargetToElement</code></dt>
+ <dd>Si la valeur est <code>true</code> (<em>vrai</em>), tous les évènements sont ciblés directement vers cet élément ; si elle est <code>false</code> (<em>faux</em>), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mouse Capture Example&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      box-shadow: black 2px 2px;
+    }
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      //e.target.setCapture(); // cette méthode doit être définie
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+  &lt;p&gt;This is an example of how to use mouse capture on elements in Gecko 2.0.&lt;/p&gt;
+  &lt;p&gt;&lt;a id="myButton" href="#"&gt;Test Me&lt;/a&gt;&lt;/p&gt;
+  &lt;div id="output"&gt;No events yet&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/domref/mousecapture.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Basé sur l'implémentation Internet Explorer.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.releaseCapture()") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html
new file mode 100644
index 0000000000..76626ad6a4
--- /dev/null
+++ b/files/fr/web/api/element/setpointercapture/index.html
@@ -0,0 +1,144 @@
+---
+title: Element.setPointerCapture()
+slug: Web/API/Element/setPointerCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/setPointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La <em>Pointer capture</em> (<em>capture de pointeur</em>) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).</p>
+
+<p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p>
+
+<div class="note">Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie <code>void</code> et lance une {{domxref("DOMException")}} nommée <code>InvalidPointerId</code> si <code>pointerId</code> ne correspond à aucun des pointeurs actifs.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //L'élément cible  ('target') recevra/capturera d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par  défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.releasePointerCapture")}}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/tabstop/index.html b/files/fr/web/api/element/tabstop/index.html
new file mode 100644
index 0000000000..95951748e6
--- /dev/null
+++ b/files/fr/web/api/element/tabstop/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.tabStop
+slug: Web/API/Element/tabStop
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - touche tabulation
+translation_of: Web/API/Element/tabStop
+---
+<p>{{APIRef("DOM")}}{{non-standard_header}}{{obsolete_header}}</p>
+
+<p>La propriété <strong><code>tabStop</code></strong> de l'interface {{domxref("Element")}} renvoie un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir le focus d'entrée via la touche de tabulation. Si l'élément spécifié est un onglet shadow, la navigation est déléguée à ses enfants.</p>
+
+<p>La propriété a été proposée pour ajouter une fonctionnalité de tabulation aux éléments personnalisés. Alors qu'avec la propriété {{domxref("HTMLElement.tabIndex", "tabIndex")}} existante, il est nécessaire de spécifier un ordre pour que la touche tabulation soit utilisable sur un élément. La propriété <code>tabStop</code> devait découpler la propriété d'utilisation de la tabulation de l'index. Après les retours d'expérience, cette propriété a été supprimée de <a href="https://docs.google.com/document/d/1k93Ez6yNSyWQDtGjdJJqTBPmljk9l2WS3JTe5OHHB50/edit">documentation de conception</a> (en) et remplacée par {{domxref("ShadowRoot.delegatesFocus")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var isTabStop = element.tabStop;
+element.tabStop = (true|false);
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..80be64da69
--- /dev/null
+++ b/files/fr/web/api/element/tagname/index.html
@@ -0,0 +1,121 @@
+---
+title: element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API/Element/tagName
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété <code>tagName</code> est <code>"IMG"</code> (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = element.tagName;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :</p>
+
+<ul>
+ <li>Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, <code>tagName</code> appelé sur un élément {{HTMLElement("div")}} renvoie <code>"DIV"</code>.</li>
+ <li>Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette <code>"&lt;SomeTag&gt;"</code>, alors la valeur de la propriété <code>tagName</code> est <code>"SomeTag"</code>.</li>
+ <li>Pour les objets {{domxref("Element")}} , la valeur de l'étiquette de nom est la même que la valeur de la propriété {{domxref("Node.nodeName", "nodeName")}} héritée de {{domxref("Node")}}.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="eval">&lt;span id="naissance"&gt;Lorsque je suis né…&lt;/span&gt;
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<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">getElementById</span><span class="punctuation token">(</span><span class="string token">"naissance"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>span<span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>En XHTML (ou tout autre format XML), <span id="result_box" lang="fr"><span>la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules.</span> <span>En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>