Introduction

  • Raccourci de la révision : Référence_du_DOM_Gecko/Introduction
  • Titre de la révision : Introduction
  • ID de la révision : 255508
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: zh-cn

Contenu de la révision

{{template.DomRef()}}

Cette section consiste en une brève introduction conceptuelle au DOM : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents HTML et XML, la manière d'y accéder, et comment cette API présente les informations de référence et exemples.

Présentation du DOM

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et une manière d'accéder à cette structure depuis des programmes, permettant à ceux-ci de modifier la structure du document, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

Le standard DOM du W3C forme la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard du W3C, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.

Par exemple, DOM du W3C spécifie que la méthode getElementsByTagName dans le code ci-dessous doit renvoyer une liste de tous les éléments <P> présents dans le document :

paragraphes = document.getElementsByTagName("P");
// paragraphes[0] est le premier élément <p>
// paragraphes[1] est le second élément <p>, etc.
alert(paragraphes[0].nodeName);

Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet document qui représente le document lui-même, l'objet table qui implémente l'interface DOM particulière HTMLTableElement permettant d'accéder aux tables HTML, etc.) Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.

DOM et JavaScript

Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en JavaScript. C'est-à-dire qu'il est écrit en JavaScript, mais qu'il utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.

Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :

# Exemple d'utilisation du DOM en Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # Propriété DOM de l'objet document;
p_list = doc.getElementsByTagName("para");

Méthodes d'accès au DOM

Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformance au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.

Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <SCRIPT> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments document ou window, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction alert() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.

<body 
  onload="window.alert('Bienvenue sur ma page Web !');">

À côté de l'élément <script> dans lequel le JavaScript est défini, cet exemple définit une fonction à exécuter lorsque le document est chargé (et que le DOM entier est prêt à être utilisé). Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :

<html>
<script>
 // lancer cette fonction quand le document est chargé
 window.onload = function() {
   // crée quelques éléments dans 
   // une page HTML pour l'instant vide
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Grand titre");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
 }
</script>
</html>

Types de données importants

Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître. Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant elements, aux tableaux de nœuds en tant que nodeLists (ou même simplement éléments), et aux nœuds d'attributs en tant qu'attributes.

Le tableau suivant décrit brièvement ces types de données.

document Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
element element se réfère à un élément ou à un nœud de type element renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode document.createElement() renvoie une référence à un objet node, nous dirons simplement que cette méthode renvoie l'element qui vient d'être créé dans le DOM. Les objets element implémentent l'interface DOM Element, mais aussi l'interface plus basique Node, qui sont toutes deux détaillées dans cette référence.
nodeList Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes :
  • list.item(1)
  • list{{mediawiki.external(1)}}

Ces deux lignes sont équivalentes. Dans la première, item() est la méthode de l'objet nodeList. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.

attribute Lorsqu'un attribute est renvoyé par un membre (par exemple par la méthode createAttribute()), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.
namedNodeMap Une namedNodeMap est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une namedNodeMap a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une namedNodeMap.

Les interfaces DOM

Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les choses réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément HTML FORM reçoit sa propriété name de l'interface HTMLElement. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.

Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.

Les interfaces et les objets

Dans certains cas, un objet implémente une seule interface. Mais la plupart du temps, un objet comme l'élément HTML table emprunte à plusieurs interfaces différentes. Cet objet table par exemple implémente une interface spécialisée de l'élément HTML Table, dont font partie des méthodes comme createCaption et insertRow. Mais comme il s'agit également d'un élément HTML, table implémente aussi l'interface Element décrite dans le chapitre Référence de DOM element. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet de document pour une page Web ou un document XML, table implémente encore l'interface plus basique Node, dont dérive Element.

