diff options
Diffstat (limited to 'files/fr/web/api/document_object_model/examples/index.html')
| -rw-r--r-- | files/fr/web/api/document_object_model/examples/index.html | 518 |
1 files changed, 259 insertions, 259 deletions
diff --git a/files/fr/web/api/document_object_model/examples/index.html b/files/fr/web/api/document_object_model/examples/index.html index a1d62f4019..9754cae903 100644 --- a/files/fr/web/api/document_object_model/examples/index.html +++ b/files/fr/web/api/document_object_model/examples/index.html @@ -9,132 +9,132 @@ original_slug: Web/API/Document_Object_Model/Exemples --- <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 exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.</p> -<h2 id="Exemple_1_:_height_et_width" name="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> +<h2 id="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> <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 class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>width/height example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> arrImages <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Array</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - arrImages<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - arrImages<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - arrImages<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> objOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> strHtml <span class="operator token">=</span> <span class="string token">"<ul>"</span><span class="punctuation token">;</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> arrImages<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"<li>image"</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i<span class="operator token">+</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">+</span> - <span class="string token">": height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>height <span class="operator token">+</span> - <span class="string token">", width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>width <span class="operator token">+</span> - <span class="string token">", style.height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">+</span> - <span class="string token">", style.width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>width <span class="operator token">+</span> - <span class="string token">"<\/li>"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"<\/ul>"</span><span class="punctuation token">;</span> - - objOutput<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> strHtml<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init();<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>Image 1: no height, width, or style - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<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> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Image 2: height="50", width="500", but no style - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image2<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span> - <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<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> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Image 3: no height, width, but style="height: 50px; width: 500px;" - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image3<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> - <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><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> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<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>div</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> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Exemple_2_:_attributs_d.27image" name="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> - -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Modifying an image border<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">setBorderWidth</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"img1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>borderWidth <span class="operator token">=</span> width <span class="operator token">+</span> <span class="string token">"px"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</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> -<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>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img1<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> - <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span>px solid green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span> - <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>border test<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> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>FormName<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>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>Make border 20px-wide<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>setBorderWidth(20);<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>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>Make border 5px-wide<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>setBorderWidth(5);<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>form</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> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Exemple_3_:_manipulation_de_styles" name="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but 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="output"> </div> +</body> +</html></pre> + +<h2 id="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +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="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html></pre> + +<h2 id="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> <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és et définis 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 class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Changing color and font-size example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">changeText</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"pid"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script> +function changeText() { + var p = document.getElementById("pid"); - p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"blue"</span> - p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontSize <span class="operator token">=</span> <span class="string token">"18pt"</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</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> + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pid<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>window.location.href <span class="punctuation token">=</span> <span class="punctuation token">'</span>http://www.cnn.com/<span class="punctuation token">'</span>;<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>linker<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</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><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rec<span class="punctuation token">"</span></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">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeText();<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> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> -<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>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style" name="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> +<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> <p>La propriété <code>styleSheets</code> de l'objet <code>document</code> 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 <code>stylesheet</code>, <code>style</code> et <code>CSSRule</code>, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.</p> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> ss <span class="operator token">=</span> document<span class="punctuation token">.</span>styleSheets<span class="punctuation token">;</span> +<pre class="brush:js">var ss = document.styleSheets; -<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> ss<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</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> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">.</span>length<span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">dump</span><span class="punctuation token">(</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">[</span>j<span class="punctuation token">]</span><span class="punctuation token">.</span>selectorText <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +}</pre> <p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :</p> @@ -150,221 +150,221 @@ P #LUMPY </pre> -<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements" name="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements"><a id="Exemple_5_:_propagation_d'évènements" name="Exemple_5_:_propagation_d'évènements"></a>Exemple 5 : propagation d'évènements</h2> +<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements">Exemple 5 : propagation d'évènements</h2> <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 <code>stopEvent</code>, qui modifie la valeur de la cellule inférieure du tableau.</p> <p>Cependant, <code>stopEvent</code> appelle également une méthode d'objet <code>event</code>, {{domxref("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 {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode <code>stopEvent</code> 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 et un message d'alerte est affiché pour le confirmer.</p> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Event Propagation<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token"><span class="id token">#t-daddy</span> </span><span class="punctuation token">{</span> <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid red <span class="punctuation token">}</span> -<span class="selector token"><span class="id token">#c1</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">stopEvent</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"c2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - c2<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"hello"</span><span class="punctuation token">;</span> +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; - <span class="comment token">// cela devrait empêcher t-daddy d'obtenir le click.</span> - ev<span class="punctuation token">.</span><span class="function token">stopPropagation</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"event propagation halted."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + // cela devrait empêcher t-daddy d'obtenir le click. + ev.stopPropagation(); + alert("event propagation halted."); +} -<span class="keyword token">function</span> <span class="function token">load</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"tbl1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - elem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> stopEvent<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>load();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<body onload="load();"> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t-daddy<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>alert(<span class="punctuation token">'</span>hi<span class="punctuation token">'</span>);<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>tr</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tbl1<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>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>one<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>two<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> -<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>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_6_:_getComputedStyle" name="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> +<h2 id="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> -<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} 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 {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p> +<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} 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 {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="/fr/docs/Web/CSS/Reference">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 class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>getComputedStyle example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<title>getComputedStyle example</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">cStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> RefDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"d1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> txtHeight <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> h_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"height"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); - txtHeight<span class="punctuation token">.</span>value <span class="operator token">=</span> h_style<span class="punctuation token">;</span> + txtHeight.value = h_style; - <span class="keyword token">var</span> txtWidth <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> w_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"width"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); - txtWidth<span class="punctuation token">.</span>value <span class="operator token">=</span> w_style<span class="punctuation token">;</span> + txtWidth.value = w_style; - <span class="keyword token">var</span> txtBackgroundColor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> b_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"background-color"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); - txtBackgroundColor<span class="punctuation token">.</span>value <span class="operator token">=</span> b_style<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + txtBackgroundColor.value = b_style; +} +</script> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token"><span class="id token">#d1</span> </span><span class="punctuation token">{</span> - <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">173</span>, <span class="number token">216</span>, <span class="number token">230</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> - <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>d1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="entity token" title=" ">&nbsp;</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<div id="d1">&nbsp;</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><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> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</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">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cStyles();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>getComputedStyle<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - height<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<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>1<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - max-width<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<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>2<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - bg-color<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<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>3<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> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<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> -<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>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event" name="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2> +<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2> <p>Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle <code>for..in</code> pour parcourir les propriétés d'un objet et obtenir leurs valeurs.</p> -<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p> +<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p> <p>Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.</p> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<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>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<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>title</span><span class="punctuation token">></span></span>Show Event properties<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token">table </span><span class="punctuation token">{</span> <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token">thead </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token">td </span><span class="punctuation token">{</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">10</span>px <span class="number token">2</span>px <span class="number token">10</span>px<span class="punctuation token">;</span> <span class="punctuation token">}</span> +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } -<span class="selector token"><span class="class token">.odd</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#efdfef</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token"><span class="class token">.even</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<script> -<span class="keyword token">function</span> <span class="function token">showEventProperties</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">function</span> <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><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>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } - <span class="keyword token">var</span> e <span class="operator token">=</span> e <span class="operator token">||</span> window<span class="punctuation token">.</span>event<span class="punctuation token">;</span> - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'eventType'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> e<span class="punctuation token">.</span>type<span class="punctuation token">;</span> + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; - <span class="keyword token">var</span> table <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> thead <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">createTHead</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> row <span class="operator token">=</span> thead<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> lableList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'#'</span><span class="punctuation token">,</span> <span class="string token">'Property'</span><span class="punctuation token">,</span> <span class="string token">'Value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> len <span class="operator token">=</span> lableList<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; - <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>len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> lableList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } - <span class="keyword token">var</span> tbody <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> - table<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbody<span class="punctuation token">)</span><span class="punctuation token">;</span> + var tbody = document.createElement('tbody'); + table.appendChild(tbody); - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> p <span class="keyword token">in</span> e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - row <span class="operator token">=</span> tbody<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - row<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="punctuation token">(</span>row<span class="punctuation token">.</span>rowIndex <span class="operator token">%</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="operator token">?</span> <span class="string token">'odd'</span><span class="punctuation token">:</span><span class="string token">'even'</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> row<span class="punctuation token">.</span>rowIndex<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> p<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> e<span class="punctuation token">[</span>p<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } - document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>table<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + document.body.appendChild(table); +} -window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="function token">showEventProperties</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> -<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>h1</span><span class="punctuation token">></span></span>Properties of the DOM <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>eventType<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>span</span><span class="punctuation token">></span></span> Event Object<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</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> +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</html></pre> -<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table" name="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> +<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> <p>L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}</p> <p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p> -<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>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>table0<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>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Row 0 Cell 0<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Row 0 Cell 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'table0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> row <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> cell<span class="punctuation token">,</span> - text<span class="punctuation token">;</span> +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; -<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> - cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - text <span class="operator token">=</span> <span class="string token">'Row '</span> <span class="operator token">+</span> row<span class="punctuation token">.</span>rowIndex <span class="operator token">+</span> <span class="string token">' Cell '</span> <span class="operator token">+</span> i<span class="punctuation token">;</span> - cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script></pre> -<h4 id="Notes" name="Notes">Notes</h4> +<h4 id="Notes">Notes</h4> <ul> <li>N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.</li> <li>Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément <code>tbody</code> dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément <code>table</code> (les lignes seront ajoutées au dernier élément <code>tbody</code>).</li> - <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li> + <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li> </ul> <h2 id="Subnav">Subnav</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> </ul> |