1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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"><?xml version="1.0"?>
<people>
<person first-name="eric" middle-initial="H" last-name="jung">
<address street="321 south st" city="denver" state="co" country="usa"/>
<address street="123 main st" city="arlington" state="ma" country="usa"/>
</person>
<person first-name="jed" last-name="brown">
<address street="321 north st" city="atlanta" state="ga" country="usa"/>
<address street="123 west st" city="seattle" state="wa" country="usa"/>
<address street="321 south avenue" city="denver" state="co" country="usa"/>
</person>
</people>
</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>
|