Lorsque vous obtiendrez une référence à un objet table, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Interface Node/Element
for(var i = 0; i < tableAttrs.length; i++){
  // Interface HTMLTableElement : attribut border
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// Interface HTMLTableElement : attribut summary
table.summary = "note : bordure plus large";

Interfaces essentielles du DOM

Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM à la fin de cette référence.

Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente quelque chose comme le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent beaucoup des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques traitant du type de données représentées, comme l'objet table donné en exemple dans la section précédente.

Ce qui suit est une brève liste des API courantes communes au scripting Web ou XML utilisant le DOM.

Test de l'API DOM

Ce document fournit des exemples pour chaque interface utilisable dans le cadre du développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.

Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scripts. La page suivante, très simple, fournit un élément <script> dans les en-têtes dans lequel vous pouvez placer les fonctions testant l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.

Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme Web. Vous pouvez mettre à jour le contenu de la fonction test(), créer plus de boutons ou ajouter d'autres éléments si nécessaire.

<html>
<head>
<title>Tests du DOM</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
</script>
</head> 
<body>
<div style="margin: .5in; height="400""> 
<p><b><tt>text</tt> color</p> 
<form> 
<select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"> 
<option value="black">black 
<option value="darkblue">darkblue 
</select>
 <p><b><tt>bgColor</tt></p>
 <select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"> 
<option value="white">white 
<option value="lightgrey">gray
 </select>
<p><b><tt>link</tt></p> 
<select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select>  <small>
     <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(exemple de lien)</a></small><br>
</form>
<form>
  <input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>

Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.

Image:DOM_Ref_Introduction_to_the_DOM.png
Figure 0.1 Exemple de page de test du DOM

Dans cet exemple, les menus déroulants mettent à jour automatiquement des aspects accessibles au DOM de la page Web comme sa couleur de fond (bgColor), la couleur des hyperliens (aLink) et la couleur du texte (text). Cependant, le fait que vous dessiniez vos pages de test, en testant les interfaces au fur et à mesure que vous les découvrez dans le texte est une part importante du processus d'apprentissage d'une utilisation efficace du DOM.

{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8" } ) }}

Source de la révision

<p>
{{template.DomRef()}}
</p><p>Cette section consiste en une brève introduction conceptuelle au DOM : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents HTML et XML, la manière d'y accéder, et comment cette API présente les informations de référence et exemples.
</p>
<h3 name="Pr.C3.A9sentation_du_DOM"> Présentation du DOM </h3>
<p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document et une manière d'accéder à cette structure depuis des programmes, permettant à ceux-ci de modifier la structure du document, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.
</p><p>Le standard <a class="external" href="http://www.w3.org/DOM/">DOM du W3C</a> forme la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard du W3C, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.
</p><p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code>&lt;P&gt;</code> présents dans le document :
</p>
<pre>paragraphes = document.getElementsByTagName("P");
// paragraphes[0] est le premier élément &lt;p&gt;
// paragraphes[1] est le second élément &lt;p&gt;, etc.
alert(paragraphes[0].nodeName);
</pre>
<p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.) Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.
</p>
<h3 name="DOM_et_JavaScript"> DOM et JavaScript </h3>
<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="fr/JavaScript">JavaScript</a>. C'est-à-dire qu'il est <i>écrit</i> en JavaScript, mais qu'il <i>utilise</i> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.
</p><p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :
</p>
<pre class="eval"># Exemple d'utilisation du DOM en Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # Propriété DOM de l'objet document;
p_list = doc.getElementsByTagName("para");
</pre>
<h3 name="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM"> Méthodes d'accès au DOM </h3>
<p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformance au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.
</p><p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code>&lt;SCRIPT&gt;</code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code>document</code> ou <code>window</code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code>alert()</code> de l'objet <code>window</code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.
</p>
<pre class="eval">&lt;body 
  onload="window.alert('Bienvenue sur ma page Web !');"&gt;
</pre>
<p>À côté de l'élément <code>&lt;script&gt;</code> dans lequel le JavaScript est défini, cet exemple définit une fonction à exécuter lorsque le document est chargé (et que le DOM entier est prêt à être utilisé). Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :
</p>
<pre class="eval">&lt;html&gt;
&lt;script&gt;
 // lancer cette fonction quand le document est chargé
 window.onload = function() {
   // crée quelques éléments dans 
   // une page HTML pour l'instant vide
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Grand titre");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
 }
&lt;/script&gt;
&lt;/html&gt;
</pre>
<h3 name="Types_de_donn.C3.A9es_importants"> Types de données importants </h3>
<p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître. Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes</code>.
</p><p>Le tableau suivant décrit brièvement ces types de données.
</p>
<table border="1" cellpadding="5" cellspacing="0">
  <tbody><tr>
    <td><code>document</code></td>
    <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <b>ownerDocument</b> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td>
  </tr>
  <tr>
    <td><code>element</code></td>
    <td><code>element</code> se réfère à un élément ou à un nœud de type <code>element</code> renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <code>document.createElement()</code> renvoie une référence à un objet <code>node</code>, nous dirons simplement que cette méthode renvoie l'<code>element</code> qui vient d'être créé dans le DOM. 
Les objets <code>element</code> implémentent l'interface DOM <code>Element</code>, mais aussi l'interface plus basique <code>Node</code>, qui sont toutes deux détaillées dans cette référence.</td>
  </tr>
  <tr>
    <td><code>nodeList</code></td>
    <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <code>document.getElementsByTagName()</code>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : 
<ul><li> list.item(1)
</li><li> list{{mediawiki.external(1)}}
</li></ul>
<p>Ces deux lignes sont équivalentes. Dans la première, <b>item()</b> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.
</p>
</td>
  </tr>
  <tr>
    <td><code>attribute</code></td>
    <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <b>createAttribute()</b>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td>
  </tr>
  <tr>
    <td><code>namedNodeMap</code></td>
    <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td>
  </tr>
</tbody></table>
<h3 name="Les_interfaces_DOM"> Les interfaces DOM </h3>
<p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les <i>choses</i> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <b>name</b> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.
</p><p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.
</p>
<h4 name="Les_interfaces_et_les_objets"> Les interfaces et les objets </h4>
<p>Dans certains cas, un objet implémente une seule interface. Mais la plupart du temps, un objet comme l'élément HTML <code>table</code> emprunte à plusieurs interfaces différentes. Cet objet table par exemple implémente une <a href="fr/DOM/table">interface spécialisée de l'élément HTML Table</a>, dont font partie des méthodes comme <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet de document pour une page Web ou un document XML, <code>table</code> implémente encore l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.
</p><p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.
</p>
<pre>var table = document.getElementById("table");
var tableAttrs = table.attributes; // Interface Node/Element
for(var i = 0; i &lt; tableAttrs.length; i++){
  // Interface HTMLTableElement : attribut border
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// Interface HTMLTableElement : attribut summary
table.summary = "note : bordure plus large";
</pre>
<h4 name="Interfaces_essentielles_du_DOM"> Interfaces essentielles du DOM </h4>
<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples">Exemples d'utilisation du DOM</a> à la fin de cette référence.
</p><p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent beaucoup des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques traitant du type de données représentées, comme l'objet <code>table</code> donné en exemple dans la section précédente.
</p><p>Ce qui suit est une brève liste des API courantes communes au scripting Web ou XML utilisant le DOM.
</p>
<ul><li> <code><a href="fr/DOM/document.getElementById">document.getElementById</a>(id)</code>
</li><li> <code>element.<a href="fr/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code>
</li><li> <code><a href="fr/DOM/document.createElement">document.createElement</a>(name)</code>
</li><li> <code>parentNode.<a href="fr/DOM/element.appendChild">appendChild</a>(node)</code>
</li><li> <code>element.<a href="fr/DOM/element.innerHTML">innerHTML</a></code>
</li><li> <code>element.<a href="fr/DOM/element.style">style</a>.left</code>
</li><li> <code>element.<a href="fr/DOM/element.setAttribute">setAttribute</a></code>
</li><li> <code>element.<a href="fr/DOM/element.getAttribute">getAttribute</a></code>
</li><li> <code>element.<a href="fr/DOM/element.addEventListener">addEventListener</a></code>
</li><li> <code><a href="fr/DOM/window._content">window.content</a></code>
</li><li> <code><a href="fr/DOM/window.onload">window.onload</a></code>
</li><li> <code><a href="fr/DOM/window.dump">window.dump</a></code>
</li><li> <code><a href="fr/DOM/window.scrollTo">window.scrollTo</a></code>
</li></ul>
<h3 name="Test_de_l.27API_DOM"> Test de l'API DOM </h3>
<p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre du développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément &lt;script&gt;, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.
</p><p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scripts. La page suivante, très simple, fournit un élément &lt;script&gt; dans les en-têtes dans lequel vous pouvez placer les fonctions testant l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.
</p><p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme Web. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons ou ajouter d'autres éléments si nécessaire.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tests du DOM&lt;/title&gt;
&lt;script type="application/x-javascript"&gt;
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt;
&lt;div style="margin: .5in; height="400""&gt; 
&lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt; color&lt;/p&gt; 
&lt;form&gt; 
&lt;select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="black"&gt;black 
&lt;option value="darkblue"&gt;darkblue 
&lt;/select&gt;
 &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
 &lt;select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="white"&gt;white 
&lt;option value="lightgrey"&gt;gray
 &lt;/select&gt;
&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt; 
&lt;select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);"&gt;
&lt;option value="blue"&gt;blue
&lt;option value="green"&gt;green
&lt;/select&gt;  &lt;small&gt;
     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
(exemple de lien)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
&lt;/form&gt;
&lt;form&gt;
  &lt;input type="button" value="version" onclick="ver()" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.
</p><p><img alt="Image:DOM_Ref_Introduction_to_the_DOM.png" src="File:fr/Media_Gallery/DOM_Ref_Introduction_to_the_DOM.png"><br>
Figure 0.1 Exemple de page de test du DOM
</p><p>Dans cet exemple, les menus déroulants mettent à jour automatiquement des aspects accessibles au DOM de la page Web comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, le fait que vous dessiniez vos pages de test, en testant les interfaces au fur et à mesure que vous les découvrez dans le texte est une part importante du processus d'apprentissage d'une utilisation efficace du DOM.
</p>{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8" } ) }}
Revenir à cette révision