diff options
Diffstat (limited to 'files/fr/web/api/element')
65 files changed, 682 insertions, 606 deletions
diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html index 52da07fd40..acdf64b4b6 100644 --- a/files/fr/web/api/element/animate/index.html +++ b/files/fr/web/api/element/animate/index.html @@ -10,32 +10,29 @@ translation_of: Web/API/Element/animate <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> +<p><strong>Note :</strong> 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> + <dd><p>Un <a href="/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> + <dd><p>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>:</p> <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> + <dd>Une propriété unique pour <code>animate()</code>: une <a href="/en-US/docs/Web/API/DOMString"><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> + </dd> </dl> +<div>{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</div> + <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> @@ -52,13 +49,11 @@ translation_of: Web/API/Element/animate <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>. + <dd><p>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>.</p> <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> diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html index 97ac7f7019..cde6764b54 100644 --- a/files/fr/web/api/element/attachshadow/index.html +++ b/files/fr/web/api/element/attachshadow/index.html @@ -5,11 +5,11 @@ 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> +<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="/en-US/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); </pre> <h3 id="Paramètres">Paramètres</h3> diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html index ad9ff22405..14c104bcfa 100644 --- a/files/fr/web/api/element/attributes/index.html +++ b/files/fr/web/api/element/attributes/index.html @@ -11,9 +11,9 @@ 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> +<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. 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.</p> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> <pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; </pre> @@ -29,50 +29,50 @@ var attr = para.attributes; <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"><!DOCTYPE html></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">>Exemple d'attributs</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></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">>=</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">"->"</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"></</span>script</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>Sample Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<p>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.<br> + 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.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Exemple d'attributs</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // D'abord, vérifier que le "paragraph" a quelques attributs + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "No attributes to show"; + } + } + </script> + </head> + +<body> + <p id="paragraph" >Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="Show first attribute name and value" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> <p> </p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -112,5 +112,5 @@ var attr = para.attributes; <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> + <li>Considérations de compatibilité entre navigateurs : sur <a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li> </ul> diff --git a/files/fr/web/api/element/childelementcount/index.html b/files/fr/web/api/element/childelementcount/index.html index 02b2f82a5b..a23de9fbaa 100644 --- a/files/fr/web/api/element/childelementcount/index.html +++ b/files/fr/web/api/element/childelementcount/index.html @@ -18,7 +18,7 @@ original_slug: Web/API/ParentNode/childElementCount <p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p> <div class="note"> -<p>Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br> +<p><strong>Note :</strong> Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p> </div> @@ -36,30 +36,30 @@ original_slug: Web/API/ParentNode/childElementCount <h2 id="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>childElementCount <span class="operator token">></span> <span class="number token">0</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> +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.childElementCount > 0) { + // faire quelque chose +}</pre> <h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 & IE9 & Safari</h2> <p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p> -<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>constructor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>constructor <span class="operator token">&&</span> - constructor<span class="punctuation token">.</span>prototype <span class="operator token">&&</span> - constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>childElementCount <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'childElementCount'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</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> count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> node<span class="punctuation token">,</span> nodes <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>node <span class="operator token">=</span> nodes<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> count<span class="operator token">++</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> count<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> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.childElementCount == null) { + Object.defineProperty(constructor.prototype, 'childElementCount', { + get: function() { + var i = 0, count = 0, node, nodes = this.childNodes; + while (node = nodes[i++]) { + if (node.nodeType === 1) count++; + } + return count; + } + }); + } +})(window.Node || window.Element);</pre> <h2 id="Spécification">Spécification</h2> @@ -93,7 +93,5 @@ original_slug: Web/API/ParentNode/childElementCount <ul> <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div> - </li> + <li>Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</li> </ul> diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html index 569d6a92e7..62a8048b85 100644 --- a/files/fr/web/api/element/classlist/index.html +++ b/files/fr/web/api/element/classlist/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/Element/classList <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> +<h2 id="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> +<p><em>elementClasses</em> est une <a href="/en-US/docs/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> @@ -34,7 +34,7 @@ translation_of: Web/API/Element/classList <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> + <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie <code>false</code>, dans le cas inverse, ajoute 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> @@ -44,41 +44,41 @@ translation_of: Web/API/Element/classList <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> +<pre class="brush: js">const div = document.createElement('div'); +div.className = 'foo'; -<span class="comment token">// notre point de départ: <div class="foo"></div></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> +// notre point de départ: <div class="foo"></div> +console.log(div.outerHTML); -<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> +// utiliser l'API classList pour supprimer et ajouter des classes +div.classList.remove("foo"); +div.classList.add("anotherclass"); -<span class="comment token">// <div class="anotherclass"></div></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> +// <div class="anotherclass"></div> +console.log(div.outerHTML); -<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> +// si "visible" est défini, le supprimer, sinon, l'ajouter +div.classList.toggle("visible"); -<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"><</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> +// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10 +div.classList.toggle("visible", i < 10 ); -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> +console.log(div.classList.contains("foo")); -<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> +// ajouter ou supprimer plusieurs classes +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); -<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> +// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); -<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> +// remplacer la classe "foo" par la classe "bar" +div.classList.replace("foo", "bar");</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> +<p><strong>Note :</strong> 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> diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html index 3796f5c7f0..125374a9db 100644 --- a/files/fr/web/api/element/classname/index.html +++ b/files/fr/web/api/element/classname/index.html @@ -11,9 +11,9 @@ 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> +<p>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é.</p> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> <pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; <var>elementNodeReference</var>.className = <var>cName</var>;</pre> @@ -22,17 +22,17 @@ translation_of: Web/API/Element/className <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> +<h2 id="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> +<pre class="brush: js">let elm = document.getElementById('item'); -<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> +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> @@ -41,7 +41,7 @@ translation_of: Web/API/Element/className <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> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html index 69d42979d4..8e18c242d9 100644 --- a/files/fr/web/api/element/click_event/index.html +++ b/files/fr/web/api/element/click_event/index.html @@ -11,7 +11,7 @@ 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> +<p>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.</p> <table class="properties"> <tbody> diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html index 74de1b77da..72f3d71689 100644 --- a/files/fr/web/api/element/clientleft/index.html +++ b/files/fr/web/api/element/clientleft/index.html @@ -24,13 +24,44 @@ browser-compat: api.Element.clientLeft var left = element.clientLeft; </pre> -<h2 id="example">Exemple</h2> +<h2 id="exemple">Exemple</h2> -<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> <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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> - <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">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> -</div> +<p>Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure <code>border-left</code> noire de 24px. La valeur de <code>clientLeft</code> correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.</p> + +<h3>HTML</h3> + +<pre class="brush: html"> +<div id="container"> + <div id="contained"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + </div> +</div> +</pre> + +<h3>CSS</h3> + +<pre class="brush: css"> + +#container { + margin: 3rem; + background-color: rgb(255, 255, 204); + border: 4px dashed black; +} + +#contained { + margin: 1rem; + border-left: 24px black solid; + padding: 0px 28px; + overflow: auto; + background-color: white; +} +</pre> + +<h3>Résultat</h3> + +{{EmbedLiveSample("Exemple", 400, 350)}} <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html index 6510d9fab8..9a3bd1012c 100644 --- a/files/fr/web/api/element/clientwidth/index.html +++ b/files/fr/web/api/element/clientwidth/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/Element/clientWidth <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> +<pre class="syntaxbox">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> +<p><img src="dimensions-client.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html index 6854567823..61a0e9f93f 100644 --- a/files/fr/web/api/element/closest/index.html +++ b/files/fr/web/api/element/closest/index.html @@ -66,7 +66,7 @@ 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> +<h2 id="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> @@ -133,10 +133,6 @@ if (!Element.prototype.closest) <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> + <li><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></li> + <li>Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</li> </ul> diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html index 564090bd5b..546f6b3c5f 100644 --- a/files/fr/web/api/element/compositionend_event/index.html +++ b/files/fr/web/api/element/compositionend_event/index.html @@ -33,7 +33,7 @@ original_slug: Web/Events/compositionend <h3 id="Html">Html</h3> -<pre class="brush: html notranslate"><div class="control"> +<pre class="brush: html"><div class="control"> <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> @@ -44,10 +44,7 @@ original_slug: Web/Events/compositionend <button class="clear-log">Effacer</button> </div></pre> -<div class="hidden"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -79,11 +76,10 @@ kbd { border: 1px solid black; } </pre> -</div> <h3 id="JS">JS</h3> -<pre class="brush: js notranslate">const inputElement = document.querySelector('input[type="text"]'); +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html index 4cb57ef36e..4de27018bc 100644 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ b/files/fr/web/api/element/compositionstart_event/index.html @@ -60,10 +60,7 @@ inputElement.addEventListener('compositionstart', (event) => { <button class="clear-log">Clear</button> </div></pre> -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -95,7 +92,6 @@ kbd { border: 1px solid black; } </pre> -</div> <h4 id="JS">JS</h4> diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html index 76096e954f..28b416e62e 100644 --- a/files/fr/web/api/element/contextmenu_event/index.html +++ b/files/fr/web/api/element/contextmenu_event/index.html @@ -12,7 +12,9 @@ translation_of: Web/API/Element/contextmenu_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'évènement <strong><code>contextmenu</code></strong> est déclenché à 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>L'évènement <strong><code>contextmenu</code></strong> est déclenché à 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.</p> + +<p>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> diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html index 6617dfc675..d4b370823a 100644 --- a/files/fr/web/api/element/copy_event/index.html +++ b/files/fr/web/api/element/copy_event/index.html @@ -9,23 +9,23 @@ original_slug: Web/Events/copy <h2 id="Informations_générales">Informations générales</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="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</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;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Voir ce-dessous</dd> + <dt>Spécification</dt> + <dd><a href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> + <dt>Interface</dt> + <dd>{{domxref("ClipboardEvent")}}</dd> + <dt>Propagation</dt> + <dd>Oui</dd> + <dt>Annulable</dt> + <dd>Oui</dd> + <dt>Cible</dt> + <dd>{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd> + <dt>Action par défaut</dt> + <dd>Voir ce-dessous</dd> </dl> <p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p> -<pre class="javascript">document.addEventListener('copy', function(e){ +<pre class="brush: js">document.addEventListener('copy', function(e){ e.clipboardData.setData('text/plain', 'Hello, world!'); e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html index 431a961e5f..9f82b49bd9 100644 --- a/files/fr/web/api/element/dblclick_event/index.html +++ b/files/fr/web/api/element/dblclick_event/index.html @@ -12,7 +12,7 @@ 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>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).</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> diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html index 474f4839d3..8c17b86401 100644 --- a/files/fr/web/api/element/error_event/index.html +++ b/files/fr/web/api/element/error_event/index.html @@ -10,26 +10,23 @@ tags: translation_of: Web/API/Element/error_event original_slug: Web/Events/error --- -<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée <span id="result_box" lang="fr"><span>;</span> <span>les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</span></span></p> +<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</p> <h2 id="Informations_générales">Informations générales</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-error">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,<br> - {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> et<br> - sinon {{domxref("Event")}}.</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</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;">{{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> - <dd style="margin: 0 0 0 120px;"> </dd> + <dt>Spécification</dt> + <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd> + <dt>Interface</dt> + <dd>{{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> et sinon {{domxref("Event")}}.</dd> + <dt>Propagation</dt> + <dd>Non</dd> + <dt>Annulable</dt> + <dd>Non</dd> + <dt>Cible</dt> + <dd>{{domxref("Element")}}</dd> + <dt>Action par défaut</dt> + <dd>Aucune</dd> </dl> <h2 id="Propriétés">Propriétés</h2> @@ -45,28 +42,28 @@ original_slug: Web/Events/error <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><a href="/en-US/docs/Web/API/EventTarget"><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><a href="/en-US/docs/Web/API/DOMString"><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><a href="/en-US/docs/Web/API/Boolean"><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><a href="/en-US/docs/Web/API/Boolean"><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> + <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> </tr> <tr> <td><code>detail</code> {{readonlyInline}}</td> diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html index 6310410cdd..4930d87a2e 100644 --- a/files/fr/web/api/element/focusin_event/index.html +++ b/files/fr/web/api/element/focusin_event/index.html @@ -4,13 +4,13 @@ slug: Web/API/Element/focusin_event translation_of: Web/API/Element/focusin_event original_slug: Web/Events/focusin --- -<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p> +<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p> <h2 id="Informations_générales">Informations générales</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-focusIn">DOM L3</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html index 2d20d5050c..382060c404 100644 --- a/files/fr/web/api/element/focusout_event/index.html +++ b/files/fr/web/api/element/focusout_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/focusout <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-focusout">DOM L3</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html index 5c50b4cd64..e0aa50f459 100644 --- a/files/fr/web/api/element/getattribute/index.html +++ b/files/fr/web/api/element/getattribute/index.html @@ -14,9 +14,9 @@ translation_of: Web/API/Element/getAttribute <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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval notranslate"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>) +<pre class="eval"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>) </pre> <p>où</p> @@ -26,7 +26,7 @@ translation_of: Web/API/Element/getAttribute <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> +<h2 id="Exemple">Exemple</h2> <p>Soit l'HTML :</p> @@ -34,7 +34,7 @@ translation_of: Web/API/Element/getAttribute <p>Exemple de JavaScript :</p> -<pre class="eval notranslate">const div1 = document.getElementById("div1"); +<pre class="eval">const div1 = document.getElementById("div1"); //=> <div id="div1">Hi Champ!</div> const attributID = div1.getAttribute("id"); @@ -44,7 +44,7 @@ cont alignement = div1.getAttribute("align"); //=> null </pre> -<h2 id="Notes" name="Notes">Description</h2> +<h2 id="Notes">Description</h2> <h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3> @@ -58,14 +58,14 @@ cont alignement = div1.getAttribute("align"); <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"); +<pre class="brush: js example-bad">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> +<pre class="brush: js">let nonce = script.nonce;</pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -80,6 +80,6 @@ cont alignement = div1.getAttribute("align"); </tbody> </table> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Compatibilité des navigateurs</h2> +<h2 id="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 index 0fac66f4b1..d99f4465fe 100644 --- a/files/fr/web/api/element/getattributenames/index.html +++ b/files/fr/web/api/element/getattributenames/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/Element/getAttributeNames <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> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">// Itérer sur les attributs de l'élément for(let name of element.getAttributeNames()) @@ -32,7 +32,7 @@ for(let name of element.getAttributeNames()) <h2 id="Polyfill">Polyfill</h2> -<pre class="line-numbers language-html"><code class="language-html">if (Element.prototype.getAttributeNames == undefined) { +<pre class="brush: html">if (Element.prototype.getAttributeNames == undefined) { Element.prototype.getAttributeNames = function () { var attributes = this.attributes; var length = attributes.length; @@ -42,7 +42,7 @@ for(let name of element.getAttributeNames()) } return result; }; -}</code></pre> +}</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html index efe33f1fa1..3fd3fd508d 100644 --- a/files/fr/web/api/element/getattributenode/index.html +++ b/files/fr/web/api/element/getattributenode/index.html @@ -12,20 +12,20 @@ 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> +<h2 id="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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var attrNode = element.getAttributeNode(attrName);</code></pre> +<pre class="brush: js">var attrNode = element.getAttributeNode(attrName);</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> +<h2 id="Exemple">Exemple</h2> <pre>// html: <div id="top" /> var t = document.getElementById("top"); @@ -33,7 +33,7 @@ var idAttr = t.getAttributeNode("id"); alert(idAttr.value == "top") </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> @@ -43,11 +43,9 @@ alert(idAttr.value == "top") <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li> + <li><a 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>
\ No newline at end of file diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html index f7d11eaaee..a9a9a56f60 100644 --- a/files/fr/web/api/element/getattributenodens/index.html +++ b/files/fr/web/api/element/getattributenodens/index.html @@ -5,16 +5,16 @@ 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> +<h3 id="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> +<h3 id="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> +<h3 id="Param.C3.A8tres">Paramètres</h3> <dl> <dt><code>attributeNode</code></dt> @@ -25,20 +25,16 @@ translation_of: Web/API/Element/getAttributeNodeNS <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: <div id="top" /> 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> +<p>== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a href="http://www.mozilla.org/ns/specialspace">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</p> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="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> +<h3 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html index 81eb8f8c79..6a5d33ddb7 100644 --- a/files/fr/web/api/element/getattributens/index.html +++ b/files/fr/web/api/element/getattributens/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getAttributeNS <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> + <dd>L'espace de noms dans lequel rechercher l'attribut spécifié.</dd> <dt><code>name </code></dt> <dd>Le nom de l'attribut à chercher.</dd> </dl> @@ -31,7 +31,7 @@ translation_of: Web/API/Element/getAttributeNS <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> +<p><strong>Note :</strong> 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. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -80,7 +80,7 @@ translation_of: Web/API/Element/getAttributeNS <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>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. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. 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 sur l'élément spécifié.</p> <p>{{ DOMAttributeMethods() }}</p> @@ -103,7 +103,7 @@ translation_of: Web/API/Element/getAttributeNS <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> + <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code> est levée si l'agent utilisateur ne supporte pas la fonctionnalité <code>"XML"</code>. Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</td> </tr> <tr> <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td> diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html index 7dd9a66904..7fef648005 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ b/files/fr/web/api/element/getboundingclientrect/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Element/getBoundingClientRect --- <div>{{APIRef("DOM")}}</div> -<p class="summary">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/Glossary/Viewport">zone d'affichage</a>.</p> +<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/Glossary/Viewport">zone d'affichage</a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html index 634b46b5aa..8cbef3215e 100644 --- a/files/fr/web/api/element/getelementsbytagname/index.html +++ b/files/fr/web/api/element/getelementsbytagname/index.html @@ -11,13 +11,13 @@ 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>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="/fr/docs/Web/API/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>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code>place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</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> +<p><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é.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> @@ -27,17 +27,17 @@ translation_of: Web/API/Element/getElementsByTagName <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> +<h2 id="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"><</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> +<pre class="brush: js">// vérifie l'alignement sur un nombre de cellules dans un tableau. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagName("td"); +for (var i = 0; i < cells.length; i++) { + var status = cells[i].getAttribute("data-status"); + if ( status == "open" ) { + // saisit les données + } +}</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html index 51c55029de..3bb1bbba96 100644 --- a/files/fr/web/api/element/getelementsbytagnamens/index.html +++ b/files/fr/web/api/element/getelementsbytagnamens/index.html @@ -11,9 +11,9 @@ 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> +<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{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> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre> @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getElementsByTagNameNS <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> + <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>http://www.w3.org/1999/xhtml</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> @@ -30,11 +30,11 @@ translation_of: Web/API/Element/getElementsByTagNameNS <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> +<h2 id="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"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getAttribute("axis"); if (axis == "year") { diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html index 144fd3ec78..5c90c03771 100644 --- a/files/fr/web/api/element/hasattribute/index.html +++ b/files/fr/web/api/element/hasattribute/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/hasAttribute <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> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); </pre> @@ -25,27 +25,27 @@ translation_of: Web/API/Element/hasAttribute <dd>est une chaine de caractères représentant le nom de l'attribut.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="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> +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // faire quelque chose +}</pre> -<h2 id="Notes" name="Notes">Polyfill</h2> +<h2 id="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">&&</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> +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype);</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{DOMAttributeMethods}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html index d927bbc3c3..d30aca00e1 100644 --- a/files/fr/web/api/element/hasattributens/index.html +++ b/files/fr/web/api/element/hasattributens/index.html @@ -11,16 +11,16 @@ 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> +<h2 id="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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">result = +<pre class="brush: js">result = element.hasAttributeNS( namespace, -localName)</code></pre> +localName)</pre> <dl> <dt><code>result</code></dt> @@ -31,24 +31,24 @@ localName)</code></pre> <dd>Le nom de l'attribut.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="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>, + "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setAttribute("align", "center"); } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a 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/id/index.html b/files/fr/web/api/element/id/index.html index beab7c88e1..29e4752a20 100644 --- a/files/fr/web/api/element/id/index.html +++ b/files/fr/web/api/element/id/index.html @@ -11,15 +11,15 @@ 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>La propriété <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="/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> +<p>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="/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="/fr/docs/Web/CSS">CSS</a>.</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> +<p><strong>Note :</strong> 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="/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="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> @@ -64,5 +64,5 @@ translation_of: Web/API/Element/id <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> + <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li> </ul> diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html index e18976658c..ac94a2ffc9 100644 --- a/files/fr/web/api/element/index.html +++ b/files/fr/web/api/element/index.html @@ -195,7 +195,7 @@ browser-compat: api.Element <dt><a href="/fr/docs/Web/API/Element/before"><code>Element.before()</code></a></dt> <dd>Insère un ensemble d'objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.</dd> <dt><a href="/fr/docs/Web/API/Element/closest"><code>Element.closest()</code></a></dt> - <dd>Renvoie l'élément (<a de>Element</code>) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.</dd> + <dd>Renvoie l'élément (<code>Element</code>) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.</dd> <dt><a href="/fr/docs/Web/API/Element/createShadowRoot"><code>Element.createShadowRoot()</code></a> {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> <dd>Crée un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">DOM sombre</a> sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd> <dt><a href="/fr/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a> {{Experimental_Inline}}</dt> @@ -350,7 +350,7 @@ browser-compat: api.Element <dl> <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt> - <dd>Envoyé à un élément (<a de>Element</code>) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd> + <dd>Envoyé à un élément (<code>Element</code>) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd> <dt><a href="/fr/docs/Web/API/Element/fullscreenerror_event"><code>fullscreenerror</code></a></dt> <dd>Envoyé à un élément <code>Element</code> si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>onfullscreenerror</code></a>.</dd> </dl> @@ -358,11 +358,11 @@ browser-compat: api.Element <h3 id="keyboard_events">Évènements relatifs au clavier</h3> <dl> - <dt><code><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></code></dt> + <dt><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></dt> <dd>Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown"><code>onkeydown</code></a>.</dd> - <dt><code><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></code></dt> + <dt><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></dt> <dd>Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress"><code>onkeypress</code></a>.</dd> - <dt><code><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></code></dt> + <dt><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></dt> <dd>Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup"><code>onkeyup</code></a>.</dd> </dl> diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html index 5860811bfe..91ab29da37 100644 --- a/files/fr/web/api/element/innerhtml/index.html +++ b/files/fr/web/api/element/innerhtml/index.html @@ -14,13 +14,15 @@ original_slug: Web/API/Element/innertHTML <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>(&), (<),</code> ou <code>(>)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;"</code>, <code>"&lt;"</code> et <code>"&gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</div> +<div class="note"> + <p><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>(&), (<),</code> ou <code>(>)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;"</code>, <code>"&lt;"</code> et <code>"&gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</p> +</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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <em>content</em> = <em>element</em>.innerHTML; +<pre class="syntaxbox">const <em>content</em> = <em>element</em>.innerHTML; <em>element</em>.innerHTML = <em>htmlString</em>; </pre> @@ -46,12 +48,12 @@ original_slug: Web/API/Element/innertHTML <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> +<pre class="brush: js">let contents = myElement.innerHTML;</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> +<p><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.</p> </div> <h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3> @@ -60,13 +62,13 @@ original_slug: Web/API/Element/innertHTML <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> +<pre class="brush: js">document.body.innerHTML = "";</pre> <p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"<"</code> par l'entité HTML <code>"& 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">"<pre>"</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">/</g</span><span class="punctuation token">,</span><span class="string token">"&lt;"</span><span class="punctuation token">)</span> <span class="operator token">+</span> - <span class="string token">"</pre>"</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> <h4 id="Détails_opérationnels">Détails opérationnels</h4> @@ -82,92 +84,92 @@ original_slug: Web/API/Element/innertHTML <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> +<pre class="brush: js">const name = "John"; +// en supposant que 'el' est un élément de document HTML +el.innerHTML = name; // inoffensif dans ce cas -<span class="comment token">// ...</span> +// ... -name <span class="operator token">=</span> <span class="string token">"<script>alert('I am John in an annoying alert!')</script>"</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> +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // inoffensif dans ce cas</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">"<img src='x' onerror='alert(1)'>"</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> +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // affiche l'alerte</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> +<p><strong>Attention :</strong> 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. 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.</p> </div> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="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> +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); - <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">"<br/>"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} -<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> +log("Logging mouse events inside this container...");</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 <strong>"</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>type <span class="operator token">+</span> <span class="string token">"</strong> at <em>"</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">"</em>"</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> +<pre class="brush: js">function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</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> +<pre class="brush: js">var boxElem = document.querySelector(".box"); -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> +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</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"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>Log:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></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><div></code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</span></span></p> +<p>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. Le <code><div></code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</p> -<h3 id="Notes" name="Notes">CSS</h3> +<h3 id="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> +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} -<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> +.log { + margin-top: 8px; + font-family: monospace; +}</pre> <h3 id="Résultat">Résultat</h3> @@ -175,11 +177,11 @@ boxElem<span class="punctuation token">.</span><span class="function token">addE <p>{{EmbedLiveSample("Exemple", 640, 350)}}</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> - <tr style="background-color: rgb(255, 204, 255);"> + <tr> <th scope="col">Spécification</th> <th scope="col">Statut</th> <th scope="col">Commentaire</th> @@ -194,7 +196,7 @@ boxElem<span class="punctuation token">.</span><span class="function token">addE </tbody> </table> -<h2 id="References" name="References">Voir aussi</h2> +<h2 id="References">Voir aussi</h2> <ul> <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li> diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html index 5a32d25f64..8587eb5de0 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.html +++ b/files/fr/web/api/element/insertadjacentelement/index.html @@ -11,9 +11,9 @@ 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> +<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre> @@ -23,10 +23,10 @@ translation_of: Web/API/Element/insertAdjacentElement <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> + <li><code>'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li> + <li><code>'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li> + <li><code>'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li> + <li><code>'afterend'</code> : Après <code>targetElement</code> lui-même.</li> </ul> </dd> <dt>element</dt> @@ -60,17 +60,19 @@ translation_of: Web/API/Element/insertAdjacentElement <h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> -<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +<pre><!-- beforebegin --> +<p> +<!-- afterbegin --> foo -<!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> +<!-- beforeend --> +</p> +<!-- afterend --></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> +<div class="note"> + <p><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.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">beforeBtn.addEventListener('click', function() { var tempDiv = document.createElement('div'); @@ -92,7 +94,7 @@ afterBtn.addEventListener('click', function() { <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> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html index b82e7dc4a5..e1f0ffa06a 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ b/files/fr/web/api/element/insertadjacenthtml/index.html @@ -10,11 +10,11 @@ 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> +<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>innerHTML</strong>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="line-numbers language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre> +<pre class="brush: js">element.insertAdjacentHTML(position, text);</pre> <h3 id="Paramètres">Paramètres</h3> @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentHTML </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> + <li><code>'beforebegin'</code> : Avant l'<code>element</code> lui-même.</li> + <li><code>'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li> + <li><code>'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li> + <li><code>'afterend'</code> : Après <code>element</code> lui-même.</li> </ul> <dl> @@ -37,21 +37,20 @@ translation_of: Web/API/Element/insertAdjacentHTML <h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> -<div class="wp_syntax"> -<div class="code"> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> - <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + +<pre><!-- beforebegin --> +<p> + <!-- afterbegin --> foo - <!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> -</div> -</div> + <!-- beforeend --> +</p> +<!-- afterend --></pre> -<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> +<div class="note"> + <p><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.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// <div id="one">one</div> var d1 = document.getElementById('one'); @@ -60,13 +59,13 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // Ici la nouvelle structure est : // <div id="one">one</div><div id="two">two</div></pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2> +<h2 id="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>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.</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> +<p>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut; à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</p> <h2 id="Spécification">Spécification</h2> @@ -96,5 +95,5 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); <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> + <li><a href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a> par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</li> </ul> diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html index 4a1b519fae..f0ab71ddad 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.html +++ b/files/fr/web/api/element/insertadjacenttext/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/insertAdjacentText <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> +<h2 id="Syntax">Syntaxe</h2> <pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentText <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> + <li><code>'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li> + <li><code>'afterbegin'</code> : à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li> + <li><code>'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li> + <li><code>'afterend'</code> : après l'<code>element</code> lui-même.</li> </ul> </dd> <dt>element</dt> @@ -57,17 +57,19 @@ translation_of: Web/API/Element/insertAdjacentText <h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> -<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +<pre><!-- beforebegin --> +<p> +<!-- afterbegin> --> machin -<!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> +<!-- beforeend --> +</p> +<!-- afterend --></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> +<div class="note"> + <p><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.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">beforeBtn.addEventListener('click', function() { para.insertAdjacentText('afterbegin',textInput.value); @@ -94,7 +96,7 @@ afterBtn.addEventListener('click', function() { } </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html index 8aea87173b..d64738b272 100644 --- a/files/fr/web/api/element/localname/index.html +++ b/files/fr/web/api/element/localname/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Element/localName <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> +<p><strong>Note :</strong> 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> diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html index 00ae129138..21e4a2ee68 100644 --- a/files/fr/web/api/element/matches/index.html +++ b/files/fr/web/api/element/matches/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/Element/matches <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> +<p><strong>Attention :</strong> 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> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString); </pre> @@ -25,23 +25,23 @@ translation_of: Web/API/Element/matches <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> +<h2 id="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"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>perroquet amazone<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>aigle des Philippines<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>pélican<span class="tag token"><span class="tag token"><span class="punctuation token"> blanc</</span>li</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<pre class="brush: html"><ul id="birds"> + <li>perroquet amazone</li> + <li class="endangered">aigle des Philippines</li> + <li>pélican blanc</li> +</ul> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></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> +<script type="text/javascript"> + var birds = document.getElementsByTagName('li'); - <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"><</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"></</span>script</span><span class="punctuation token">></span></span></code></pre> + for (var i = 0; i < birds.length; i++) { + if (birds[i].matches('.endangered')) { + console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !'); + } + } +</script></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> @@ -73,9 +73,9 @@ translation_of: Web/API/Element/matches <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) { +<pre class="brush: html">if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector; -}</code></pre> +}</pre> <h2 id="Spécification">Spécification</h2> @@ -103,6 +103,6 @@ translation_of: Web/API/Element/matches <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><a href="/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 index 8569c6878b..98ab94299d 100644 --- a/files/fr/web/api/element/mousedown_event/index.html +++ b/files/fr/web/api/element/mousedown_event/index.html @@ -12,9 +12,9 @@ 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> +<p>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.</p> -<div class="blockIndicator note"> +<div class="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> @@ -43,7 +43,7 @@ translation_of: Web/API/Element/mousedown_event <p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p> -<h2 class="brush: css" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html index 02fcb024bd..ba2623f7c6 100644 --- a/files/fr/web/api/element/mouseenter_event/index.html +++ b/files/fr/web/api/element/mouseenter_event/index.html @@ -12,7 +12,7 @@ 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> +<p>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.</p> <table class="properties"> <tbody> @@ -39,12 +39,12 @@ translation_of: Web/API/Element/mouseenter_event <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> +<img src="mouseenter.png"> +<p><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.</p> + +<img src="mouseover.png"> +<p>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.</p> <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> diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html index 48425a84f8..2c9ee0d534 100644 --- a/files/fr/web/api/element/mouseleave_event/index.html +++ b/files/fr/web/api/element/mouseleave_event/index.html @@ -12,7 +12,7 @@ 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> +<p>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.</p> <table class="properties"> <tbody> @@ -37,12 +37,11 @@ translation_of: Web/API/Element/mouseleave_event <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><div></code> le plus haut dans la hiérarchie. +<img src="mouseleave.png"> +<p>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><div></code> le plus haut dans la hiérarchie.</p> -<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> +<img src="mouseout.png"> +<p>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.</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html index 3130ac80aa..d848446fb1 100644 --- a/files/fr/web/api/element/mousemove_event/index.html +++ b/files/fr/web/api/element/mousemove_event/index.html @@ -13,7 +13,7 @@ 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> +<p>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.</p> <table class="properties"> <tbody> diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html index ee0921b941..0e44a3ae9f 100644 --- a/files/fr/web/api/element/mouseout_event/index.html +++ b/files/fr/web/api/element/mouseout_event/index.html @@ -12,7 +12,7 @@ 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> +<p>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. <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> @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseout_event <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><ul></code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p> +<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code><ul></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> diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html index 9cfdbc5ba0..368e39ddfe 100644 --- a/files/fr/web/api/element/mouseover_event/index.html +++ b/files/fr/web/api/element/mouseover_event/index.html @@ -12,7 +12,7 @@ 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> +<p>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.</p> <table class="properties"> <tbody> @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseover_event <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> +<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter"><code>mouseenter</code></a>.</p> <h3 id="HTML">HTML</h3> diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html index 1faf2195d2..8dcab880a9 100644 --- a/files/fr/web/api/element/mouseup_event/index.html +++ b/files/fr/web/api/element/mouseup_event/index.html @@ -13,7 +13,9 @@ 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> +<p>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.</p> + +<p>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> diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html index 11d1c2a4a7..998f6a875e 100644 --- a/files/fr/web/api/element/namespaceuri/index.html +++ b/files/fr/web/api/element/namespaceuri/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/namespaceURI <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> +<p><strong>Note :</strong> Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -31,13 +31,13 @@ translation_of: Web/API/Element/namespaceURI // c'est un navigateur XUL }</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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>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 href="http://www.w3.org/1999/xhtml">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>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="/fr/docs/Web/API/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> diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html index e9ed7dddf1..243fac13e5 100644 --- a/files/fr/web/api/element/outerhtml/index.html +++ b/files/fr/web/api/element/outerhtml/index.html @@ -14,17 +14,17 @@ translation_of: Web/API/Element/outerHTML <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> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var content = element.outerHTML; +<pre class="brush: html">var content = element.outerHTML; -element.outerHTML = htmlString;</code></pre> +element.outerHTML = htmlString;</pre> -<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3> +<h3 class="highlight-spanned" id="Valeur">Valeur</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> +<h3 class="highlight-spanned" id="Exceptions">Exceptions</h3> <dl> <dt><code>SyntaxError</code></dt> @@ -33,7 +33,7 @@ element.outerHTML = htmlString;</code></pre> <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> +<h2 id="Examples">Exemples</h2> <p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p> @@ -67,9 +67,9 @@ console.log(container.firstChild.nodeName); // affiche "P" <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">"<div class=\"test\">test</div>"</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: "<div></div>"</span></code></pre> +<pre class="brush: js">var div = document.createElement("div"); +div.outerHTML = "<div class=\"test\">test</div>"; +console.log(div.outerHTML); // output: "<div></div>"</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> @@ -79,7 +79,7 @@ p.outerHTML = "<div>Ce div remplace un paragraph.</div>"; console.log(p.nodeName); // toujours "P"; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html index 814f2987ff..638e979793 100644 --- a/files/fr/web/api/element/prefix/index.html +++ b/files/fr/web/api/element/prefix/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/prefix <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> +<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html index a82dccd008..cab55d02fe 100644 --- a/files/fr/web/api/element/queryselectorall/index.html +++ b/files/fr/web/api/element/queryselectorall/index.html @@ -26,53 +26,53 @@ translation_of: Web/API/Element/querySelectorAll <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> + <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="/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="/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> +<h3 id="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> +<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="/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> +<h3 id="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> +<h2 id="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> +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</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> +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");</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 > p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</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> +<p>Cet exemple utilise un <a href="/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> +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</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> +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active=1]");</pre> <h3 id="Accès_aux_correspondances">Accès aux correspondances</h3> @@ -80,13 +80,13 @@ translation_of: Web/API/Element/querySelectorAll <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> +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); -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> +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> -<h2 id="Notes" name="Notes">Notes d'utilisation</h2> +<h2 id="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> @@ -94,26 +94,26 @@ highlightedItems<span class="punctuation token">.</span><span class="function to <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"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></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> +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, pas 0!</pre> <p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code><div> </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> +<p>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 :</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> +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0</pre> <h2 id="Spécifications">Spécifications</h2> @@ -155,12 +155,12 @@ inner<span class="punctuation token">.</span>length<span class="punctuation toke </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><a href="/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="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li> + <li><a href="/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> + <li><a href="/fr/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> </ul> diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html index 1a1d2fde8f..b27f3eb813 100644 --- a/files/fr/web/api/element/removeattribute/index.html +++ b/files/fr/web/api/element/removeattribute/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttribute <p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>); </pre> @@ -23,14 +23,14 @@ translation_of: Web/API/Element/removeAttribute <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> +<h2 id="Exemple">Exemple</h2> <pre>// avant : <div id="div1" align="left" width="200"> document.getElementById("div1").removeAttribute("align"); // maintenant : <div id="div1" width="200"> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> @@ -40,12 +40,8 @@ document.getElementById("div1").removeAttribute("align"); <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a 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 index ebee4f2e03..4ecd896414 100644 --- a/files/fr/web/api/element/removeattributenode/index.html +++ b/files/fr/web/api/element/removeattributenode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/removeAttributeNode <p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>) </pre> @@ -22,15 +22,15 @@ translation_of: Web/API/Element/removeAttributeNode <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> +<h2 id="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"><</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">/></span></span> +<pre class="brush: html">// <div id="top" align="center" /> 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"><</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">/></span></span></code></pre> +// align est maintenant supprimé : <div id="top" /></pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> @@ -38,8 +38,8 @@ d.removeAttributeNode(d_align); <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a 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 index 301d873233..457c552bb9 100644 --- a/files/fr/web/api/element/removeattributens/index.html +++ b/files/fr/web/api/element/removeattributens/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttributeNS <p>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> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>); </pre> @@ -33,12 +33,12 @@ d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); // l'élément est devenu : <div id="div1" width="200px" /> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a 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 index fb27e1ab93..ad1dbf6456 100644 --- a/files/fr/web/api/element/requestfullscreen/index.html +++ b/files/fr/web/api/element/requestfullscreen/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/requestFullScreen <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> +<p><strong>Note :</strong> 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> diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html index 64aa93f7ae..80bddbcd99 100644 --- a/files/fr/web/api/element/scrollheight/index.html +++ b/files/fr/web/api/element/scrollheight/index.html @@ -8,35 +8,105 @@ translation_of: Web/API/Element/scrollHeight <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> +<p><strong>Note :</strong> 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> +<h2 id="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> +<h2 id="Exemple">Exemple</h2> + +<h2>Exemple</h2> + +<p>Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).</p> + +<p>La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" id="agree" name="accept" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} -<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> +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> -<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> +<h3 id="JavaScript">JavaScript</h3> -<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> +<pre class="brush: js">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> +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 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') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><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;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<h3>Résultat</h3> -<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" src="/@api/deki/files/840/=ScrollHeight.png"></p> +<p>{{EmbedLiveSample('Exemple', '640', '400')}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Problèmes et solutions</h2> +<h2 id="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> @@ -72,11 +142,11 @@ onload = function () { checkReading.call(oToBeRead); }</pre> -<p><a href="https://developer.mozilla.org/files/4589/readme-example.html">Voir l'exemple en action</a></p> +<p><a href="/files/4589/readme-example.html">Voir l'exemple en action</a></p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> +<p><code>scrollHeight</code> fait partie du modèle objet <abbr>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> @@ -109,7 +179,7 @@ onload = function () { <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> +<h2 id="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> diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html index c340c512d7..3dfbb5504a 100644 --- a/files/fr/web/api/element/scrollintoview/index.html +++ b/files/fr/web/api/element/scrollintoview/index.html @@ -12,21 +12,18 @@ translation_of: Web/API/Element/scrollIntoView <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> +<h2 id="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> +<h3 id="Paramètres">Paramètres</h3> + <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> - + <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> @@ -52,11 +49,11 @@ element.scrollIntoView({block: "end"}); element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html index f6f4236349..c03e499120 100644 --- a/files/fr/web/api/element/scrollintoviewifneeded/index.html +++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html @@ -43,5 +43,5 @@ translation_of: Web/API/Element/scrollIntoViewIfNeeded <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> + <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> (demande de fonctionnalité pour un équivalent standardisé à <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 index da44c622ff..9d22971f19 100644 --- a/files/fr/web/api/element/scrollleft/index.html +++ b/files/fr/web/api/element/scrollleft/index.html @@ -8,11 +8,11 @@ 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> +<h3 id="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> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">// Obtient le nombre de pixels défilés var <var>sLeft</var> = <var>element</var>.scrollLeft; @@ -32,7 +32,7 @@ var <var>sLeft</var> = <var>element</var>.scrollLeft; <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> +<h3 id="Exemple">Exemple</h3> <pre><script type="text/javascript"> @@ -58,14 +58,14 @@ for (var i=0; i<100; ++i){ > </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="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> +<h3 id="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> + <li><a 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/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html index 8e5c9d4790..ba30e5fecb 100644 --- a/files/fr/web/api/element/scrollto/index.html +++ b/files/fr/web/api/element/scrollto/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Element/scrollTo <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> +<h2 id="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> +<h3 id="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> @@ -32,7 +32,7 @@ element.scrollTo(<em>options</em>) <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li> </ul> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <p>En utilisant des coordonnées :</p> @@ -47,7 +47,7 @@ element.scrollTo(<em>options</em>) behavior: 'smooth' });</pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html index 0053f0ab7b..4b3d0ef24b 100644 --- a/files/fr/web/api/element/scrolltop/index.html +++ b/files/fr/web/api/element/scrolltop/index.html @@ -10,14 +10,14 @@ translation_of: Web/API/Element/scrollTop --- <div>{{APIRef("DOM")}}</div> -<p class="summary"><span class="seoSummary">La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</span></p> +<p>La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</p> <p>La valeur <code>scrollTop</code> d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de <code>scrollTop</code> est <code>0</code>.</p> <p>Lorsque <code>scrollTop</code> est utilisé sur l'élément racine (c'est-à-dire l'élément <code><html></code>), c'est la valeur de <code>scrollY</code> pour la fenêtre qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">Il s'agit d'un cas aux limites pour <code>scrollTop</code></a>.</p> -<div class="notecard warning"> -<p>Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p> +<div class="warning"> +<p><strong>Attention :</strong> Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p> </div> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html index 92fbdc41e1..99dd56426d 100644 --- a/files/fr/web/api/element/scrollwidth/index.html +++ b/files/fr/web/api/element/scrollwidth/index.html @@ -6,13 +6,13 @@ tags: 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> +<h3 id="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> +<h3 id="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> +<h3 id="Exemple">Exemple</h3> <pre><div id="aDiv" style="width: 100px; height: 200px; overflow: auto;" >-FooBar-FooBar-FooBar</div> @@ -20,12 +20,12 @@ translation_of: Web/API/Element/scrollWidth <input type="button" value="Show scrollWidth" onclick="alert(document.getElementById('aDiv').scrollWidth);"> </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="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> +<p>Un brouillon de l'éditeur existe cependant : <a 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">Références</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp"> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp"> <i> scrollWidth</i> sur MSDN</a></li> diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html index b816f249bc..4f6d4d2259 100644 --- a/files/fr/web/api/element/select_event/index.html +++ b/files/fr/web/api/element/select_event/index.html @@ -3,23 +3,23 @@ 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> +<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 <a href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a>, 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> + <dt>Spécification</dt> + <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd> + <dt>Interface</dt> + <dd>UIEvent si généré depuis une interface utilisateur, Event sinon.</dd> + <dt>Remonte</dt> + <dd>Oui</dd> + <dt>Annulable</dt> + <dd>Non</dd> + <dt>Cible</dt> + <dd>Élément</dd> + <dt>Action par Défault</dt> + <dd>Aucune</dd> </dl> <h2 id="Propriétés">Propriétés</h2> @@ -35,28 +35,28 @@ translation_of: Web/API/Element/select_event <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><a href="/en-US/docs/Web/API/EventTarget"><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><a href="/en-US/docs/Web/API/DOMString"><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><a href="/en-US/docs/Web/API/Boolean"><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><a href="/en-US/docs/Web/API/Boolean"><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> + <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td> </tr> <tr> <td><code>detail</code> {{readonlyInline}}</td> @@ -66,7 +66,7 @@ translation_of: Web/API/Element/select_event </tbody> </table> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js"><input id="test" type="text" value="Sélectionnez-moi !" /> <script> diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html index 628010c9d7..2633e74e6b 100644 --- a/files/fr/web/api/element/setattribute/index.html +++ b/files/fr/web/api/element/setattribute/index.html @@ -62,7 +62,7 @@ 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>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="/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> @@ -73,8 +73,8 @@ b.setAttribute("disabled", "");</pre> <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">HTML5 : API dans les documents HTML</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li> + <li><a href="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> diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html index efee5a67fe..8f77b05d9a 100644 --- a/files/fr/web/api/element/setattributenode/index.html +++ b/files/fr/web/api/element/setattributenode/index.html @@ -13,16 +13,16 @@ translation_of: Web/API/Element/setAttributeNode <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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var replacedAttr = element.setAttributeNode(attribute);</code></pre> +<pre class="brush: js">var replacedAttr = element.setAttributeNode(attribute);</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> +<h2 id="Exemple">Exemple</h2> <pre>// <div id="one" align="left">one</div> // <div id="two">two</div> @@ -34,7 +34,7 @@ alert(d2.attributes[1].value) // retourne: `left' </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> @@ -42,8 +42,8 @@ alert(d2.attributes[1].value) <p>{{DOMAttributeMethods()}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a 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 index 6e62b29873..b2abe3c907 100644 --- a/files/fr/web/api/element/setattributenodens/index.html +++ b/files/fr/web/api/element/setattributenodens/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/setAttributeNodeNS <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> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>) </pre> @@ -24,7 +24,7 @@ translation_of: Web/API/Element/setAttributeNodeNS <dd>Un nœud <code>Attr</code>.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// <div id="one" special-align="utterleft">one</div> // <div id="two">two</div> @@ -38,16 +38,16 @@ d2.setAttributeNodeNS(a); alert(d2.attributes[1].value) // renvoie : "utterleft" </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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>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).</p> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a 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 index d5b1699a1b..1274563722 100644 --- a/files/fr/web/api/element/setattributens/index.html +++ b/files/fr/web/api/element/setattributens/index.html @@ -12,34 +12,34 @@ translation_of: Web/API/Element/setAttributeNS <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> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">element.setAttributeNS( +<pre class="brush: js">element.setAttributeNS( namespace, name, -value)</code></pre> +value)</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>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</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> +<h2 id="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"); +d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center"); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="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> +<p><code>setAttributeNS</code> est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire <code>"namespace:localname"</code>.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="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="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a 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/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html index 4a3ecaa500..fe8eb2deb9 100644 --- a/files/fr/web/api/element/setpointercapture/index.html +++ b/files/fr/web/api/element/setpointercapture/index.html @@ -16,12 +16,14 @@ translation_of: Web/API/Element/setPointerCapture <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> +<div class="note"> + <p><strong>Note :</strong> 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.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId); -</pre> +<pre class="syntaxbox">.<em>setPointerCapture</em>(pointerId); +</pre>targetElement <h3 id="Arguments">Arguments</h3> diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html index b0b3243fe0..53bee23738 100644 --- a/files/fr/web/api/element/tagname/index.html +++ b/files/fr/web/api/element/tagname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/tagName <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> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>elementName</em> = element.tagName; </pre> @@ -37,12 +37,12 @@ translation_of: Web/API/Element/tagName <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> +<pre class="brush: js">var span = document.getElementById("naissance"); +console.log(span.tagName);</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> +<p>En XHTML (ou tout autre format XML), 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. En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> |