Exemples

  • Raccourci de la révision : Référence_du_DOM_Gecko/Exemples
  • Titre de la révision : Exemples
  • ID de la révision : 284464
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire /* Exemple 3 : manipulation de styles */ lisibilité

Contenu de la révision

{{template.DomRef()}}

Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exempes utilisent des API courantes, des astuces et des patterns en JavaScript pour manipuler l'objet de document.

Exemple 1 : height et width

L'exemple qui suit montre l'utilisation des propriétés height et width pour dimensionner des images de diverses tailles :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Exemple d'utilisation de width/height</title>
<script type="text/javascript">
function init()
{
  var images = new Array(3);
  images[0] = document.getElementById("image1");
  images[1] = document.getElementById("image2");
  images[2] = document.getElementById("image3");
  var sortie = document.getElementById("sortie");
  var strHtml = "<ul>";
  for (var i = 0; i < images.length; i++)
    strHtml += "<li>image" + (i+1) + 
            ": height=" + images[i].height + 
            ", width=" + images[i].width + 
            ", style.height=" + images[i].style.height + 
            ", style.width=" + images[i].style.width + 
            "<\/li>";
  strHtml += "<\/ul>";
  sortie.innerHTML = strHtml;
}
</script>
</head>
<body onload="init();">

<p>Image 1 : ni hauteur, ni largeur, ni style
    <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
</p>
<p>Image 2 : height="50", width="500", mais pas de style 
    <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         height="50" width="500">
</p>
<p>Image 3 : ni height ni width, mais style="height: 50px; width: 500px;"
    <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         style="height: 50px; width: 500px;">
</p>

<div id="sortie"> </div>
</body>
</html>

height et width sont également des propriétés des élements OBJECT et APPLET.

Exemple 2 : attributs d'image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Modification de la bordure d'une image</title>
<script type="text/javascript">
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
</script>
</head>

<body>
<p>
  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
height="100" alt="test de bordure">
</p>

<form name="formulaire">
  <p><input type="button" value="Définir une bordure de 20px" 
onclick="setBorderWidth(20);"> <input type="button" value="Définir une bordure de 5px" 
onclick="setBorderWidth(5);"></p>
</form>

</body>
</html>

Exemple 3 : manipulation de styles

Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérées et définies depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Exemple de modification de couleurs et de taille de police</title>
<script type="text/javascript">
function changerTexte() {
	var p = document.getElementById("pid");
	p.style.color = "blue"
	p.style.fontSize = "18pt"
}
</script>
</head>
<body>
<p id="pid" 
onclick="window.location.href = 'http://www.lemonde.fr/';">Un lien</p>
<form>
<p><input value="rec" type="button" onclick="changerTexte();"></p>
</form>
</body>
</html>

Exemple 4 : utilisation de feuilles de style

La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme démontré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.

ss = document.styleSheets;
for(ii = 0; ii < ss.length; ii++) {
  for(i = 0; i < ss[0].cssRules.length; i++) {
    dump( ss[ii].cssRules[i].style.selectorText + "\n" );
  }
}

Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :

BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }

Ce script affiche les lignes suivantes :

BODY
P
#LUMPY

Exemple 5 : propagation d'évènements

Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction l_func, qui modifie la valeur de la cellule inférieure du tableau.

Cependant, l_func appelle également une méthode d'objet event, event.stopPropagation, qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement onclick qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode l_func a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée.

<html>
<head>
  <style>
    #t-parent { border: 1px solid red }
    #t1 { background-color: pink; }
  </style>
  <script>
  function l_func(e) {
    t2 = document.getElementById("t2");
    t2.innerHTML = "trois";
    e.stopPropagation(); 
    // ceci empêche t-parent de recevoir le clic. 
  }
  function load() {
    el = document.getElementById("t");
    el.addEventListener("click", l_func, false);
  }
  </script>
</head>
<body onload="load();">
<table id="t-parent" onclick="alert('hello');">
  <tr id="t">
     <td id="t1">un</td>
  </tr>
  <tr><td id="t2">deux</td></tr>
</table>
</body>
</html>

Exemple 6 : getComputedStyle

Cet exemple montre comment la méthode window.getComputedStyle peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe elem.style, dont les propriétés sont listées dans la liste des propriétés DOM CSS.

