diff options
Diffstat (limited to 'files/fr/web/api/document_object_model')
8 files changed, 497 insertions, 54 deletions
diff --git a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html b/files/fr/web/api/document_object_model/events/index.html index cd96a7446c..cd96a7446c 100644 --- a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html +++ b/files/fr/web/api/document_object_model/events/index.html diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/examples/index.html index 08bd432a1e..08bd432a1e 100644 --- a/files/fr/web/api/document_object_model/exemples/index.html +++ b/files/fr/web/api/document_object_model/examples/index.html diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..9e74fa2870 --- /dev/null +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/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"><?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> diff --git a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index aae8808be0..aae8808be0 100644 --- a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html diff --git a/files/fr/web/api/document_object_model/préface/index.html b/files/fr/web/api/document_object_model/préface/index.html deleted file mode 100644 index 77c272f5b2..0000000000 --- a/files/fr/web/api/document_object_model/préface/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Préface -slug: Web/API/Document_Object_Model/Préface -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -<p>{{ ApiRef() }}</p> -<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3> -<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p> -<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p> -<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3> -<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p> -<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p> -<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3> -<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> -<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou - <i> - chrome</i> - ) du navigateur.</p> -<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p> -<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3> -<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p> -<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p> -<pre class="eval"><i>screenObj</i> = window.screen.availHeight; -</pre> -<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p> -<pre class="eval"><i>chaine</i> = window.status; -window.status =<i>chaine</i>; -</pre> -<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p> -<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3> -<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p> -<pre><html> - -<script> -function testWinDoc() { - - doc= window.document; - - alert(doc.title); - -} -</script> - -<button onclick="testWinDoc();">test de la propriété document</button> - -</html> -</pre> -<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..9e3407a0aa --- /dev/null +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,351 @@ +--- +title: Explorer un tableau HTML avec des interfaces DOM et JavaScript +slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript +tags: + - DOM + - Guide + - HTML + - JavaScript +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +<p> </p> + +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p> + +<div class="note">Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</div> + +<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<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>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>Generate a table.<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>generate_table()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">generate_table</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// get the reference for the body</span> + <span class="keyword token">var</span> body <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">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="comment token">// creates a <table> element and a <tbody> element</span> + <span class="keyword token">var</span> tbl <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">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> tblBody <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">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// creating all cells</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> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// creates a table row</span> + <span class="keyword token">var</span> row <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">"tr"</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> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Create a <td> element and a text node, make the text</span> + <span class="comment token">// node the contents of the <td>, and put the <td> at</span> + <span class="comment token">// the end of the table row</span> + <span class="keyword token">var</span> cell <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">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> cellText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"cell in row "</span><span class="operator token">+</span>i<span class="operator token">+</span><span class="string token">", column "</span><span class="operator token">+</span>j<span class="punctuation token">)</span><span class="punctuation token">;</span> + cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cellText<span class="punctuation token">)</span><span class="punctuation token">;</span> + row<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cell<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// add the row to the end of the table body</span> + tblBody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>row<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// put the <tbody> in the <table></span> + tbl<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tblBody<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// appends <table> into <body></span> + body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbl<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// sets the border attribute of tbl to 2;</span> + tbl<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"border"</span><span class="punctuation token">,</span> <span class="string token">"2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> + +<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p> + +<ol> + <li>On crée d'abord l'élément <table>.</li> + <li>Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.</li> + <li>Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.</li> + <li>Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.</li> + <li>Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.</li> +</ol> + +<p>Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p> + +<ol> + <li>On attache d'abord chaque nœud texte à son élément parent <td> en utilisant + <pre>cell.appendChild(texte);</pre> + </li> + <li>Ensuite, on lie chaque élément <td> à son élément <tr> parent avec + <pre>row.appendChild(cell);</pre> + </li> + <li>Puis chaque <tr> à son parent <tbody> avec + <pre>tablebody.appendChild(row);</pre> + </li> + <li>Puis l'élément <tbody> est attaché à son élément parent <table> grace à + <pre>table.appendChild(tablebody);</pre> + </li> + <li>Enfin, <table> est rattaché à <body> avec + <pre>body.appendChild(table);</pre> + </li> +</ol> + +<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p> + +<p>Voici l'HTML généré par ce code JavaScript :</p> + +<pre>... +<table border="2"> +<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> +<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> +</table> +... +</pre> + +<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> + +<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<p>Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.</p> + +<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html" name="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : <span id="result_box" lang="fr"><span>Définition de la couleur d'arrière-plan d'un paragraphe</span></span></h2> + +<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. <span id="result_box" lang="fr"><span>Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.</span> <span>Le premier élément de la liste se trouve à la position [0] dans le tableau.</span></span></p> + +<h3 id="Contenu_HTML_2">Contenu HTML</h3> + +<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>body</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>Set paragraph background color<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>set_background()<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>hi<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>p</span><span class="punctuation token">></span></span>hello<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>body</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">set_background</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// </span></code>récupère une liste de tous les éléments body (il n'y en aura qu'un)<code class="language-js"><span class="comment token">,</span> + <span class="comment token">// </span></code>et sélectionne le premier (indice 0) de ces éléments<code class="language-js"> + myBody <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">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="comment token">// </span></code>à présent, trouve tous les éléments p enfants de cet élément body<code class="language-js"> + myBodyElements <span class="operator token">=</span> myBody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// </span></code>récupère le second élément de cette liste d'éléments p<code class="language-js"> + myP <span class="operator token">=</span> myBodyElements<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + myP<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"rgb(255,0,0)"</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> + +<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p> + +<ol> + <li>On récupère d'abord une liste de tous les éléments body avec + <pre class="line-numbers language-html"><code class="language-html">myBody = document.getElementsByTagName("body")[0]</code></pre> + Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li> + <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant + <pre class="line-numbers language-html"><code class="language-html">myBodyElements = myBody.getElementsByTagName("p");</code></pre> + </li> + <li>Pour finir on prend le deuxième élément de la liste des éléments p avec + <pre class="line-numbers language-html"><code class="language-html">myP = myBodyElements[1];</code></pre> + </li> +</ol> + +<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p> + +<p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p> + +<pre class="eval">myP.style.background = "rgb(255,0,0)"; +// ajoute une propriété de style inline +</pre> + +<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29" name="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3> + +<p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p> + +<pre class="line-numbers language-html"><code class="language-html">myTextNode = document.createTextNode("world");</code></pre> + +<p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p> + +<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29" name="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> + +<p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p> + +<pre class="eval">myP.appendChild(noeudTexte); +</pre> + +<p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p> + +<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p> + +<div class="note">L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</div> + +<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29" name="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3> + +<p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p> + +<pre class="eval">nouveauNoeudBALISEP = document.createElement("p"); +body.appendChild(nouveauNoeudBALISEP); +</pre> + +<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p> + +<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29" name="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3> + +<p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément <p>) le nœud texte contenant le mot « world » :</p> + +<pre class="eval">myP.removeChild(noeudTexte); +</pre> + +<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément <p> récemment créé :</p> + +<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte); +</pre> + +<p>L'arborescence des objets se présente désormais comme ceci :</p> + +<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p> + +<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29" name="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> + +<p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p> + +<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML" name="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> + +<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence" name="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> + +<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p> + +<ul> + <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li> + <li>Créer tous les éléments.</li> + <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li> +</ul> + +<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> + +<div class="note">Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</div> + +<pre><head> +<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> +<script> + function start() { + // récupère une référence vers l'élément body + var body = document.getElementsByTagName("body")[0]; + + // création des éléments <table> et <tbody> + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + // création des cellules + for(var j = 0; j < 2; j++) { + // création d'un élément <tr> + row = document.createElement("tr"); + + for(var i = 0; i < 2; i++) { + // création d'un élément <td> + cell = document.createElement("td"); + // création d'un nœud texte + texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i); + // ajoute le nœud texte créé à la cellule <td> + cell.appendChild(texte); + // ajoute la cellule <td> à la ligne <tr> + row.appendChild(cell); + } + // ajoute la ligne <tr> à l'élément <tbody> + tablebody.appendChild(row); + } + + // ajoute <tbody> à l'élément <table> + table.appendChild(tablebody); + // ajoute <table> à l'élément <body> + body.appendChild(table); + // définit l'attribut border de table à 2; + table.setAttribute("border", "2"); + } +</script> +</head> +<body onload="start()"> +</body> +</html> +</pre> + +<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS" name="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> + +<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau" name="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> + +<p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément <body>.</p> + +<div class="note">Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</div> + +<pre class="brush:js line-numbers language-js"><code class="language-js">mybody <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">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mytable <span class="operator token">=</span> mybody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mytablebody <span class="operator token">=</span> mytable<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +myrow <span class="operator token">=</span> mytablebody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +mycel <span class="operator token">=</span> myrow<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="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// premier élément du noeud liste des enfants de mycel</span> +myceltext<span class="operator token">=</span>mycel<span class="punctuation token">.</span>childNodes<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>contenu de currenttext est le contenu des données de</span></span><code class="language-js"><span class="comment token"> myceltext</span> +currenttext<span class="operator token">=</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>myceltext<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> +mybody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currenttext<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut" name="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> + +<p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p> + +<pre class="line-numbers language-html"><code class="language-html">mytable.getAttribute("border");</code></pre> + +<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style" name="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3> + +<p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p> + +<pre><html> +<body onload="start()"> +</body> +<script> + function start() { + var body = document.getElementsByTagName("body")[0]; + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + for(var j = 0; j < 2; j++) { + row = document.createElement("tr"); + for(var i = 0; i < 2; i++) { + cell = document.createElement("td"); + text = document.createTextNode("la cellule est :" + i + j); + cell.appendChild(text); + row.appendChild(cell); + // change la couleur de fond de la cellule + // si la colonne est 0. Si la colonne est 1, cache la cellule + if (i == 0) { + cell.style.background = "rgb(255,0,0)"; + } else { + cell.style.display = "none"; + } + } + tablebody.appendChild(row); + } + table.appendChild(tablebody); + body.appendChild(table); + } +</script> +</html> +</pre> + +<h4 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h4> + +<dl> + <dt>Author(s)</dt> + <dd>Marcio Galli</dd> + <dt>Migrated from</dt> + <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd> +</dl> + +<p><br> + <span class="comment">Interwik</span></p> diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html index a9efdf8cdb..a9efdf8cdb 100644 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html index 0f140378e6..0f140378e6 100644 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html |