diff options
Diffstat (limited to 'files/fr/web/api/document_object_model')
8 files changed, 576 insertions, 605 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> diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html index d599a27ad5..ed1a422071 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -10,9 +10,9 @@ original_slug: Comment_créer_un_arbre_DOM --- <p> </p> -<p>Cet article décrit comment utiliser l'API <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p> +<p>Cet article décrit comment utiliser l'API <a href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p> -<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM" name="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> +<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> <p>Considérons le document XML suivant :</p> @@ -85,63 +85,63 @@ peopleElem.appendChild(personElem2); doc.appendChild(peopleElem); </pre> -<p>Voir également le chapitre <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p> +<p>Voir également le chapitre <a href="/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p> <p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> - <span class="string token">"people"</span><span class="punctuation token">:</span> <span class="punctuation token">{</span> - <span class="string token">"person"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 main st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"arlington"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ma"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> - <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"eric"</span><span class="punctuation token">,</span> - <span class="string token">"@middle-initial"</span><span class="punctuation token">:</span> <span class="string token">"H"</span><span class="punctuation token">,</span> - <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"jung"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 north st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"atlanta"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ga"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 west st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"seattle"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"wa"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south avenue"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> - <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"jed"</span><span class="punctuation token">,</span> - <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"brown"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="Alors_quoi_.3F" name="Alors_quoi_.3F">Et après ?</h3> - -<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="https://developer.mozilla.org/fr/docs/XSLT">XSLT</a>, <a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">XLink</a>, convertis en un objet JavaScript à travers un <a href="https://developer.mozilla.org/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p> +<pre class="brush: js">{ + "people": { + "person": [{ + "address": [{ + "@street": "321 south st", + "@city": "denver", + "@state": "co", + "@country": "usa" + }, { + "@street": "123 main st", + "@city": "arlington", + "@state": "ma", + "@country": "usa" + }], + "@first-name": "eric", + "@middle-initial": "H", + "@last-name": "jung" + }, { + "address": [{ + "@street": "321 north st", + "@city": "atlanta", + "@state": "ga", + "@country": "usa" + }, { + "@street": "123 west st", + "@city": "seattle", + "@state": "wa", + "@country": "usa" + }, { + "@street": "321 south avenue", + "@city": "denver", + "@state": "co", + "@country": "usa" + }], + "@first-name": "jed", + "@last-name": "brown" + }] + } +}</pre> + +<h3 id="Alors_quoi_.3F">Et après ?</h3> + +<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="/fr/docs/XSLT">XSLT</a>, <a href="/fr/docs/Glossaire/XLink">XLink</a>, convertis en un objet JavaScript à travers un <a href="/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p> <p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Glossaire/XML" title="en/XML">XML</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/JXON" title="en/JXON">JXON</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="/fr/docs/Glossaire/XML">XML</a></li> + <li><a href="/fr/docs/Archive/JXON">JXON</a></li> + <li><a href="/fr/docs/XPath">XPath</a></li> + <li><a href="/fr/docs/E4X">E4X (ECMAScript for XML)</a></li> + <li><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></li> </ul> diff --git a/files/fr/web/api/document_object_model/index.html b/files/fr/web/api/document_object_model/index.html index cf44a48c6d..dad3cd1a68 100644 --- a/files/fr/web/api/document_object_model/index.html +++ b/files/fr/web/api/document_object_model/index.html @@ -10,13 +10,12 @@ translation_of: Web/API/Document_Object_Model --- <div>{{DefaultAPISidebar("DOM")}}</div> -<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. <span id="result_box" lang="fr"><span>Les nœuds peuvent être associés à des gestionnaires d'événements.</span> <span>Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</span></span></p> +<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</p> -<p>Pour mieux comprendre le fonctionnement du DOM, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p> +<p>Pour mieux comprendre le fonctionnement du DOM, <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p> <h2 id="Interfaces_du_DOM">Interfaces du DOM</h2> -<div class="index"> <ul> <li>{{domxref("Attr")}}</li> <li>{{domxref("CharacterData")}}</li> @@ -60,13 +59,11 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("Worker")}}</li> <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> </ul> -</div> <h2 id="Interfaces_obsolètes_du_DOM_obsolete_inline">Interfaces obsolètes du DOM {{obsolete_inline}}</h2> <p>Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :</p> -<div class="index"> <ul> <li>{{domxref("CDATASection")}}</li> <li>{{domxref("DocumentTouch")}}</li> @@ -87,7 +84,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("TypeInfo")}}</li> <li>{{domxref("UserDataHandler")}}</li> </ul> -</div> <h2 id="Interfaces_HTML">Interfaces HTML</h2> @@ -97,7 +93,6 @@ translation_of: Web/API/Document_Object_Model <h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3> -<div class="index"> <ul> <li>{{domxref("HTMLAnchorElement")}}</li> <li>{{domxref("HTMLAppletElement")}}</li> @@ -170,11 +165,9 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("HTMLUnknownElement")}}</li> <li>{{domxref("HTMLVideoElement")}}</li> </ul> -</div> <h3 id="Autres_interfaces">Autres interfaces</h3> -<div class="index"> <ul> <li>{{domxref("CanvasRenderingContext2D")}}</li> <li>{{domxref("CanvasGradient")}}</li> @@ -191,22 +184,18 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("RadioNodeList")}}</li> <li>{{domxref("MediaError")}}</li> </ul> -</div> <h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3> -<div class="index"> <ul> <li>{{domxref("HTMLBaseFontElement")}}</li> <li>{{domxref("HTMLIsIndexElement")}}</li> </ul> -</div> -<h2 id="Interfaces_SVG"><a id="SVG_interfaces" name="SVG_interfaces">Interfaces SVG</a></h2> +<h2 id="Interfaces_SVG">Interfaces SVG</a></h2> <h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3> -<div class="index"> <ul> <li>{{domxref("SVGAElement")}}</li> <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> @@ -307,7 +296,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGViewElement")}}</li> <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> </ul> -</div> <h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3> @@ -319,7 +307,6 @@ translation_of: Web/API/Document_Object_Model <h4 id="Interfaces_statiques">Interfaces statiques</h4> -<div class="index"> <ul> <li>{{domxref("SVGAngle")}}</li> <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> @@ -362,11 +349,9 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGTransform")}}</li> <li>{{domxref("SVGTransformList")}}</li> </ul> -</div> <h4 id="Interfaces_animées">Interfaces animées</h4> -<div class="index"> <ul> <li>{{domxref("SVGAnimatedAngle")}}</li> <li>{{domxref("SVGAnimatedBoolean")}}</li> @@ -383,20 +368,16 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGAnimatedString")}}</li> <li>{{domxref("SVGAnimatedTransformList")}}</li> </ul> -</div> <h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3> -<div class="index"> <ul> <li>{{domxref("ElementTimeControl")}}</li> <li>{{domxref("TimeEvent")}}</li> </ul> -</div> <h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3> -<div class="index"> <ul> <li>{{domxref("GetSVGDocument")}}</li> <li>{{domxref("ShadowAnimation")}}</li> @@ -419,7 +400,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGZoomAndPan")}}</li> <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html index a33909ef06..fa1af30b15 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -87,15 +87,15 @@ p_list = doc.getElementsByTagName("para"); <p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p> +<div class="note"> +<p><strong>Note :</strong> Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p> </div> <p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p> <p>Le tableau suivant décrit brièvement ces types de données.</p> -<table class="standard-table" dir="ltr" style="height: 234px; width: 852px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Type de donnée (Interface)</th> diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index f8be47d2bc..72893cd5ab 100644 --- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -13,22 +13,24 @@ original_slug: >- --- <div>{{ gecko_minversion_header("1.9.1") }}</div> -<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p> +<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a href="/fr/docs/Web/API/element" ><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p> <h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2> -<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a> ou <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> :</p> +<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a href="/fr/docs/Web/API/document" ><code>Document</code></a>, <a href="/fr/docs/Web/API/DocumentFragment" ><code>DocumentFragment</code></a> ou <a href="/fr/docs/Web/API/element" ><code>Element</code></a> :</p> <dl> <dt><code>querySelector</code></dt> - <dd>Renvoie le premier noeud <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd> + <dd>Renvoie le premier noeud <a href="/fr/docs/Web/API/element" ><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd> <dt><code>querySelectorAll</code></dt> - <dd>Renvoie une <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd> + <dd>Renvoie une <a href="/fr/docs/Web/API/NodeList" ><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd> </dl> -<div class="note"><strong>Note :</strong> La <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> retournée par <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</div> +<div class="note"> + <p><strong>Note :</strong> La <code><a href="/fr/docs/Web/API/NodeList" >NodeList</a></code> retournée par <code><a href="/fr/docs/Web/API/Element/querySelectorAll" >querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</p> +</div> -<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> et <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a>, ainsi que dans l'article <a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour querySelector</a>.</p> +<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a href="/fr/docs/Web/API/Element/querySelector" ><code>querySelector()</code></a> et <a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>querySelectorAll()</code></a>, ainsi que dans l'article <a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a>.</p> <h2 id="Sélecteurs">Sélecteurs</h2> @@ -47,10 +49,10 @@ original_slug: >- <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Extraits de code pour querySelector</a></li> + <li><a href="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li> + <li><a href="/fr/docs/Web/API/Element/querySelector" ><code>element.querySelector</code></a></li> + <li><a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>element.querySelectorAll</code></a></li> + <li><a href="/fr/docs/Web/API/Document/querySelector" ><code>document.querySelector</code></a></li> + <li><a href="/fr/docs/Web/API/Document/querySelectorAll" ><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a></li> </ul> diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html index b84186a767..e21ba347fa 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -13,54 +13,56 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript --- <p> </p> -<h2 id="Introduction" name="Introduction">Introduction</h2> +<h2 id="Introduction">Introduction</h2> <p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p> -<div class="note">Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</div> +<div class="note"> + <p><strong>Note :</strong>Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</p> +</div> -<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> +<h2 id="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Generate a table.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>generate_table()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="button" value="Generate a table." onclick="generate_table()"></pre> <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">generate_table</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// get the reference for the body</span> - <span class="keyword token">var</span> body <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - - <span class="comment token">// creates a <table> element and a <tbody> element</span> - <span class="keyword token">var</span> tbl <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> tblBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// creating all cells</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// creates a table row</span> - <span class="keyword token">var</span> row <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Create a <td> element and a text node, make the text</span> - <span class="comment token">// node the contents of the <td>, and put the <td> at</span> - <span class="comment token">// the end of the table row</span> - <span class="keyword token">var</span> cell <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> cellText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"cell in row "</span><span class="operator token">+</span>i<span class="operator token">+</span><span class="string token">", column "</span><span class="operator token">+</span>j<span class="punctuation token">)</span><span class="punctuation token">;</span> - cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cellText<span class="punctuation token">)</span><span class="punctuation token">;</span> - row<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cell<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">// add the row to the end of the table body</span> - tblBody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>row<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">// put the <tbody> in the <table></span> - tbl<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tblBody<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// appends <table> into <body></span> - body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbl<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// sets the border attribute of tbl to 2;</span> - tbl<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"border"</span><span class="punctuation token">,</span> <span class="string token">"2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function generate_table() { + // get the reference for the body + var body = document.getElementsByTagName("body")[0]; + + // creates a <table> element and a <tbody> element + var tbl = document.createElement("table"); + var tblBody = document.createElement("tbody"); + + // creating all cells + for (var i = 0; i < 2; i++) { + // creates a table row + var row = document.createElement("tr"); + + for (var j = 0; j < 2; j++) { + // Create a <td> element and a text node, make the text + // node the contents of the <td>, and put the <td> at + // the end of the table row + var cell = document.createElement("td"); + var cellText = document.createTextNode("cell in row "+i+", column "+j); + cell.appendChild(cellText); + row.appendChild(cell); + } + + // add the row to the end of the table body + tblBody.appendChild(row); + } + + // put the <tbody> in the <table> + tbl.appendChild(tblBody); + // appends <table> into <body> + body.appendChild(tbl); + // sets the border attribute of tbl to 2; + tbl.setAttribute("border", "2"); +}</pre> <p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> @@ -108,36 +110,36 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> -<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> +<p><img src="sample1-tabledom.jpg"></p> <p>Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.</p> -<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html" name="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : <span id="result_box" lang="fr"><span>Définition de la couleur d'arrière-plan d'un paragraphe</span></span></h2> +<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : Définition de la couleur d'arrière-plan d'un paragraphe</h2> -<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. <span id="result_box" lang="fr"><span>Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.</span> <span>Le premier élément de la liste se trouve à la position [0] dans le tableau.</span></span></p> +<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position [0] dans le tableau.</p> <h3 id="Contenu_HTML_2">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Set paragraph background color<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>set_background()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><body> + <input type="button" value="Set paragraph background color" onclick="set_background()"> + <p>hi</p> + <p>hello</p> +</body></pre> <h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">set_background</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// </span></code>récupère une liste de tous les éléments body (il n'y en aura qu'un)<code class="language-js"><span class="comment token">,</span> - <span class="comment token">// </span></code>et sélectionne le premier (indice 0) de ces éléments<code class="language-js"> - myBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush: js">function set_background() { + // récupère une liste de tous les éléments body (il n'y en aura qu'un), + // et sélectionne le premier (indice 0) de ces éléments + myBody = document.getElementsByTagName("body")[0]; - <span class="comment token">// </span></code>à présent, trouve tous les éléments p enfants de cet élément body<code class="language-js"> - myBodyElements <span class="operator token">=</span> myBody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // à présent, trouve tous les éléments p enfants de cet élément body + myBodyElements = myBody.getElementsByTagName("p"); - <span class="comment token">// </span></code>récupère le second élément de cette liste d'éléments p<code class="language-js"> - myP <span class="operator token">=</span> myBodyElements<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - myP<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"rgb(255,0,0)"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + // récupère le second élément de cette liste d'éléments p + myP = myBodyElements[1]; + myP.style.background = "rgb(255,0,0)"; +}</pre> <p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> @@ -145,17 +147,17 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <ol> <li>On récupère d'abord une liste de tous les éléments body avec - <pre class="line-numbers language-html"><code class="language-html">myBody = document.getElementsByTagName("body")[0]</code></pre> + <pre class="brush:html">myBody = document.getElementsByTagName("body")[0]</pre> Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li> <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - <pre class="line-numbers language-html"><code class="language-html">myBodyElements = myBody.getElementsByTagName("p");</code></pre> + <pre class="brush:html">myBodyElements = myBody.getElementsByTagName("p");</pre> </li> <li>Pour finir on prend le deuxième élément de la liste des éléments p avec - <pre class="line-numbers language-html"><code class="language-html">myP = myBodyElements[1];</code></pre> + <pre class="brush:html">myP = myBodyElements[1];</pre> </li> </ol> -<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p> +<p><img src="sample2a2.jpg"></p> <p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p> @@ -163,15 +165,15 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript // ajoute une propriété de style inline </pre> -<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29" name="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3> +<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3> <p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p> -<pre class="line-numbers language-html"><code class="language-html">myTextNode = document.createTextNode("world");</code></pre> +<pre class="brush:html">myTextNode = document.createTextNode("world");</pre> <p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p> -<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29" name="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> +<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> <p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p> @@ -180,11 +182,13 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p> -<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p> +<p><img src="sample2b2.jpg"></p> -<div class="note">L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</div> +<div class="note"> + <p><strong>Note :</strong>L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</p> +</div> -<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29" name="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3> +<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3> <p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p> @@ -192,9 +196,9 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript body.appendChild(nouveauNoeudBALISEP); </pre> -<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p> +<p><img src="sample2c.jpg"></p> -<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29" name="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3> +<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3> <p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément <p>) le nœud texte contenant le mot « world » :</p> @@ -208,17 +212,17 @@ body.appendChild(nouveauNoeudBALISEP); <p>L'arborescence des objets se présente désormais comme ceci :</p> -<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p> +<p><img src="sample2d.jpg"></p> -<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29" name="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> +<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> <p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p> -<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML" name="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> +<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> -<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> +<p><img src="sample1-tabledom.jpg"></p> -<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence" name="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> +<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> <p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p> @@ -230,7 +234,9 @@ body.appendChild(nouveauNoeudBALISEP); <p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> -<div class="note">Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</div> +<div class="note"> + <p><strong>Note :</strong> Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</p> +</div> <pre><head> <title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> @@ -276,34 +282,36 @@ body.appendChild(nouveauNoeudBALISEP); </html> </pre> -<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS" name="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> +<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> -<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau" name="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> +<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> <p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément <body>.</p> -<div class="note">Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</p> +</div> -<pre class="brush:js line-numbers language-js"><code class="language-js">mybody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mytable <span class="operator token">=</span> mybody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mytablebody <span class="operator token">=</span> mytable<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -myrow <span class="operator token">=</span> mytablebody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mycel <span class="operator token">=</span> myrow<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush:js">mybody = document.getElementsByTagName("body")[0]; +mytable = mybody.getElementsByTagName("table")[0]; +mytablebody = mytable.getElementsByTagName("tbody")[0]; +myrow = mytablebody.getElementsByTagName("tr")[1]; +mycel = myrow.getElementsByTagName("td")[1]; -<span class="comment token">// premier élément du noeud liste des enfants de mycel</span> -myceltext<span class="operator token">=</span>mycel<span class="punctuation token">.</span>childNodes<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +// premier élément du noeud liste des enfants de mycel +myceltext=mycel.childNodes[0]; -<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>contenu de currenttext est le contenu des données de</span></span><code class="language-js"><span class="comment token"> myceltext</span> -currenttext<span class="operator token">=</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>myceltext<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> -mybody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currenttext<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +// contenu de currenttext est le contenu des données de myceltext +currenttext=document.createTextNode(myceltext.data); +mybody.appendChild(currenttext);</pre> -<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut" name="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> +<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> <p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p> -<pre class="line-numbers language-html"><code class="language-html">mytable.getAttribute("border");</code></pre> +<pre class="brush:html">mytable.getAttribute("border");</pre> -<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style" name="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3> +<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3> <p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p> @@ -340,7 +348,7 @@ mybody<span class="punctuation token">.</span><span class="function token">appen </html> </pre> -<h4 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h4> +<h4 id="Original_Document_Information">Original Document Information</h4> <dl> <dt>Author(s)</dt> @@ -350,4 +358,4 @@ mybody<span class="punctuation token">.</span><span class="function token">appen </dl> <p><br> - <span class="comment">Interwik</span></p> + Interwik</p> diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html index a509d0525b..c59fe45427 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -11,9 +11,9 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ --- <p>Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.</p> -<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu" name="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> +<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> -<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p> +<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p> <pre class="eval"><html> <head> @@ -26,68 +26,59 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ </html> </pre> -<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="https://developer.mozilla.org/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> +<p><img src="using_the_w3c_dom_level_1_core-doctree.jpg"></p> <p>Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.</p> <p>Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)</p> -<h2 id="Ce_que_permet_le_DOM_Level_1_Core" name="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> +<h2 id="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> -<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p> +<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p> -<h2 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h2> +<h2 id="Un_exemple_simple">Un exemple simple</h2> <p>Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :</p> <h3 id="Contenu_HTML">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Change this document.<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>change()<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>h2</span><span class="punctuation token">></span></span>Header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</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>Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body></pre> <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">function</span> <span class="function token">change</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// </span></code><span id="result_box" lang="fr"><span>document.getElementsByTagName ("H2") renvoie un NodeList du</span></span><code class="language-js"><span class="comment token"> <h2></span> - <span class="comment token">// éléments dans le document, et le premier est le nombre 0:</span> - - <span class="keyword token">var</span> header <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"H2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// le firstChild de l'en-tête est un noeud texte::</span> - header<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"A dynamic document"</span><span class="punctuation token">;</span> - <span class="comment token">// maintenant l'en-tête est "Un document dynamique".</span> - - <span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - para<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"This is the first paragraph."</span><span class="punctuation token">;</span> - - <span class="comment token">// crée un nouveau noeud texte pour le second paragraphe</span> - <span class="keyword token">var</span> newText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"This is the second paragraph."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// crée un nouvel Element pour le second paragraphe</span> - <span class="keyword token">var</span> newElement <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">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// pose le texte dans le paragraphe</span> - newElement<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newText<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// et pose le paragraphe à la fin du document en l'ajoutant</span> - <span class="comment token">// au BODY (qui est le parent de para)</span> - para<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span></code></pre> +<pre class="brush: js"> function change() { + // document.getElementsByTagName ("H2") renvoie un NodeList du <h2> + // éléments dans le document, et le premier est le nombre 0: + + var header = document.getElementsByTagName("H2").item(0); + // le firstChild de l'en-tête est un noeud texte:: + header.firstChild.data = "A dynamic document"; + // maintenant l'en-tête est "Un document dynamique". + + var para = document.getElementsByTagName("P").item(0); + para.firstChild.data = "This is the first paragraph."; + + // crée un nouveau noeud texte pour le second paragraphe + var newText = document.createTextNode("This is the second paragraph."); + // crée un nouvel Element pour le second paragraphe + var newElement = document.createElement("P"); + // pose le texte dans le paragraphe + newElement.appendChild(newText); + // et pose le paragraphe à la fin du document en l'ajoutant + // au BODY (qui est le parent de para) + para.parentNode.appendChild(newElement); + }</pre> <p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p> -<p>Vous pouvez voir ce script dans <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> +<p>Vous pouvez voir ce script dans <a href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> -<h3 id="Pour_en_savoir_plus" name="Pour_en_savoir_plus">Pour en apprendre plus</h3> +<h3 id="Pour_en_savoir_plus">Pour en apprendre plus</h3> -<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="https://developer.mozilla.org/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p> +<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p> -<p>Consultez également la <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p> - -<div class="originaldocinfo"> -<p><strong>Informations sur le document original</strong></p> - -<ul> - <li>Auteur(s) : L. David Baron <dbaron at dbaron dot org></li> - <li>Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li> -</ul> -</div> +<p>Consultez également la <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p>
\ No newline at end of file diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html index d13a541dc7..9529722049 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.html +++ b/files/fr/web/api/document_object_model/whitespace/index.html @@ -5,7 +5,7 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -<h2 id="Le_probl.C3.A8me" name="Le_probl.C3.A8me">Le problème</h2> +<h2 id="Le_probl.C3.A8me">Le problème</h2> <p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p> @@ -30,38 +30,38 @@ translation_of: Web/API/Document_Object_Model/Whitespace </html> </pre> -<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> +<p><img alt="Arbre du DOM équivalent à l'exemple HTML ci-avant" src="dom-string.png"></p> <p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p> -<h2 id="Rendre_les_choses_plus_faciles" name="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> +<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> -<p><span id="result_box" lang="fr"><span>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</span></span></p> +<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!-- jolie impression conventionnelle +<pre class="brush: html"><!-- jolie impression conventionnelle avec des espaces entre les balises: - --></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>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</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="comment token"><!-- jolie impression adaptée au problème : - --></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>ul</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</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></code></pre> + --> +<div> + <ul> + <li>Position 1</li> + <li>Position 2</li> + <li>Position 3</li> + </ul> +</div> + +<!-- jolie impression adaptée au problème : + --> +<div + ><ul + ><li>Position 1</li + ><li>Position 2</li + ><li>Position 3</li + ></ul +></div></pre> <p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">/** +<pre class="brush: js">/** * Tout au long, les espaces sont définis comme l'un des caractères * "\t" TAB \u0009 * "\n" LF \u000A @@ -70,25 +70,25 @@ translation_of: Web/API/Document_Object_Model/Whitespace * * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement * espaces (et aussi d'autres caractères). - */</span> + */ -<span class="comment token">/** +/** * Détermine si le contenu du texte d'un nœud est entièrement blanc. * * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| * @return True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace, * sinon false <em>(faux)</em>. - */</span> -<span class="keyword token">function</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - <span class="keyword token">return</span> <span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[^\t\n\r ]/</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>nod<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + */ +function is_all_ws( nod ) +{ + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + return !(/[^\t\n\r ]/.test(nod.textContent)); +} -<span class="comment token">/** +/** * Détermine si le nœud doit être ignoré par les fonctions d'itération. * * @param nod Un objet implémentant l'interface DOM1 |Node|. @@ -96,15 +96,15 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| * et autrement false <em>(faux)</em>. - */</span> + */ -<span class="keyword token">function</span> <span class="function token">is_ignorable</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="punctuation token">(</span> nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">8</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="comment token">// un nœud commentaire</span> - <span class="punctuation token">(</span> <span class="punctuation token">(</span>nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span>nod<span class="punctuation token">)</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// un nœud texte, tout espace</span> -<span class="punctuation token">}</span> +function is_ignorable( nod ) +{ + return ( nod.nodeType == 8) || // un nœud commentaire + ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace +} -<span class="comment token">/** +/** * Version de |previousSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |previousSibling| est une propriété * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est @@ -116,16 +116,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_before</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * @@ -134,16 +134,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_after</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |lastChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |lastChild| est une propriété * de tous les nœuds DOM qui donnent le dernier des nœuds contenus @@ -154,18 +154,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">last_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>previousSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * @@ -174,18 +174,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">first_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** * Version de |data| cela n'inclut pas les espaces au début * et termine et normalise tous les espaces dans un seul espace. (Normalement * |data | est une propriété des nœuds de texte qui donne le texte du nœud.) @@ -193,40 +193,30 @@ translation_of: Web/API/Document_Object_Model/Whitespace * @param txt Le nœud de texte dont les données doivent être renvoyées * @return Une chaîne donnant le contenu du nœud de texte avec * espace blanc s'est effondré. - */</span> -<span class="keyword token">function</span> <span class="function token">data_of</span><span class="punctuation token">(</span> txt <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> data <span class="operator token">=</span> txt<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[\t\n\r ]+/g</span><span class="punctuation token">,</span> <span class="string token">" "</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span>data<span class="punctuation token">.</span>length <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">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length <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">return</span> data<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h2 id="Exemple" name="Exemple">Exemple</h2> + */ +function data_of( txt ) +{ + var data = txt.textContent; + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +}</pre> + +<h2 id="Exemple">Exemple</h2> <p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> cur <span class="operator token">=</span> <span class="function token">first_child</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">"test"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">while</span> <span class="punctuation token">(</span>cur<span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">data_of</span><span class="punctuation token">(</span>cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"This is the third paragraph."</span><span class="punctuation token">)</span> - <span class="punctuation token">{</span> - cur<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"magic"</span><span class="punctuation token">;</span> - cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"This is the magic paragraph."</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - cur <span class="operator token">=</span> <span class="function token">node_after</span><span class="punctuation token">(</span>cur<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="originaldocinfo"> -<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> - -<ul> - <li>Auteur : <a class="external" href="http://dbaron.org">L. David Baron</a></li> - <li>Dernière mise à jour : 1er janvier 2003</li> - <li>Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li> -</ul> -</div> +<pre class="brush: js">var cur = first_child(document.getElementById("test")); +while (cur) +{ + if (data_of(cur.firstChild) == "This is the third paragraph.") + { + cur.className = "magic"; + cur.firstChild.textContent = "This is the magic paragraph."; + } + cur = node_after(cur); +}</pre>
\ No newline at end of file |