getComputedStyle() renvoie un objet ComputedCSSStyleDeclaration, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode getPropertyValue() comme montré dans l'exemple suivant.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
 <title>getComputedStyle example</title>

 <script type="text/javascript">
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 </script>

 <style type="text/css">
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 </style>

</head>

<body>

<div id="d1">&nbsp;</div>

<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
  height<input id="t1" type="text" value="1">
  max-width<input id="t2" type="text" value="2">
  bg-color<input id="t3" type="text" value="3"></p>
</form>

</body>
</html>

Exemple 7 : affichage de constantes d'un objet event

Cet exemple montre comment utiliser le DOM pour créer un tableau dans lequel toutes les constantes d'un objet event et leurs valeurs sont affichées. Il montre plusieure aspects utiles du DOM, dont la propriété Event.prototype property, qui permet d'obtenir les propriétés d'un objet particulier, un pattern intéressant pour l'itération sur les propriétés de ce prototype prototype, et les valeurs des constantes elles-mêmes affichées dans le tableau. Notez que la portée centrale de ces constantes est constituée des codes de caractères représentant les touches précisément utilisées au cours de l'évènement (et récupérables à l'aide de la propriété charCode). Chargez le code suivant comme une paeg Web pour voir les constantes d'un objet event.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<!--
 * ***** BEGIN LICENSE BLOCK *****
 * Version: NPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Netscape Public License
 * Version 1.1 (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at
 * http://www.mozilla.org/NPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * Contributor(s):
 *   Alexander J. Vincent <jscript@pacbell.net>
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or 
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the NPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the NPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** * -->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<script language="JavaScript" type="text/javascript">
<!--
function respond() {
// création d'un tableau 
    var table = document.createElement("table")
    table.setAttribute("border", "1")
    var tbody = document.createElement("tbody")
    var y = 0
    var tr = document.createElement("tr")
    var td = document.createElement("th")
// réutilisation de la même variable dans la boucle
// début des informations de l'en-tête du tableau
    td.appendChild(document.createTextNode("Index"))
    tr.appendChild(td)
    td = document.createElement("th")
    td.appendChild(document.createTextNode("Nom de la propriété"))
    tr.appendChild(td)
    td = document.createElement("th")
    td.appendChild(document.createTextNode("Valeur"))
    tr.appendChild(td)
    tbody.appendChild(tr)
// fin des informations de l'en-tête du tableau
    for (property in Event.prototype) {
        if (property == property.toUpperCase()) {
// ajout d'une nouvelle ligne pour chaque propriété de l'objet event
            tr = document.createElement("tr")
            td = document.createElement("td")
            td.appendChild(document.createTextNode(y))
// numéro de propriété dont il s'agit
            tr.appendChild(td)
            y++
            td = document.createElement("td")
            var td_text = document.createTextNode(property)
// nom de la propriété
            td.appendChild(td_text)
            tr.appendChild(td)
            td = document.createElement("td")
            var td_text = document.createTextNode(Event.prototype[property])
// valeur de la propriété
            td.appendChild(td_text)
            tr.appendChild(td)
            tbody.appendChild(tr)
            }
        }
    table.appendChild(tbody)
    document.body.appendChild(table)
    }
//-->
</script>
</head>
<body onload="respond()">
<!-- Résultat après un clic sur le bouton :
The this object is myInput.
Index    Nom de la propriété Valeur
0        type                click
1        target              [object HTMLInputElement]
...
-->
</body>
</html>
{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Examples", "pl": "pl/Dokumentacja_Gecko_DOM/Przyk\u0142ady_u\u017cycia_DOM" } ) }}

Source de la révision

<p>
{{template.DomRef()}}
</p><p>Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exempes utilisent des API courantes, des astuces et des patterns en JavaScript pour manipuler l'objet de document.
</p>
<h3 name="Exemple_1_:_height_et_width"> Exemple 1 : height et width </h3>
<p>L'exemple qui suit montre l'utilisation des propriétés <code>height</code> et <code>width</code> pour dimensionner des images de diverses tailles :
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="fr"&gt;

&lt;head&gt;
&lt;title&gt;Exemple d'utilisation de width/height&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function init()
{
  var images = new Array(3);
  images[0] = document.getElementById("image1");
  images[1] = document.getElementById("image2");
  images[2] = document.getElementById("image3");
  var sortie = document.getElementById("sortie");
  var strHtml = "&lt;ul&gt;";
  for (var i = 0; i &lt; images.length; i++)
    strHtml += "&lt;li&gt;image" + (i+1) + 
            ": height=" + images[i].height + 
            ", width=" + images[i].width + 
            ", style.height=" + images[i].style.height + 
            ", style.width=" + images[i].style.width + 
            "&lt;\/li&gt;";
  strHtml += "&lt;\/ul&gt;";
  sortie.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;

&lt;p&gt;Image 1 : ni hauteur, ni largeur, ni style
    &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
&lt;/p&gt;
&lt;p&gt;Image 2 : height="50", width="500", mais pas de style 
    &lt;img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         height="50" width="500"&gt;
&lt;/p&gt;
&lt;p&gt;Image 3 : ni height ni width, mais style="height: 50px; width: 500px;"
    &lt;img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" 
         style="height: 50px; width: 500px;"&gt;
&lt;/p&gt;

&lt;div id="sortie"&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><code>height</code> et <code>width</code> sont également des propriétés des élements <code>OBJECT</code> et <code>APPLET</code>.
</p>
<h3 name="Exemple_2_:_attributs_d.27image"> Exemple 2 : attributs d'image </h3>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="fr"&gt;

&lt;head&gt;
&lt;title&gt;Modification de la bordure d'une image&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
height="100" alt="test de bordure"&gt;
&lt;/p&gt;

&lt;form name="formulaire"&gt;
  &lt;p&gt;&lt;input type="button" value="Définir une bordure de 20px" 
onclick="setBorderWidth(20);"&gt; &lt;input type="button" value="Définir une bordure de 5px" 
onclick="setBorderWidth(5);"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Exemple_3_:_manipulation_de_styles"> Exemple 3 : manipulation de styles </h3>
<p>Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérées et définies depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="fr"&gt;

&lt;head&gt;
&lt;title&gt;Exemple de modification de couleurs et de taille de police&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function changerTexte() {
	var p = document.getElementById("pid");
	p.style.color = "blue"
	p.style.fontSize = "18pt"
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id="pid" 
onclick="window.location.href = 'http://www.lemonde.fr/';"&gt;Un lien&lt;/p&gt;
&lt;form&gt;
&lt;p&gt;&lt;input value="rec" type="button" onclick="changerTexte();"&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Exemple_4_:_utilisation_de_feuilles_de_style"> Exemple 4 : utilisation de feuilles de style </h3>
<p>La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme démontré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.
</p>
<pre>ss = document.styleSheets;
for(ii = 0; ii &lt; ss.length; ii++) {
  for(i = 0; i &lt; ss[0].cssRules.length; i++) {
    dump( ss[ii].cssRules[i].style.selectorText + "\n" );
  }
}
</pre>
<p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :
</p>
<pre class="eval">BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }
</pre>
<p>Ce script affiche les lignes suivantes :
</p>
<pre class="eval">BODY
P
#LUMPY
</pre>
<h3 name="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements"> Exemple 5 : propagation d'évènements </h3>
<p>Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction l_func, qui modifie la valeur de la cellule inférieure du tableau.
</p><p>Cependant, l_func appelle également une méthode d'objet event, <a href="fr/DOM/event.stopPropagation">event.stopPropagation</a>, qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement <a href="fr/DOM/element.onclick">onclick</a> qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode l_func a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    #t-parent { border: 1px solid red }
    #t1 { background-color: pink; }
  &lt;/style&gt;
  &lt;script&gt;
  function l_func(e) {
    t2 = document.getElementById("t2");
    t2.innerHTML = "trois";
    e.stopPropagation(); 
    // ceci empêche t-parent de recevoir le clic. 
  }
  function load() {
    el = document.getElementById("t");
    el.addEventListener("click", l_func, false);
  }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body onload="load();"&gt;
&lt;table id="t-parent" onclick="alert('hello');"&gt;
  &lt;tr id="t"&gt;
     &lt;td id="t1"&gt;un&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Exemple_6_:_getComputedStyle"> Exemple 6 : getComputedStyle </h3>
<p>Cet exemple montre comment la méthode <a href="fr/DOM/window.getComputedStyle">window.getComputedStyle</a> peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut <code>style</code> ou à l'aide de JavaScript (c'est-à-dire, <code>elem.style.backgroundColor="rgb(173, 216, 230)"</code>). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe <a href="fr/DOM/element.style">elem.style</a>, dont les propriétés sont listées dans la <a href="fr/DOM/CSS">liste des propriétés DOM CSS</a>.
</p><p><code>getComputedStyle()</code> renvoie un objet <code>ComputedCSSStyleDeclaration</code>, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode <code>getPropertyValue()</code> comme montré dans l'exemple suivant.
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="fr"&gt;

&lt;head&gt;
 &lt;title&gt;getComputedStyle example&lt;/title&gt;

 &lt;script type="text/javascript"&gt;
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 &lt;/script&gt;

 &lt;style type="text/css"&gt;
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=""&gt;
&lt;p&gt;&lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
  height&lt;input id="t1" type="text" value="1"&gt;
  max-width&lt;input id="t2" type="text" value="2"&gt;
  bg-color&lt;input id="t3" type="text" value="3"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Exemple_7_:_affichage_de_constantes_d.27un_objet_event"> Exemple 7 : affichage de constantes d'un objet event </h3>
<p>Cet exemple montre comment utiliser le DOM pour créer un tableau dans lequel toutes les constantes d'un objet event et leurs valeurs sont affichées. Il montre plusieure aspects utiles du DOM, dont la propriété Event.prototype property, qui permet d'obtenir les propriétés d'un objet particulier, un pattern intéressant pour l'itération sur les propriétés de ce prototype prototype, et les valeurs des constantes elles-mêmes affichées dans le tableau. Notez que la portée centrale de ces constantes est constituée des codes de caractères représentant les touches précisément utilisées au cours de l'évènement (et récupérables à l'aide de la propriété charCode).
Chargez le code suivant comme une paeg Web pour voir les constantes d'un objet event.
</p>
<pre>&lt;?xml version="1.0" ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"&gt;
&lt;!--
 * ***** BEGIN LICENSE BLOCK *****
 * Version: NPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Netscape Public License
 * Version 1.1 (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at
 * http://www.mozilla.org/NPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * Contributor(s):
 *   Alexander J. Vincent &lt;jscript@pacbell.net&gt;
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or 
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the NPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the NPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** * --&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;head&gt;&lt;title&gt;&lt;/title&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
&lt;!--
function respond() {
// création d'un tableau 
    var table = document.createElement("table")
    table.setAttribute("border", "1")
    var tbody = document.createElement("tbody")
    var y = 0
    var tr = document.createElement("tr")
    var td = document.createElement("th")
// réutilisation de la même variable dans la boucle
// début des informations de l'en-tête du tableau
    td.appendChild(document.createTextNode("Index"))
    tr.appendChild(td)
    td = document.createElement("th")
    td.appendChild(document.createTextNode("Nom de la propriété"))
    tr.appendChild(td)
    td = document.createElement("th")
    td.appendChild(document.createTextNode("Valeur"))
    tr.appendChild(td)
    tbody.appendChild(tr)
// fin des informations de l'en-tête du tableau
    for (property in Event.prototype) {
        if (property == property.toUpperCase()) {
// ajout d'une nouvelle ligne pour chaque propriété de l'objet event
            tr = document.createElement("tr")
            td = document.createElement("td")
            td.appendChild(document.createTextNode(y))
// numéro de propriété dont il s'agit
            tr.appendChild(td)
            y++
            td = document.createElement("td")
            var td_text = document.createTextNode(property)
// nom de la propriété
            td.appendChild(td_text)
            tr.appendChild(td)
            td = document.createElement("td")
            var td_text = document.createTextNode(Event.prototype[property])
// valeur de la propriété
            td.appendChild(td_text)
            tr.appendChild(td)
            tbody.appendChild(tr)
            }
        }
    table.appendChild(tbody)
    document.body.appendChild(table)
    }
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="respond()"&gt;
&lt;!-- Résultat après un clic sur le bouton :
The this object is myInput.
Index    Nom de la propriété Valeur
0        type                click
1        target              [object HTMLInputElement]
...
--&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Examples", "pl": "pl/Dokumentacja_Gecko_DOM/Przyk\u0142ady_u\u017cycia_DOM" } ) }}
Revenir à cette révision