diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/document_object_model/whitespace/index.html | |
parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip |
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids
* Remove unecessary hidden
* Remove useless span filled with useless attributes / ids
* Remove useless font
* Remove notranslate
* Remove id in other elements than headings
* Remove name attributes
* Remove <pre><code> for JS w/ language-js class
* Remove <pre><code> for HTML w/ language-html class
* Remove <pre><code> for other lang w/ language-* class
* Rm highlighted line in code samples
* fix links, internal, external, absolute URLs
* missing file from last commit
* Fix styles errors apart from table + some classes
* Fix notes and warnings (+ some other :x)
* fix typo during merge which broke a doc
* aand forgot a conflict
* fix remaining classes of errors except dls and images
* Fix dls
* Fix images (deki/mozillademos) and remaining style issues
* Remove script tag from svg file
* Remove script tag from svg fileS
* Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/document_object_model/whitespace/index.html')
-rw-r--r-- | files/fr/web/api/document_object_model/whitespace/index.html | 226 |
1 files changed, 108 insertions, 118 deletions
diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html index d13a541dc7..9529722049 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.html +++ b/files/fr/web/api/document_object_model/whitespace/index.html @@ -5,7 +5,7 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -<h2 id="Le_probl.C3.A8me" name="Le_probl.C3.A8me">Le problème</h2> +<h2 id="Le_probl.C3.A8me">Le problème</h2> <p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p> @@ -30,38 +30,38 @@ translation_of: Web/API/Document_Object_Model/Whitespace </html> </pre> -<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> +<p><img alt="Arbre du DOM équivalent à l'exemple HTML ci-avant" src="dom-string.png"></p> <p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p> -<h2 id="Rendre_les_choses_plus_faciles" name="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> +<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> -<p><span id="result_box" lang="fr"><span>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</span></span></p> +<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!-- jolie impression conventionnelle +<pre class="brush: html"><!-- jolie impression conventionnelle avec des espaces entre les balises: - --></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>ul</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>Position 1<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>Position 2<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>Position 3<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>ul</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="comment token"><!-- jolie impression adaptée au problème : - --></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>ul</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>Position 1<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>Position 2<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>Position 3<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>ul</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> + --> +<div> + <ul> + <li>Position 1</li> + <li>Position 2</li> + <li>Position 3</li> + </ul> +</div> + +<!-- jolie impression adaptée au problème : + --> +<div + ><ul + ><li>Position 1</li + ><li>Position 2</li + ><li>Position 3</li + ></ul +></div></pre> <p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">/** +<pre class="brush: js">/** * Tout au long, les espaces sont définis comme l'un des caractères * "\t" TAB \u0009 * "\n" LF \u000A @@ -70,25 +70,25 @@ translation_of: Web/API/Document_Object_Model/Whitespace * * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement * espaces (et aussi d'autres caractères). - */</span> + */ -<span class="comment token">/** +/** * Détermine si le contenu du texte d'un nœud est entièrement blanc. * * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| * @return True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace, * sinon false <em>(faux)</em>. - */</span> -<span class="keyword token">function</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - <span class="keyword token">return</span> <span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[^\t\n\r ]/</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>nod<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + */ +function is_all_ws( nod ) +{ + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + return !(/[^\t\n\r ]/.test(nod.textContent)); +} -<span class="comment token">/** +/** * Détermine si le nœud doit être ignoré par les fonctions d'itération. * * @param nod Un objet implémentant l'interface DOM1 |Node|. @@ -96,15 +96,15 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| * et autrement false <em>(faux)</em>. - */</span> + */ -<span class="keyword token">function</span> <span class="function token">is_ignorable</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="punctuation token">(</span> nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">8</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="comment token">// un nœud commentaire</span> - <span class="punctuation token">(</span> <span class="punctuation token">(</span>nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span>nod<span class="punctuation token">)</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// un nœud texte, tout espace</span> -<span class="punctuation token">}</span> +function is_ignorable( nod ) +{ + return ( nod.nodeType == 8) || // un nœud commentaire + ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace +} -<span class="comment token">/** +/** * Version de |previousSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |previousSibling| est une propriété * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est @@ -116,16 +116,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_before</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>previousSibling<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><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * @@ -134,16 +134,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_after</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>nextSibling<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><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |lastChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |lastChild| est une propriété * de tous les nœuds DOM qui donnent le dernier des nœuds contenus @@ -154,18 +154,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">last_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>previousSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * @@ -174,18 +174,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">first_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** * Version de |data| cela n'inclut pas les espaces au début * et termine et normalise tous les espaces dans un seul espace. (Normalement * |data | est une propriété des nœuds de texte qui donne le texte du nœud.) @@ -193,40 +193,30 @@ translation_of: Web/API/Document_Object_Model/Whitespace * @param txt Le nœud de texte dont les données doivent être renvoyées * @return Une chaîne donnant le contenu du nœud de texte avec * espace blanc s'est effondré. - */</span> -<span class="keyword token">function</span> <span class="function token">data_of</span><span class="punctuation token">(</span> txt <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> data <span class="operator token">=</span> txt<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[\t\n\r ]+/g</span><span class="punctuation token">,</span> <span class="string token">" "</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span>data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span> data<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h2 id="Exemple" name="Exemple">Exemple</h2> + */ +function data_of( txt ) +{ + var data = txt.textContent; + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +}</pre> + +<h2 id="Exemple">Exemple</h2> <p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> cur <span class="operator token">=</span> <span class="function token">first_child</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">while</span> <span class="punctuation token">(</span>cur<span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">data_of</span><span class="punctuation token">(</span>cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"This is the third paragraph."</span><span class="punctuation token">)</span> - <span class="punctuation token">{</span> - cur<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"magic"</span><span class="punctuation token">;</span> - cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"This is the magic paragraph."</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - cur <span class="operator token">=</span> <span class="function token">node_after</span><span class="punctuation token">(</span>cur<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="originaldocinfo"> -<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> - -<ul> - <li>Auteur : <a class="external" href="http://dbaron.org">L. David Baron</a></li> - <li>Dernière mise à jour : 1er janvier 2003</li> - <li>Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li> -</ul> -</div> +<pre class="brush: js">var cur = first_child(document.getElementById("test")); +while (cur) +{ + if (data_of(cur.firstChild) == "This is the third paragraph.") + { + cur.className = "magic"; + cur.firstChild.textContent = "This is the magic paragraph."; + } + cur = node_after(cur); +}</pre>
\ No newline at end of file |