initial commit

1 files changed, 146 insertions, 0 deletions

diff --git a/files/fr/comment_créer_un_arbre_dom/index.html b/files/fr/comment_créer_un_arbre_dom/index.html
new file mode 100644
index 0000000000..9e74fa2870
--- /dev/null
+++ b/files/fr/comment_créer_un_arbre_dom/index.html
@@ -0,0 +1,146 @@
+---
+title: Comment créer un arbre DOM
+slug: Comment_créer_un_arbre_DOM
+tags:
+  - AJAX
+  - DOM
+  - Extensions
+translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
+---
+<p> </p>
+
+<p>Cet article décrit comment utiliser l'API <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p>
+
+<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM" name="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3>
+
+<p>Considérons le document XML suivant :</p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p>
+
+<pre class="eval">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+
+<p>Voir également le chapitre <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p>
+
+<p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="punctuation token">{</span>
+  <span class="string token">"people"</span><span class="punctuation token">:</span> <span class="punctuation token">{</span>
+    <span class="string token">"person"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+      <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 main st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"arlington"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ma"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+      <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"eric"</span><span class="punctuation token">,</span>
+      <span class="string token">"@middle-initial"</span><span class="punctuation token">:</span> <span class="string token">"H"</span><span class="punctuation token">,</span>
+      <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"jung"</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 north st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"atlanta"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ga"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 west st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"seattle"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"wa"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south avenue"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+      <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"jed"</span><span class="punctuation token">,</span>
+      <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"brown"</span>
+    <span class="punctuation token">}</span><span class="punctuation token">]</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Alors_quoi_.3F" name="Alors_quoi_.3F">Et après ?</h3>
+
+<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="https://developer.mozilla.org/fr/docs/XSLT">XSLT</a>, <a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">XLink</a>,  convertis en un objet JavaScript à travers un <a href="https://developer.mozilla.org/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p>
+
+<p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Glossaire/XML" title="en/XML">XML</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/JXON" title="en/JXON">JXON</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>