diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/document_object_model | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/document_object_model')
9 files changed, 1209 insertions, 1169 deletions
diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md index 9754cae903..b9a9de6176 100644 --- a/files/fr/web/api/document_object_model/examples/index.md +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -7,17 +7,18 @@ tags: translation_of: Web/API/Document_Object_Model/Examples 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> +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. -<h2 id="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> +## Exemple 1 : _height_ (hauteur) et width _(largeur)_ -<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> +L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>width/height example</title> -<script> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> function init() { var arrImages = new Array(3); @@ -26,147 +27,153 @@ function init() { arrImages[2] = document.getElementById("image3"); var objOutput = document.getElementById("output"); - var strHtml = "<ul>"; + var strHtml = "<ul>"; - for (var i = 0; i < arrImages.length; i++) { - strHtml += "<li>image" + (i+1) + + 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>"; + "<\/li>"; } - strHtml += "<\/ul>"; + strHtml += "<\/ul>"; objOutput.innerHTML = strHtml; } -</script> -</head> -<body onload="init();"> +</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 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" +<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> + height="50" width="500"> +</p> -<p>Image 3: no height, width, but style="height: 50px; width: 500px;" - <img id="image3" +<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> + style="height: 50px; width: 500px;"> +</p> -<div id="output"> </div> -</body> -</html></pre> +<div id="output"> </div> +</body> +</html> +``` -<h2 id="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> +## Exemple 2 : attributs d'image -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Modifying an image border</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> -<script> +<script> function setBorderWidth(width) { document.getElementById("img1").style.borderWidth = width + "px"; } -</script> -</head> +</script> +</head> -<body> -<p> - <img id="img1" +<body> +<p> + <img id="img1" src="image1.gif" style="border: 5px solid green;" - width="100" height="100" alt="border test"> -</p> + 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> +<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> +</body> +</html> +``` -<h2 id="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> +## Exemple 3 : manipulation de styles -<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> +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. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Changing color and font-size example</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> -<script> +<script> function changeText() { var p = document.getElementById("pid"); p.style.color = "blue" p.style.fontSize = "18pt" } -</script> -</head> -<body> +</script> +</head> +<body> -<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> -<form> - <p><input value="rec" type="button" onclick="changeText();" /></p> -</form> +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> +## Exemple 4 : utilisation de feuilles de style -<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> +La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console. -<pre class="brush:js">var ss = document.styleSheets; +```js +var ss = document.styleSheets; -for(var i = 0; i < ss.length; i++) { - for(var j = 0; j < ss[i].cssRules.length; j++) { +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> +Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : -<pre class="eval">BODY { background-color: darkblue; } -P { font-face: Arial; font-size: 10pt; margin-left: .125in; } -#lumpy { display: none; } -</pre> + BODY { background-color: darkblue; } + P { font-face: Arial; font-size: 10pt; margin-left: .125in; } + #lumpy { display: none; } -<p>Ce script affiche les lignes suivantes :</p> +Ce script affiche les lignes suivantes : -<pre class="eval">BODY -P -#LUMPY -</pre> + BODY + P + #LUMPY -<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements">Exemple 5 : propagation d'évènements</h2> +## Exemple 5 : propagation d'évènements -<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> +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 `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau. -<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> +Cependant, `stopEvent` appelle également une méthode d'objet `event`, {{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 `stopEvent` 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. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Event Propagation</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> -<style> +<style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } -</style> +</style> -<script> +<script> function stopEvent(ev) { c2 = document.getElementById("c2"); c2.innerHTML = "hello"; @@ -180,36 +187,38 @@ function load() { elem = document.getElementById("tbl1"); elem.addEventListener("click", stopEvent, false); } -</script> -</head> +</script> +</head> -<body onload="load();"> +<body onload="load();"> -<table id="t-daddy" onclick="alert('hi');"> - <tr id="tbl1"> - <td id="c1">one</td> - </tr> - <tr> - <td id="c2">two</td> - </tr> -</table> +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> -</body> -</html></pre> +</body> +</html> +``` -<h2 id="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> +## Exemple 6 : getComputedStyle -<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> +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 `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference). -<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> +`getComputedStyle()` renvoie un objet `ComputedCSSStyleDeclaration`, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode `getPropertyValue()` comme montré dans l'exemple suivant. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> +```html +<!DOCTYPE html> +<html lang="en"> +<head> -<title>getComputedStyle example</title> +<title>getComputedStyle example</title> -<script> +<script> function cStyles() { var RefDiv = document.getElementById("d1"); var txtHeight = document.getElementById("t1"); @@ -227,59 +236,61 @@ function cStyles() { txtBackgroundColor.value = b_style; } -</script> +</script> -<style> +<style> #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); height: 20px; max-width: 20px; } -</style> +</style> -</head> +</head> -<body> +<body> -<div id="d1">&nbsp;</div> +<div id="d1"> </div> -<form action=""> - <p> - <button type="button" onclick="cStyles();">getComputedStyle</button> - height<input id="t1" type="text" value="1" /> - max-width<input id="t2" type="text" value="2" /> - bg-color<input id="t3" type="text" value="3" /> - </p> -</form> +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> -</body> -</html></pre> +</body> +</html> +``` -<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> +## Exemple 7 : affichage des propriétés d'un objet `event` -<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> +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 `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. -<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> +Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires. -<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> +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. -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="utf-8"/> -<title>Show Event properties</title> +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> -<style> +<style> table { border-collapse: collapse; } thead { font-weight: bold; } td { padding: 2px 10px 2px 10px; } .odd { background-color: #efdfef; } .even { background-color: #ffffff; } -</style> +</style> -<script> +<script> function showEventProperties(e) { function addCell(row, text) { @@ -296,7 +307,7 @@ function showEventProperties(e) { var lableList = ['#', 'Property', 'Value']; var len = lableList.length; - for (var i=0; i<len; i++) { + for (var i=0; i<len; i++) { addCell(row, lableList[i]); } @@ -317,54 +328,53 @@ function showEventProperties(e) { window.onload = function(event){ showEventProperties(event); } -</script> -</head> +</script> +</head> -<body> -<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> -</body> +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> -</html></pre> +</html> +``` -<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> +## Exemple 8 : utilisation de l'interface DOM Table -<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> +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>Pour ajouter une ligne et quelques cellules à un tableau existant :</p> +Pour ajouter une ligne et quelques cellules à un tableau existant : -<pre class="brush:html"><table id="table0"> - <tr> - <td>Row 0 Cell 0</td> - <td>Row 0 Cell 1</td> - </tr> -</table> +```html +<table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> -<script> +<script> var table = document.getElementById('table0'); var row = table.insertRow(-1); var cell, text; -for (var i = 0; i < 2; i++) { +for (var i = 0; i < 2; i++) { cell = row.insertCell(-1); text = 'Row ' + row.rowIndex + ' Cell ' + i; cell.appendChild(document.createTextNode(text)); } -</script></pre> +</script> +``` -<h4 id="Notes">Notes</h4> +#### Notes -<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="/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li> -</ul> +- 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. +- 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 `tbody` dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément `table` (les lignes seront ajoutées au dernier élément `tbody`). +- Un certain nombre d'autres méthodes utilitaires faisant partie de l'[interface table](/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes) peuvent être utilisées pour créer et modifier des tableaux. -<h2 id="Subnav">Subnav</h2> +## Subnav -<ul> - <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> +- [Référence DOM](/fr/docs/Web/API/Document_Object_Model) +- [Introduction à DOM](/fr/docs/Web/API/Document_Object_Model/Introduction) +- [Les événements et DOM](/fr/docs/Web/API/Document_Object_Model/Events) +- [Exemples](/fr/docs/Web/API/Document_Object_Model/Exemples) diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md index ed1a422071..ff8be434b7 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -8,88 +8,85 @@ tags: translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree original_slug: Comment_créer_un_arbre_DOM --- -<p> </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">Créer dynamiquement un arbre DOM</h3> - -<p>Considérons le document XML suivant :</p> - -<pre class="eval"><?xml version="1.0"?> -<people> - <person first-name="eric" middle-initial="H" last-name="jung"> - <address street="321 south st" city="denver" state="co" country="usa"/> - <address street="123 main st" city="arlington" state="ma" country="usa"/> - </person> - - <person first-name="jed" last-name="brown"> - <address street="321 north st" city="atlanta" state="ga" country="usa"/> - <address street="123 west st" city="seattle" state="wa" country="usa"/> - <address street="321 south avenue" city="denver" state="co" country="usa"/> - </person> -</people> -</pre> - -<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p> - -<pre class="eval">var doc = document.implementation.createDocument("", "", null); -var peopleElem = doc.createElement("people"); - -var personElem1 = doc.createElement("person"); -personElem1.setAttribute("first-name", "eric"); -personElem1.setAttribute("middle-initial", "h"); -personElem1.setAttribute("last-name", "jung"); - -var addressElem1 = doc.createElement("address"); -addressElem1.setAttribute("street", "321 south st"); -addressElem1.setAttribute("city", "denver"); -addressElem1.setAttribute("state", "co"); -addressElem1.setAttribute("country", "usa"); -personElem1.appendChild(addressElem1); - -var addressElem2 = doc.createElement("address"); -addressElem2.setAttribute("street", "123 main st"); -addressElem2.setAttribute("city", "arlington"); -addressElem2.setAttribute("state", "ma"); -addressElem2.setAttribute("country", "usa"); -personElem1.appendChild(addressElem2); - -var personElem2 = doc.createElement("person"); -personElem2.setAttribute("first-name", "jed"); -personElem2.setAttribute("last-name", "brown"); - -var addressElem3 = doc.createElement("address"); -addressElem3.setAttribute("street", "321 north st"); -addressElem3.setAttribute("city", "atlanta"); -addressElem3.setAttribute("state", "ga"); -addressElem3.setAttribute("country", "usa"); -personElem2.appendChild(addressElem3); - -var addressElem4 = doc.createElement("address"); -addressElem4.setAttribute("street", "123 west st"); -addressElem4.setAttribute("city", "seattle"); -addressElem4.setAttribute("state", "wa"); -addressElem4.setAttribute("country", "usa"); -personElem2.appendChild(addressElem4); - -var addressElem5 = doc.createElement("address"); -addressElem5.setAttribute("street", "321 south avenue"); -addressElem5.setAttribute("city", "denver"); -addressElem5.setAttribute("state", "co"); -addressElem5.setAttribute("country", "usa"); -personElem2.appendChild(addressElem5); - -peopleElem.appendChild(personElem1); -peopleElem.appendChild(personElem2); -doc.appendChild(peopleElem); -</pre> - -<p>Voir également le chapitre <a href="/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">{ +Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR/DOM-Level-3-Core/) 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). + +### Créer dynamiquement un arbre DOM + +Considérons le document XML suivant : + + <?xml version="1.0"?> + <people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> + </people> + +L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : + + var doc = document.implementation.createDocument("", "", null); + var peopleElem = doc.createElement("people"); + + var personElem1 = doc.createElement("person"); + personElem1.setAttribute("first-name", "eric"); + personElem1.setAttribute("middle-initial", "h"); + personElem1.setAttribute("last-name", "jung"); + + var addressElem1 = doc.createElement("address"); + addressElem1.setAttribute("street", "321 south st"); + addressElem1.setAttribute("city", "denver"); + addressElem1.setAttribute("state", "co"); + addressElem1.setAttribute("country", "usa"); + personElem1.appendChild(addressElem1); + + var addressElem2 = doc.createElement("address"); + addressElem2.setAttribute("street", "123 main st"); + addressElem2.setAttribute("city", "arlington"); + addressElem2.setAttribute("state", "ma"); + addressElem2.setAttribute("country", "usa"); + personElem1.appendChild(addressElem2); + + var personElem2 = doc.createElement("person"); + personElem2.setAttribute("first-name", "jed"); + personElem2.setAttribute("last-name", "brown"); + + var addressElem3 = doc.createElement("address"); + addressElem3.setAttribute("street", "321 north st"); + addressElem3.setAttribute("city", "atlanta"); + addressElem3.setAttribute("state", "ga"); + addressElem3.setAttribute("country", "usa"); + personElem2.appendChild(addressElem3); + + var addressElem4 = doc.createElement("address"); + addressElem4.setAttribute("street", "123 west st"); + addressElem4.setAttribute("city", "seattle"); + addressElem4.setAttribute("state", "wa"); + addressElem4.setAttribute("country", "usa"); + personElem2.appendChild(addressElem4); + + var addressElem5 = doc.createElement("address"); + addressElem5.setAttribute("street", "321 south avenue"); + addressElem5.setAttribute("city", "denver"); + addressElem5.setAttribute("state", "co"); + addressElem5.setAttribute("country", "usa"); + personElem2.appendChild(addressElem5); + + peopleElem.appendChild(personElem1); + peopleElem.appendChild(personElem2); + doc.appendChild(peopleElem); + +Voir également le chapitre [DOM du tutoriel XUL](/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model) + +Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante : + +```js +{ "people": { "person": [{ "address": [{ @@ -127,21 +124,20 @@ doc.appendChild(peopleElem); "@last-name": "brown" }] } -}</pre> +} +``` -<h3 id="Alors_quoi_.3F">Et après ?</h3> +### Et après ? -<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> +Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. -<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> +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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [XML](/fr/docs/Glossaire/XML) +- [JXON](/fr/docs/Archive/JXON) +- [XPath](/fr/docs/XPath) +- [E4X (ECMAScript for XML)](/fr/docs/E4X) +- [Parsing and serializing XML](/fr/docs/Web/Guide/Parsing_and_serializing_XML) +- [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md index dad3cd1a68..fffb6dd481 100644 --- a/files/fr/web/api/document_object_model/index.md +++ b/files/fr/web/api/document_object_model/index.md @@ -8,401 +8,377 @@ tags: - Référence(2) 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. 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="/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p> - -<h2 id="Interfaces_du_DOM">Interfaces du DOM</h2> - -<ul> - <li>{{domxref("Attr")}}</li> - <li>{{domxref("CharacterData")}}</li> - <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> - <li>{{domxref("Comment")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("Document")}}</li> - <li>{{domxref("DocumentFragment")}}</li> - <li>{{domxref("DocumentType")}}</li> - <li>{{domxref("DOMError")}} {{deprecated_inline}}</li> - <li>{{domxref("DOMException")}}</li> - <li>{{domxref("DOMImplementation")}}</li> - <li>{{domxref("DOMString")}}</li> - <li>{{domxref("DOMTimeStamp")}}</li> - <li>{{domxref("DOMSettableTokenList")}}</li> - <li>{{domxref("DOMStringList")}}</li> - <li>{{domxref("DOMTokenList")}}</li> - <li>{{domxref("Element")}}</li> - <li>{{domxref("EventTarget")}}</li> - <li>{{domxref("HTMLCollection")}}</li> - <li>{{domxref("MutationObserver")}}</li> - <li>{{domxref("Event")}}</li> - <li>{{domxref("MutationRecord")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeFilter")}}</li> - <li>{{domxref("NodeIterator")}}</li> - <li>{{domxref("NodeList")}}</li> - <li>{{domxref("NonDocumentTypeChildNode")}}</li> - <li>{{domxref("ParentNode")}}</li> - <li>{{domxref("ProcessingInstruction")}}</li> - <li>{{domxref("Selection")}}{{experimental_inline}}</li> - <li>{{domxref("Range")}}</li> - <li>{{domxref("Text")}}</li> - <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li> - <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li> - <li>{{domxref("TimeRanges")}}</li> - <li>{{domxref("TreeWalker")}}</li> - <li>{{domxref("URL")}}</li> - <li>{{domxref("Window")}}</li> - <li>{{domxref("Worker")}}</li> - <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> -</ul> - -<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> - -<ul> - <li>{{domxref("CDATASection")}}</li> - <li>{{domxref("DocumentTouch")}}</li> - <li>{{domxref("DOMConfiguration")}}</li> - <li>{{domxref("DOMErrorHandler")}}</li> - <li>{{domxref("DOMImplementationList")}}</li> - <li>{{domxref("DOMImplementationRegistry")}}</li> - <li>{{domxref("DOMImplementationSource")}}</li> - <li>{{domxref("DOMLocator")}}</li> - <li>{{domxref("DOMObject")}}</li> - <li>{{domxref("DOMUserData")}}</li> - <li>{{domxref("ElementTraversal")}}</li> - <li>{{domxref("Entity")}}</li> - <li>{{domxref("EntityReference")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("NameList")}}</li> - <li>{{domxref("Notation")}}</li> - <li>{{domxref("TypeInfo")}}</li> - <li>{{domxref("UserDataHandler")}}</li> -</ul> - -<h2 id="Interfaces_HTML">Interfaces HTML</h2> - -<p>Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.</p> - -<p>Un objet <code>HTMLDocument</code> donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.</p> - -<h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3> - -<ul> - <li>{{domxref("HTMLAnchorElement")}}</li> - <li>{{domxref("HTMLAppletElement")}}</li> - <li>{{domxref("HTMLAreaElement")}}</li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li>{{domxref("HTMLBaseElement")}}</li> - <li>{{domxref("HTMLBodyElement")}}</li> - <li>{{domxref("HTMLBRElement")}}</li> - <li>{{domxref("HTMLButtonElement")}}</li> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("HTMLDataElement")}}</li> - <li>{{domxref("HTMLDataListElement")}}</li> - <li>{{domxref("HTMLDialogElement")}}</li> - <li>{{domxref("HTMLDirectoryElement")}}</li> - <li>{{domxref("HTMLDivElement")}}</li> - <li>{{domxref("HTMLDListElement")}}</li> - <li>{{domxref("HTMLElement")}}</li> - <li>{{domxref("HTMLEmbedElement")}}</li> - <li>{{domxref("HTMLFieldSetElement")}}</li> - <li>{{domxref("HTMLFontElement")}}</li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("HTMLFrameElement")}}</li> - <li>{{domxref("HTMLFrameSetElement")}}</li> - <li>{{domxref("HTMLHeadElement")}}</li> - <li>{{domxref("HTMLHeadingElement")}}</li> - <li>{{domxref("HTMLHtmlElement")}}</li> - <li>{{domxref("HTMLHRElement")}}</li> - <li>{{domxref("HTMLIFrameElement")}}</li> - <li>{{domxref("HTMLImageElement")}}</li> - <li>{{domxref("HTMLInputElement")}}</li> - <li>{{domxref("HTMLKeygenElement")}}</li> - <li>{{domxref("HTMLLabelElement")}}</li> - <li>{{domxref("HTMLLegendElement")}}</li> - <li>{{domxref("HTMLLIElement")}}</li> - <li>{{domxref("HTMLLinkElement")}}</li> - <li>{{domxref("HTMLMapElement")}}</li> - <li>{{domxref("HTMLMediaElement")}}</li> - <li>{{domxref("HTMLMenuElement")}}</li> - <li>{{domxref("HTMLMetaElement")}}</li> - <li>{{domxref("HTMLMeterElement")}}</li> - <li>{{domxref("HTMLModElement")}}</li> - <li>{{domxref("HTMLObjectElement")}}</li> - <li>{{domxref("HTMLOListElement")}}</li> - <li>{{domxref("HTMLOptGroupElement")}}</li> - <li>{{domxref("HTMLOptionElement")}}</li> - <li>{{domxref("HTMLOutputElement")}}</li> - <li>{{domxref("HTMLParagraphElement")}}</li> - <li>{{domxref("HTMLParamElement")}}</li> - <li>{{domxref("HTMLPreElement")}}</li> - <li>{{domxref("HTMLProgressElement")}}</li> - <li>{{domxref("HTMLQuoteElement")}}</li> - <li>{{domxref("HTMLScriptElement")}}</li> - <li>{{domxref("HTMLSelectElement")}}</li> - <li>{{domxref("HTMLSourceElement")}}</li> - <li>{{domxref("HTMLSpanElement")}}</li> - <li>{{domxref("HTMLStyleElement")}}</li> - <li>{{domxref("HTMLTableElement")}}</li> - <li>{{domxref("HTMLTableCaptionElement")}}</li> - <li>{{domxref("HTMLTableCellElement")}}</li> - <li>{{domxref("HTMLTableDataCellElement")}}</li> - <li>{{domxref("HTMLTableHeaderCellElement")}}</li> - <li>{{domxref("HTMLTableColElement")}}</li> - <li>{{domxref("HTMLTableRowElement")}}</li> - <li>{{domxref("HTMLTableSectionElement")}}</li> - <li>{{domxref("HTMLTextAreaElement")}}</li> - <li>{{domxref("HTMLTimeElement")}}</li> - <li>{{domxref("HTMLTitleElement")}}</li> - <li>{{domxref("HTMLTrackElement")}}</li> - <li>{{domxref("HTMLUListElement")}}</li> - <li>{{domxref("HTMLUnknownElement")}}</li> - <li>{{domxref("HTMLVideoElement")}}</li> -</ul> - -<h3 id="Autres_interfaces">Autres interfaces</h3> - -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("CanvasPixelArray")}}</li> - <li>{{domxref("NotifyAudioAvailableEvent")}}</li> - <li>{{domxref("HTMLAllCollection")}}</li> - <li>{{domxref("HTMLFormControlsCollection")}}</li> - <li>{{domxref("HTMLOptionsCollection")}}</li> - <li>{{domxref("HTMLPropertiesCollection")}}</li> - <li>{{domxref("DOMStringMap")}}</li> - <li>{{domxref("RadioNodeList")}}</li> - <li>{{domxref("MediaError")}}</li> -</ul> - -<h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3> - -<ul> - <li>{{domxref("HTMLBaseFontElement")}}</li> - <li>{{domxref("HTMLIsIndexElement")}}</li> -</ul> - -<h2 id="Interfaces_SVG">Interfaces SVG</a></h2> - -<h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3> - -<ul> - <li>{{domxref("SVGAElement")}}</li> - <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimationElement")}}</li> - <li>{{domxref("SVGAnimateElement")}}</li> - <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimateMotionElement")}}</li> - <li>{{domxref("SVGAnimateTransformElement")}}</li> - <li>{{domxref("SVGCircleElement")}}</li> - <li>{{domxref("SVGClipPathElement")}}</li> - <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> - <li>{{domxref("SVGCursorElement")}}</li> - <li>{{domxref("SVGDefsElement")}}</li> - <li>{{domxref("SVGDescElement")}}</li> - <li>{{domxref("SVGElement")}}</li> - <li>{{domxref("SVGEllipseElement")}}</li> - <li>{{domxref("SVGFEBlendElement")}}</li> - <li>{{domxref("SVGFEColorMatrixElement")}}</li> - <li>{{domxref("SVGFEComponentTransferElement")}}</li> - <li>{{domxref("SVGFECompositeElement")}}</li> - <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> - <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> - <li>{{domxref("SVGFEDisplacementMapElement")}}</li> - <li>{{domxref("SVGFEDistantLightElement")}}</li> - <li>{{domxref("SVGFEDropShadowElement")}}</li> - <li>{{domxref("SVGFEFloodElement")}}</li> - <li>{{domxref("SVGFEFuncAElement")}}</li> - <li>{{domxref("SVGFEFuncBElement")}}</li> - <li>{{domxref("SVGFEFuncGElement")}}</li> - <li>{{domxref("SVGFEFuncRElement")}}</li> - <li>{{domxref("SVGFEGaussianBlurElement")}}</li> - <li>{{domxref("SVGFEImageElement")}}</li> - <li>{{domxref("SVGFEMergeElement")}}</li> - <li>{{domxref("SVGFEMergeNodeElement")}}</li> - <li>{{domxref("SVGFEMorphologyElement")}}</li> - <li>{{domxref("SVGFEOffsetElement")}}</li> - <li>{{domxref("SVGFEPointLightElement")}}</li> - <li>{{domxref("SVGFESpecularLightingElement")}}</li> - <li>{{domxref("SVGFESpotLightElement")}}</li> - <li>{{domxref("SVGFETileElement")}}</li> - <li>{{domxref("SVGFETurbulenceElement")}}</li> - <li>{{domxref("SVGFilterElement")}}</li> - <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> - <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGForeignObjectElement")}}</li> - <li>{{domxref("SVGGElement")}}</li> - <li>{{domxref("SVGGeometryElement")}}</li> - <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGradientElement")}}</li> - <li>{{domxref("SVGGraphicsElement")}}</li> - <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGImageElement")}}</li> - <li>{{domxref("SVGLinearGradientElement")}}</li> - <li>{{domxref("SVGLineElement")}}</li> - <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMaskElement")}}</li> - <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMetadataElement")}}</li> - <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGMPathElement")}}</li> - <li>{{domxref("SVGPathElement")}}</li> - <li>{{domxref("SVGPatternElement")}}</li> - <li>{{domxref("SVGPolylineElement")}}</li> - <li>{{domxref("SVGPolygonElement")}}</li> - <li>{{domxref("SVGRadialGradientElement")}}</li> - <li>{{domxref("SVGRectElement")}}</li> - <li>{{domxref("SVGScriptElement")}}</li> - <li>{{domxref("SVGSetElement")}}</li> - <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGStopElement")}}</li> - <li>{{domxref("SVGStyleElement")}}</li> - <li>{{domxref("SVGSVGElement")}}</li> - <li>{{domxref("SVGSwitchElement")}}</li> - <li>{{domxref("SVGSymbolElement")}}</li> - <li>{{domxref("SVGTextContentElement")}}</li> - <li>{{domxref("SVGTextElement")}}</li> - <li>{{domxref("SVGTextPathElement")}}</li> - <li>{{domxref("SVGTextPositioningElement")}}</li> - <li>{{domxref("SVGTitleElement")}}</li> - <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTSpanElement")}}</li> - <li>{{domxref("SVGUseElement")}}</li> - <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGViewElement")}}</li> - <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> -</ul> - -<h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3> - -<p>Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.</p> - -<div class="note"> -<p><strong>Note :</strong> À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.</p> -</div> - -<h4 id="Interfaces_statiques">Interfaces statiques</h4> - -<ul> - <li>{{domxref("SVGAngle")}}</li> - <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGElementInstance")}}</li> - <li>{{domxref("SVGElementInstanceList")}}</li> - <li>{{domxref("SVGLength")}}</li> - <li>{{domxref("SVGLengthList")}}</li> - <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGNameList")}}</li> - <li>{{domxref("SVGNumber")}}</li> - <li>{{domxref("SVGNumberList")}}</li> - <li>{{domxref("SVGPaint")}}</li> - <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPreserveAspectRatio")}}</li> - <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStringList")}}</li> - <li>{{domxref("SVGTransform")}}</li> - <li>{{domxref("SVGTransformList")}}</li> -</ul> - -<h4 id="Interfaces_animées">Interfaces animées</h4> - -<ul> - <li>{{domxref("SVGAnimatedAngle")}}</li> - <li>{{domxref("SVGAnimatedBoolean")}}</li> - <li>{{domxref("SVGAnimatedEnumeration")}}</li> - <li>{{domxref("SVGAnimatedInteger")}}</li> - <li>{{domxref("SVGAnimatedLength")}}</li> - <li>{{domxref("SVGAnimatedLengthList")}}</li> - <li>{{domxref("SVGAnimatedNumber")}}</li> - <li>{{domxref("SVGAnimatedNumberList")}}</li> - <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimatedPoints")}}</li> - <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> - <li>{{domxref("SVGAnimatedRect")}}</li> - <li>{{domxref("SVGAnimatedString")}}</li> - <li>{{domxref("SVGAnimatedTransformList")}}</li> -</ul> - -<h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3> - -<ul> - <li>{{domxref("ElementTimeControl")}}</li> - <li>{{domxref("TimeEvent")}}</li> -</ul> - -<h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3> - -<ul> - <li>{{domxref("GetSVGDocument")}}</li> - <li>{{domxref("ShadowAnimation")}}</li> - <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGDocument")}}</li> - <li>{{domxref("SVGException")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFitToViewBox")}}</li> - <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTests")}}</li> - <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGUnitTypes")}}</li> - <li>{{domxref("SVGUseElementShadowRoot")}}</li> - <li>{{domxref("SVGURIReference")}}</li> - <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGZoomAndPan")}}</li> - <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples">Exemples appliqués pour le DOM</a></li> -</ul> +{{DefaultAPISidebar("DOM")}} + +Le **_Document Object Model_** ou **DOM** (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. + +Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible](/fr/docs/Web/API/Document_Object_Model/Introduction). + +## Interfaces du DOM + +- {{domxref("Attr")}} +- {{domxref("CharacterData")}} +- {{domxref("ChildNode")}} {{experimental_inline}} +- {{domxref("Comment")}} +- {{domxref("CustomEvent")}} +- {{domxref("Document")}} +- {{domxref("DocumentFragment")}} +- {{domxref("DocumentType")}} +- {{domxref("DOMError")}} {{deprecated_inline}} +- {{domxref("DOMException")}} +- {{domxref("DOMImplementation")}} +- {{domxref("DOMString")}} +- {{domxref("DOMTimeStamp")}} +- {{domxref("DOMSettableTokenList")}} +- {{domxref("DOMStringList")}} +- {{domxref("DOMTokenList")}} +- {{domxref("Element")}} +- {{domxref("EventTarget")}} +- {{domxref("HTMLCollection")}} +- {{domxref("MutationObserver")}} +- {{domxref("Event")}} +- {{domxref("MutationRecord")}} +- {{domxref("NamedNodeMap")}} +- {{domxref("Node")}} +- {{domxref("NodeFilter")}} +- {{domxref("NodeIterator")}} +- {{domxref("NodeList")}} +- {{domxref("NonDocumentTypeChildNode")}} +- {{domxref("ParentNode")}} +- {{domxref("ProcessingInstruction")}} +- {{domxref("Selection")}}{{experimental_inline}} +- {{domxref("Range")}} +- {{domxref("Text")}} +- {{domxref("TextDecoder")}} {{experimental_inline}} +- {{domxref("TextEncoder")}} {{experimental_inline}} +- {{domxref("TimeRanges")}} +- {{domxref("TreeWalker")}} +- {{domxref("URL")}} +- {{domxref("Window")}} +- {{domxref("Worker")}} +- {{domxref("XMLDocument")}} {{experimental_inline}} + +## Interfaces obsolètes du DOM {{obsolete_inline}} + +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 : + +- {{domxref("CDATASection")}} +- {{domxref("DocumentTouch")}} +- {{domxref("DOMConfiguration")}} +- {{domxref("DOMErrorHandler")}} +- {{domxref("DOMImplementationList")}} +- {{domxref("DOMImplementationRegistry")}} +- {{domxref("DOMImplementationSource")}} +- {{domxref("DOMLocator")}} +- {{domxref("DOMObject")}} +- {{domxref("DOMUserData")}} +- {{domxref("ElementTraversal")}} +- {{domxref("Entity")}} +- {{domxref("EntityReference")}} +- {{domxref("NamedNodeMap")}} +- {{domxref("NameList")}} +- {{domxref("Notation")}} +- {{domxref("TypeInfo")}} +- {{domxref("UserDataHandler")}} + +## Interfaces HTML + +Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}. + +Un objet `HTMLDocument` donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}. + +### Interfaces des éléments HTML + +- {{domxref("HTMLAnchorElement")}} +- {{domxref("HTMLAppletElement")}} +- {{domxref("HTMLAreaElement")}} +- {{domxref("HTMLAudioElement")}} +- {{domxref("HTMLBaseElement")}} +- {{domxref("HTMLBodyElement")}} +- {{domxref("HTMLBRElement")}} +- {{domxref("HTMLButtonElement")}} +- {{domxref("HTMLCanvasElement")}} +- {{domxref("HTMLDataElement")}} +- {{domxref("HTMLDataListElement")}} +- {{domxref("HTMLDialogElement")}} +- {{domxref("HTMLDirectoryElement")}} +- {{domxref("HTMLDivElement")}} +- {{domxref("HTMLDListElement")}} +- {{domxref("HTMLElement")}} +- {{domxref("HTMLEmbedElement")}} +- {{domxref("HTMLFieldSetElement")}} +- {{domxref("HTMLFontElement")}} +- {{domxref("HTMLFormElement")}} +- {{domxref("HTMLFrameElement")}} +- {{domxref("HTMLFrameSetElement")}} +- {{domxref("HTMLHeadElement")}} +- {{domxref("HTMLHeadingElement")}} +- {{domxref("HTMLHtmlElement")}} +- {{domxref("HTMLHRElement")}} +- {{domxref("HTMLIFrameElement")}} +- {{domxref("HTMLImageElement")}} +- {{domxref("HTMLInputElement")}} +- {{domxref("HTMLKeygenElement")}} +- {{domxref("HTMLLabelElement")}} +- {{domxref("HTMLLegendElement")}} +- {{domxref("HTMLLIElement")}} +- {{domxref("HTMLLinkElement")}} +- {{domxref("HTMLMapElement")}} +- {{domxref("HTMLMediaElement")}} +- {{domxref("HTMLMenuElement")}} +- {{domxref("HTMLMetaElement")}} +- {{domxref("HTMLMeterElement")}} +- {{domxref("HTMLModElement")}} +- {{domxref("HTMLObjectElement")}} +- {{domxref("HTMLOListElement")}} +- {{domxref("HTMLOptGroupElement")}} +- {{domxref("HTMLOptionElement")}} +- {{domxref("HTMLOutputElement")}} +- {{domxref("HTMLParagraphElement")}} +- {{domxref("HTMLParamElement")}} +- {{domxref("HTMLPreElement")}} +- {{domxref("HTMLProgressElement")}} +- {{domxref("HTMLQuoteElement")}} +- {{domxref("HTMLScriptElement")}} +- {{domxref("HTMLSelectElement")}} +- {{domxref("HTMLSourceElement")}} +- {{domxref("HTMLSpanElement")}} +- {{domxref("HTMLStyleElement")}} +- {{domxref("HTMLTableElement")}} +- {{domxref("HTMLTableCaptionElement")}} +- {{domxref("HTMLTableCellElement")}} +- {{domxref("HTMLTableDataCellElement")}} +- {{domxref("HTMLTableHeaderCellElement")}} +- {{domxref("HTMLTableColElement")}} +- {{domxref("HTMLTableRowElement")}} +- {{domxref("HTMLTableSectionElement")}} +- {{domxref("HTMLTextAreaElement")}} +- {{domxref("HTMLTimeElement")}} +- {{domxref("HTMLTitleElement")}} +- {{domxref("HTMLTrackElement")}} +- {{domxref("HTMLUListElement")}} +- {{domxref("HTMLUnknownElement")}} +- {{domxref("HTMLVideoElement")}} + +### Autres interfaces + +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} +- {{domxref("TextMetrics")}} +- {{domxref("ImageData")}} +- {{domxref("CanvasPixelArray")}} +- {{domxref("NotifyAudioAvailableEvent")}} +- {{domxref("HTMLAllCollection")}} +- {{domxref("HTMLFormControlsCollection")}} +- {{domxref("HTMLOptionsCollection")}} +- {{domxref("HTMLPropertiesCollection")}} +- {{domxref("DOMStringMap")}} +- {{domxref("RadioNodeList")}} +- {{domxref("MediaError")}} + +### Interfaces HTML obsolètes {{obsolete_inline}} + +- {{domxref("HTMLBaseFontElement")}} +- {{domxref("HTMLIsIndexElement")}} + +## Interfaces SVG + +### Interfaces des éléments SVG + +- {{domxref("SVGAElement")}} +- {{domxref("SVGAltGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}} +- {{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}} +- {{domxref("SVGAnimationElement")}} +- {{domxref("SVGAnimateElement")}} +- {{domxref("SVGAnimateColorElement")}} {{deprecated_inline}} +- {{domxref("SVGAnimateMotionElement")}} +- {{domxref("SVGAnimateTransformElement")}} +- {{domxref("SVGCircleElement")}} +- {{domxref("SVGClipPathElement")}} +- {{domxref("SVGColorProfileElement")}} {{deprecated_inline}} +- {{domxref("SVGComponentTransferFunctionElement")}} +- {{domxref("SVGCursorElement")}} +- {{domxref("SVGDefsElement")}} +- {{domxref("SVGDescElement")}} +- {{domxref("SVGElement")}} +- {{domxref("SVGEllipseElement")}} +- {{domxref("SVGFEBlendElement")}} +- {{domxref("SVGFEColorMatrixElement")}} +- {{domxref("SVGFEComponentTransferElement")}} +- {{domxref("SVGFECompositeElement")}} +- {{domxref("SVGFEConvolveMatrixElement")}} +- {{domxref("SVGFEDiffuseLightingElement")}} +- {{domxref("SVGFEDisplacementMapElement")}} +- {{domxref("SVGFEDistantLightElement")}} +- {{domxref("SVGFEDropShadowElement")}} +- {{domxref("SVGFEFloodElement")}} +- {{domxref("SVGFEFuncAElement")}} +- {{domxref("SVGFEFuncBElement")}} +- {{domxref("SVGFEFuncGElement")}} +- {{domxref("SVGFEFuncRElement")}} +- {{domxref("SVGFEGaussianBlurElement")}} +- {{domxref("SVGFEImageElement")}} +- {{domxref("SVGFEMergeElement")}} +- {{domxref("SVGFEMergeNodeElement")}} +- {{domxref("SVGFEMorphologyElement")}} +- {{domxref("SVGFEOffsetElement")}} +- {{domxref("SVGFEPointLightElement")}} +- {{domxref("SVGFESpecularLightingElement")}} +- {{domxref("SVGFESpotLightElement")}} +- {{domxref("SVGFETileElement")}} +- {{domxref("SVGFETurbulenceElement")}} +- {{domxref("SVGFilterElement")}} +- {{domxref("SVGFilterPrimitiveStandardAttributes")}} +- {{domxref("SVGFontElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}} +- {{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}} +- {{domxref("SVGForeignObjectElement")}} +- {{domxref("SVGGElement")}} +- {{domxref("SVGGeometryElement")}} +- {{domxref("SVGGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGGlyphRefElement")}} {{deprecated_inline}} +- {{domxref("SVGGradientElement")}} +- {{domxref("SVGGraphicsElement")}} +- {{domxref("SVGHatchElement")}} {{experimental_inline}} +- {{domxref("SVGHatchpathElement")}} {{experimental_inline}} +- {{domxref("SVGHKernElement")}} {{deprecated_inline}} +- {{domxref("SVGImageElement")}} +- {{domxref("SVGLinearGradientElement")}} +- {{domxref("SVGLineElement")}} +- {{domxref("SVGMarkerElement")}} {{experimental_inline}} +- {{domxref("SVGMaskElement")}} +- {{domxref("SVGMeshElement")}} {{experimental_inline}} +- {{domxref("SVGMeshGradientElement")}} {{experimental_inline}} +- {{domxref("SVGMeshpatchElement")}} {{experimental_inline}} +- {{domxref("SVGMeshrowElement")}} {{experimental_inline}} +- {{domxref("SVGMetadataElement")}} +- {{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}} +- {{domxref("SVGMPathElement")}} +- {{domxref("SVGPathElement")}} +- {{domxref("SVGPatternElement")}} +- {{domxref("SVGPolylineElement")}} +- {{domxref("SVGPolygonElement")}} +- {{domxref("SVGRadialGradientElement")}} +- {{domxref("SVGRectElement")}} +- {{domxref("SVGScriptElement")}} +- {{domxref("SVGSetElement")}} +- {{domxref("SVGSolidcolorElement")}} {{experimental_inline}} +- {{domxref("SVGStopElement")}} +- {{domxref("SVGStyleElement")}} +- {{domxref("SVGSVGElement")}} +- {{domxref("SVGSwitchElement")}} +- {{domxref("SVGSymbolElement")}} +- {{domxref("SVGTextContentElement")}} +- {{domxref("SVGTextElement")}} +- {{domxref("SVGTextPathElement")}} +- {{domxref("SVGTextPositioningElement")}} +- {{domxref("SVGTitleElement")}} +- {{domxref("SVGTRefElement")}} {{deprecated_inline}} +- {{domxref("SVGTSpanElement")}} +- {{domxref("SVGUseElement")}} +- {{domxref("SVGUnknownElement")}} {{experimental_inline}} +- {{domxref("SVGViewElement")}} +- {{domxref("SVGVKernElement")}} {{deprecated_inline}} + +### Interfaces pour les types de donnée SVG + +Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG. + +> **Note :** À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}. + +#### Interfaces statiques + +- {{domxref("SVGAngle")}} +- {{domxref("SVGColor")}} {{deprecated_inline}} +- {{domxref("SVGICCColor")}} {{deprecated_inline}} +- {{domxref("SVGElementInstance")}} +- {{domxref("SVGElementInstanceList")}} +- {{domxref("SVGLength")}} +- {{domxref("SVGLengthList")}} +- {{domxref("SVGMatrix")}} {{deprecated_inline}} +- {{domxref("SVGNameList")}} +- {{domxref("SVGNumber")}} +- {{domxref("SVGNumberList")}} +- {{domxref("SVGPaint")}} +- {{domxref("SVGPathSeg")}} {{deprecated_inline}} +- {{domxref("SVGPathSegClosePath")}} {{deprecated_inline}} +- {{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegArcRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}} +- {{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}} +- {{domxref("SVGPathSegList")}} {{deprecated_inline}} +- {{domxref("SVGPoint")}} {{deprecated_inline}} +- {{domxref("SVGPointList")}} {{deprecated_inline}} +- {{domxref("SVGPreserveAspectRatio")}} +- {{domxref("SVGRect")}} {{deprecated_inline}} +- {{domxref("SVGStringList")}} +- {{domxref("SVGTransform")}} +- {{domxref("SVGTransformList")}} + +#### Interfaces animées + +- {{domxref("SVGAnimatedAngle")}} +- {{domxref("SVGAnimatedBoolean")}} +- {{domxref("SVGAnimatedEnumeration")}} +- {{domxref("SVGAnimatedInteger")}} +- {{domxref("SVGAnimatedLength")}} +- {{domxref("SVGAnimatedLengthList")}} +- {{domxref("SVGAnimatedNumber")}} +- {{domxref("SVGAnimatedNumberList")}} +- {{domxref("SVGAnimatedPathData")}} {{deprecated_inline}} +- {{domxref("SVGAnimatedPoints")}} +- {{domxref("SVGAnimatedPreserveAspectRatio")}} +- {{domxref("SVGAnimatedRect")}} +- {{domxref("SVGAnimatedString")}} +- {{domxref("SVGAnimatedTransformList")}} + +### Interfaces relatives à SMIL + +- {{domxref("ElementTimeControl")}} +- {{domxref("TimeEvent")}} + +### Autres interfaces SVG + +- {{domxref("GetSVGDocument")}} +- {{domxref("ShadowAnimation")}} +- {{domxref("SVGColorProfileRule")}} {{deprecated_inline}} +- {{domxref("SVGCSSRule")}} {{deprecated_inline}} +- {{domxref("SVGDocument")}} +- {{domxref("SVGException")}} {{deprecated_inline}} +- {{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}} +- {{domxref("SVGFitToViewBox")}} +- {{domxref("SVGLangSpace")}} {{deprecated_inline}} +- {{domxref("SVGLocatable")}} {{deprecated_inline}} +- {{domxref("SVGRenderingIntent")}} {{deprecated_inline}} +- {{domxref("SVGStylable")}} {{deprecated_inline}} +- {{domxref("SVGTests")}} +- {{domxref("SVGTransformable")}} {{deprecated_inline}} +- {{domxref("SVGUnitTypes")}} +- {{domxref("SVGUseElementShadowRoot")}} +- {{domxref("SVGURIReference")}} +- {{domxref("SVGViewSpec")}} {{deprecated_inline}} +- {{domxref("SVGZoomAndPan")}} +- {{domxref("SVGZoomEvent")}} {{deprecated_inline}} + +## Voir aussi + +- [Exemples appliqués pour le DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples) diff --git a/files/fr/web/api/document_object_model/introduction/index.md b/files/fr/web/api/document_object_model/introduction/index.md index fa1af30b15..81279982bf 100644 --- a/files/fr/web/api/document_object_model/introduction/index.md +++ b/files/fr/web/api/document_object_model/introduction/index.md @@ -11,62 +11,67 @@ tags: - Tutorial translation_of: Web/API/Document_Object_Model/Introduction --- -<div>{{DefaultAPISidebar("DOM")}}</div> +{{DefaultAPISidebar("DOM")}} -<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> +Le Modèle Objet de Document (**DOM: Document object Model**) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications. -<h2 id="what_is_the_dom">Qu'est-ce que le DOM?</h2> +## Qu'est-ce que le DOM? -<p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p> +Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation. -<p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p> +Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript. -<p>Les normes <a href="https://www.w3.org/DOM/">DOM du W3C</a> et <a href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> +Les normes [DOM du W3C](https://www.w3.org/DOM/) et [WHATWG DOM](https://dom.spec.whatwg.org) forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent. -<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> +Par exemple, DOM du W3C spécifie que la méthode `getElementsByTagName` dans le code ci-dessous doit renvoyer une liste de tous les éléments `<P>` présents dans le document : -<pre class="brush: js">const paragraphs = document.querySelectorAll("p"); -// paragraphes[0] est le premier élément <p> -// paragraphes[1] est le second élément <p>, etc. +```js +const paragraphs = document.querySelectorAll("p"); +// paragraphes[0] est le premier élément <p> +// paragraphes[1] est le second élément <p>, etc. alert(paragraphes[0].nodeName); -</pre> +``` -<p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p> +Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet `document` qui représente le document lui-même, l'objet `table` qui implémente l'interface DOM particulière `HTMLTableElement` permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko. -<h2 id="dom_and_javascript">DOM et JavaScript</h2> +## DOM et JavaScript -<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> +Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en [JavaScript](/fr/docs/Web/JavaScript). C'est-à-dire qu'il est _écrit_ en JavaScript, mais qu'il _utilise_ le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript. -<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> +À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative : -<p>API(page Web ou XML) = DOM + JS(langage de script)</p> +API(page Web ou XML) = DOM + JS(langage de script) -<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> +Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python : -<pre class="brush: python"># Exemple d'utilisation du DOM en Python +```python +# Exemple d'utilisation du DOM en Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Propriété DOM de l'objet document; p_list = doc.getElementsByTagName("para"); -</pre> +``` -<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> +Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir [Survol des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview). -<h2 id="how_do_i_access_the_dom">Méthodes d'accès au DOM</h2> +## Méthodes d'accès au DOM -<p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p> +Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts. -<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="/fr/docs/Web/API/Document">document</a></code> ou <code><a href="/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> +Lorsque vous créez un script, qu'il figure au sein de la page dans un élément `<SCRIPT>` ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments [`document`](/fr/docs/Web/API/Document) ou [`window`](/fr/docs/Web/API/Window), vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction [`alert()`](/fr/docs/Web/API/Window/alert) de l'objet [`window`](/fr/docs/Web/API/Window), ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas. -<p>Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p> +Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation). -<pre class="brush: html"><body onload="window.alert('Bienvenue sur ma page Web !');"></pre> +```html +<body onload="window.alert('Bienvenue sur ma page Web !');"> +``` -<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> +Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document : -<pre class="brush: html"><html> - <head> - <script> +```html +<html> + <head> + <script> // run this function when the document is loaded window.onload = function() { @@ -76,167 +81,219 @@ p_list = doc.getElementsByTagName("para"); heading.appendChild(heading_text); document.body.appendChild(heading); } - </script> - </head> - <body> - </body> -</html> -</pre> + </script> + </head> + <body> + </body> +</html> +``` -<h2 id="important_data_types">Types de données fondamentaux</h2> +## Types de données fondamentaux -<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> +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. -<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> +> **Note :** 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><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> +**NDTR:** (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant `elements`, aux tableaux de nœuds en tant que `nodeLists` (ou même simplement éléments), et aux nœuds d'attributs en tant qu'`attributes)`. -<p>Le tableau suivant décrit brièvement ces types de données.</p> +Le tableau suivant décrit brièvement ces types de données. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Type de donnée (Interface)</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("Document")}}</td> - <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="/fr/docs/Web/API/Document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> - </tr> - <tr> - <td>{{domxref("Node")}}</td> - <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> - </tr> - <tr> - <td>{{domxref("Element")}}</td> - <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> - </tr> - <tr> - <td>{{domxref("NodeList")}}</td> - <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : - <ul> - <li>list.item(1)</li> - <li>list[1]</li> - </ul> - - <p>Ces deux lignes sont équivalentes. Dans la première, <strong>item()</strong> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.</p> - </td> - </tr> - <tr> - <td>{{domxref("Attribute")}}</td> - <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <strong>createAttribute()</strong>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td> - </tr> - <tr> - <td>{{domxref("NamedNodeMap")}}</td> - <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Type de donnée (Interface)</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td> + Lorsqu'un membre renvoie un objet de type <code>document</code> (par + exemple la propriété <strong>ownerDocument</strong> d'un élément, qui + retourne le <code>document</code> auquel il appartient), cet objet est + l'objet <code>document</code> racine lui-même. Le chapitre + <a href="/fr/docs/Web/API/Document" + >référence de DOM <code>document</code></a + > + décrit l'objet <code>document</code> en détail. + </td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td> + Chaque objet du document est sous une forme ou une autre un noeud. Dans + un document HTML, un objet peût être un élément nœud, mais aussi un nœud + text ou nœud attribut. + </td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td> + Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud + de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, + par exemple que la méthode + <a href="/fr/docs/Web/API/Document/createElement" + >document.createElement()</a + > + renvoie une réference à un objet de type nœud, nous dirons simplement + que cette méthode renvoie l'élément qui vient juste d'être créer dans le + DOM. Les objets element implémentent l'interface DOM element, mais aussi + l'interface plus basique node, qui sont toutes les deux incluses dans + cette réference. dans un document HTML, les éléments sont mis en valeur + par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi + bien que par d'autres interfaces décrivant les capacités d'éléments + spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for + {{HTMLElement("table")}} elements). + </td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td> + Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est + renvoyé par la méthode + <a href="/fr/docs/Web/API/Document/getElementsByTagName" + >document.getElementsByTagName()</a + >. Les éléments d'une <code>nodeList</code> sont accessibles par un + index de deux manières différentes : + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + <p> + Ces deux lignes sont équivalentes. Dans la première, + <strong>item()</strong> est la méthode de l'objet + <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un + tableau pour accéder au second élément de la liste. + </p> + </td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td> + Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple + par la méthode <strong>createAttribute()</strong>), il s'agit d'une + référence à un objet qui expose une interface particulière (et limitée) + aux attributs. Les attributs sont des nœuds dans le DOM tout comme les + éléments, mais ils seront rarement utilisés de cette manière. + </td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td> + Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut + accéder aux éléments à la fois par nom ou par index. Cette dernière + possibilité est cependant juste là pour faciliter l'énumération, car la + liste n'est pas dans un ordre particulier. Une + <code>namedNodeMap</code> a une méthode item() pour la même raison, et + il est également possible d'ajouter et de retirer des élements d'une + <code>namedNodeMap</code>. + </td> + </tr> + </tbody> </table> -<h2 id="dom_interfaces">Les interfaces DOM</h2> +## Les interfaces DOM -<p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p> +Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les*choses* réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément `HTML FORM` reçoit sa propriété **name** de l'interface `HTMLElement`. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire. -<p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p> +Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles. -<h3 id="interfaces_and_objects">Les interfaces et les objets</h3> +### Les interfaces et les objets -<p>De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une <a href="/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, qui comprend des méthodes telles que <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="/fr/docs/Web/API/Element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> +De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une [interface spécialisée de l'élément HTML Table](/fr/docs/Web/API/HTMLTableElement), qui comprend des méthodes telles que `createCaption` et `insertRow`. Mais comme il s'agit également d'un élément HTML, `table` implémente aussi l'interface `Element` décrite dans le chapitre [Référence de DOM `element`](/fr/docs/Web/API/Element). Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique `Node`, dont dérive `Element`. -<p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p> +Lorsque vous obtiendrez une référence à un objet `table`, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir. -<pre class="brush: js">var table = document.getElementById("table"); +```js +var table = document.getElementById("table"); var tableAttrs = table.attributes; // Interface Node/Element -for(var i = 0; i < tableAttrs.length; i++){ +for(var i = 0; i < tableAttrs.length; i++){ // Interface HTMLTableElement : attribut border if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // Interface HTMLTableElement : attribut summary table.summary = "note : bordure plus large"; -</pre> +``` -<h3 id="core_interfaces_in_the_dom">Interfaces essentielles du DOM</h3> +### Interfaces essentielles du DOM -<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="/fr/docs/Web/API/Document_Object_Model/Examples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> +Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre [Exemples d'utilisation du DOM](/fr/docs/Web/API/Document_Object_Model/Examples) à la fin de livre. -<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> +Les objets `document` et `window` sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet `window` représente quelque chose comme le navigateur, et l'objet `document` est la racine du document lui-même. `Element` hérite de l'interface générique `Node`, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet `table` donné en exemple dans la section précédente. -<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> +Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM. -<ul> - <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> - <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> - <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> - <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> - <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> - <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> - <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> - <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> - <li><code>{{domxref("window.content", "", "", "1")}}</code></li> - <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> - <li><code>{{domxref("console.log", "", "", "1")}}()</code></li> - <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> -</ul> +- `{{domxref("document.getElementById", "", "", "1")}}(id)` +- `document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)` +- `{{domxref("document.createElement", "", "", "1")}}(name)` +- `parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)` +- `element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}` +- `element.{{domxref("HTMLElement.style", "style", "", "1")}}.left` +- `element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()` +- `element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()` +- `element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()` +- `{{domxref("window.content", "", "", "1")}}` +- `{{domxref("window.onload", "", "", "1")}}` +- `{{domxref("console.log", "", "", "1")}}()` +- `{{domxref("window.scrollTo", "", "", "1")}}()` -<h2 id="testing_the_dom_api">Test de l'API DOM</h2> +## Test de l'API DOM -<p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p> +Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément \<script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur. -<p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément <script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.</p> +Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément \<script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur. -<p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p> +Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction `test()`, créer plus de boutons, ou ajouter d'autres éléments si nécessaire. -<pre class="brush: html"><html> -<head> - <title>Tests du DOM</title> - <script type="application/x-javascript"> +```html +<html> +<head> + <title>Tests du DOM</title> + <script type="application/x-javascript"> function setBodyAttr(attr,value){ if(document.body) eval('document.body.'+attr+'="'+value+'"'); else notSupported(); } - </script> -</head> -<body> - <div style="margin: .5in; height="400""> - <p><b><tt>text</tt> color</p> - <form> - <select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> - <option value="black">black - <option value="darkblue">darkblue - </select> - <p><b><tt>bgColor</tt></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> - <option value="white">white - <option value="lightgrey">gray - </select> - <p><b><tt>link</tt></p> - <select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> - <option value="blue">blue - <option value="green">green - </select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> - (exemple de lien)</a></small><br> - </form> - <form> - <input type="button" value="version" onclick="ver()" /> - </form> - </div> -</body> -</html></pre> - -<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> - -<p>Figure 0.1 Exemple de page de test du DOM</p> - -<p><img alt="" src="dom_ref_introduction_to_the_dom.gif"></p> - -<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> + </script> +</head> +<body> + <div style="margin: .5in; height="400""> + <p><b><tt>text</tt> color</p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (exemple de lien)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> +</body> +</html> +``` + +Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test. + +Figure 0.1 Exemple de page de test du DOM + + + +Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (`bgColor`), la couleur des hyperliens (`aLink`) et la couleur du texte (`text`). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM. diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md index 72893cd5ab..b23bc2e16d 100644 --- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md @@ -11,48 +11,42 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select original_slug: >- Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs --- -<div>{{ gecko_minversion_header("1.9.1") }}</div> +{{ gecko_minversion_header("1.9.1") }} -<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> +L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds [`Element`](/fr/docs/Web/API/element) 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. -<h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2> +## L'interface NodeSelector -<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> +Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces [`Document`](/fr/docs/Web/API/document), [`DocumentFragment`](/fr/docs/Web/API/DocumentFragment) ou [`Element`](/fr/docs/Web/API/element) : -<dl> - <dt><code>querySelector</code></dt> - <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 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> +- `querySelector` + - : Renvoie le premier noeud [`Element`](/fr/docs/Web/API/element) correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, `null` est renvoyé. +- `querySelectorAll` + - : Renvoie une [`NodeList`](/fr/docs/Web/API/NodeList) (_liste de noeuds_) contenant tous les noeuds `Element` correspondants dans la sous-arborescence du noeud, ou une `NodeList` vide si aucune correspondance n'a été trouvée. -<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> +> **Note :** La [`NodeList`](/fr/docs/Web/API/NodeList) retournée par [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll) n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe. -<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> +Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes [`querySelector()`](/fr/docs/Web/API/Element/querySelector) et [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll), ainsi que dans l'article [Extraits de code pour querySelector](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector). -<h2 id="Sélecteurs">Sélecteurs</h2> +## Sélecteurs -<p>Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (<code>p</code>) dans le document dont la classe CSS est soit <code>warning</code> soit <code>note</code>, vous pouvez utiliser ce qui suit :</p> +Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (`p`) dans le document dont la classe CSS est soit `warning` soit `note`, vous pouvez utiliser ce qui suit : -<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + var special = document.querySelectorAll( "p.warning, p.note" ); -<p>Vous pouvez aussi interroger par l'ID (<em>identifiant</em>). Par exemple :</p> +Vous pouvez aussi interroger par l'ID (_identifiant_). Par exemple : -<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + var el = document.querySelector( "#main, #basic, #exclamation" ); -<p>Après l'exécution du code ci-dessus, <code>el</code> contient le premier élément dans le document dont l'ID est <code>main</code>, <code>basic</code> ou <code>exclamation</code>.</p> +Après l'exécution du code ci-dessus, `el` contient le premier élément dans le document dont l'ID est `main`, `basic` ou `exclamation`. -<p>Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</p> +Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes `querySelector()` et `querySelectorAll()`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <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> +- [API Selectors](http://www.w3.org/TR/selectors-api/) (en) +- [`element.querySelector`](/fr/docs/Web/API/Element/querySelector) +- [`element.querySelectorAll`](/fr/docs/Web/API/Element/querySelectorAll) +- [`document.querySelector`](/fr/docs/Web/API/Document/querySelector) +- [`document.querySelectorAll`](/fr/docs/Web/API/Document/querySelectorAll) +- [Extraits de code pour querySelector](/en-US/docs/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index cc245fd99b..78199ae55a 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -11,40 +11,39 @@ translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript --- -<p> </p> +## Introduction -<h2 id="Introduction">Introduction</h2> +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>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> +> **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 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> +## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`) -<h2 id="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> +### Contenu HTML -<h3 id="Contenu_HTML">Contenu HTML</h3> +```html +<input type="button" value="Generate a table." onclick="generate_table()"> +``` -<pre class="brush: html"><input type="button" value="Generate a table." onclick="generate_table()"></pre> +### Contenu JavaScript -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> - -<pre class="brush: js">function generate_table() { +```js +function generate_table() { // get the reference for the body var body = document.getElementsByTagName("body")[0]; - // creates a <table> element and a <tbody> element + // 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++) { + 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 + 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); @@ -56,79 +55,82 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript tblBody.appendChild(row); } - // put the <tbody> in the <table> + // put the <tbody> in the <table> tbl.appendChild(tblBody); - // appends <table> into <body> + // appends <table> into <body> body.appendChild(tbl); // sets the border attribute of tbl to 2; tbl.setAttribute("border", "2"); -}</pre> +} +``` + +{{ EmbedLiveSample('Overview_of_Sample1.html') }} + +Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : + +1. On crée d'abord l'élément \<table>. +2. Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>. +3. Puis, grâce à une boucle, on crée les éléments \<tr>, qui sont des enfants de l'élément \<tbody>. +4. Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>. +5. Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau. + +Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : + +1. On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant + + cell.appendChild(texte); -<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> +2. Ensuite, on lie chaque élément \<td> à son élément \<tr> parent avec -<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p> + row.appendChild(cell); -<ol> - <li>On crée d'abord l'élément <table>.</li> - <li>Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.</li> - <li>Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.</li> - <li>Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.</li> - <li>Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.</li> -</ol> +3. Puis chaque \<tr> à son parent \<tbody> avec -<p>Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p> + tablebody.appendChild(row); -<ol> - <li>On attache d'abord chaque nœud texte à son élément parent <td> en utilisant - <pre>cell.appendChild(texte);</pre> - </li> - <li>Ensuite, on lie chaque élément <td> à son élément <tr> parent avec - <pre>row.appendChild(cell);</pre> - </li> - <li>Puis chaque <tr> à son parent <tbody> avec - <pre>tablebody.appendChild(row);</pre> - </li> - <li>Puis l'élément <tbody> est attaché à son élément parent <table> grace à - <pre>table.appendChild(tablebody);</pre> - </li> - <li>Enfin, <table> est rattaché à <body> avec - <pre>body.appendChild(table);</pre> - </li> -</ol> +4. Puis l'élément \<tbody> est attaché à son élément parent \<table> grace à -<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p> + table.appendChild(tablebody); + +5. Enfin, \<table> est rattaché à \<body> avec + + body.appendChild(table); -<p>Voici l'HTML généré par ce code JavaScript :</p> +Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse. -<pre>... -<table border="2"> -<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> -<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> -</table> -... -</pre> +Voici l'HTML généré par ce code JavaScript : -<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> + ... + <table border="2"> + <tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr> + <tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr> + </table> + ... -<p><img src="sample1-tabledom.jpg"></p> +Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants : -<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">Exemple : Définition de la couleur d'arrière-plan d'un paragraphe</h2> +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><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> +## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe -<h3 id="Contenu_HTML_2">Contenu HTML</h3> +`getElementsByTagName` 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. -<pre class="brush: html"><body> - <input type="button" value="Set paragraph background color" onclick="set_background()"> - <p>hi</p> - <p>hello</p> -</body></pre> +### Contenu HTML -<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> +```html +<body> + <input type="button" value="Set paragraph background color" onclick="set_background()"> + <p>hi</p> + <p>hello</p> +</body> +``` -<pre class="brush: js">function set_background() { +### Contenu JavaScript + +```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]; @@ -139,160 +141,160 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript // 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> +} +``` + +{{ EmbedLiveSample('Setting_background_of_a_paragraph') }} + +Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body). -<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> +1. On récupère d'abord une liste de tous les éléments body avec -<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p> + ```html + myBody = document.getElementsByTagName("body")[0] + ``` -<ol> - <li>On récupère d'abord une liste de tous les éléments body avec - <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="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="brush:html">myP = myBodyElements[1];</pre> - </li> -</ol> + 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 à `{{mediawiki.external(0)}}`. -<p><img src="sample2a2.jpg"></p> +2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant -<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> + ```html + myBodyElements = myBody.getElementsByTagName("p"); + ``` -<pre class="eval">myP.style.background = "rgb(255,0,0)"; -// ajoute une propriété de style inline -</pre> +3. Pour finir on prend le deuxième élément de la liste des éléments p avec -<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> + ```html + myP = myBodyElements[1]; + ``` -<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="brush:html">myTextNode = document.createTextNode("world");</pre> +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>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> + myP.style.background = "rgb(255,0,0)"; + // ajoute une propriété de style inline -<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> +### Création de nœuds texte avec `document.createTextNode("..")` -<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> +Employez l'objet `document` pour appeler la méthode `createTextNode` 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. -<pre class="eval">myP.appendChild(noeudTexte); -</pre> +```html +myTextNode = document.createTextNode("world"); +``` -<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> +Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte `"world"`, et `monNoeudTexte` 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><img src="sample2b2.jpg"></p> +### Insertion d'éléments avec appendChild(...) -<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> +En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous définissez `element_nœud` comme un nouvel enfant du second élément `p` (`myP` a été défini plus haut comme étant le second élément p). -<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> + myP.appendChild(noeudTexte); -<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> +En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. 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 : -<pre class="eval">nouveauNoeudBALISEP = document.createElement("p"); -body.appendChild(nouveauNoeudBALISEP); -</pre> + -<p><img src="sample2c.jpg"></p> +> **Note :**L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` 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 `insertBefore` à la place de `appendChild`. -<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> +### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)` -<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> +Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : -<pre class="eval">myP.removeChild(noeudTexte); -</pre> + nouveauNoeudBALISEP = document.createElement("p"); + body.appendChild(nouveauNoeudBALISEP); -<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément <p> récemment créé :</p> + -<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte); -</pre> +### Suppression de nœuds avec la méthode `removeChild(...)` -<p>L'arborescence des objets se présente désormais comme ceci :</p> +Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : -<p><img src="sample2d.jpg"></p> + myP.removeChild(noeudTexte); -<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> +Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : -<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> + nouveauNoeudBALISEP.appendChild(noeudTexte); -<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> +L'arborescence des objets se présente désormais comme ceci : -<p><img src="sample1-tabledom.jpg"></p> + -<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> +## Création dynamique d'un tableau (retour à Sample1.html) -<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</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. -<ul> - <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li> - <li>Créer tous les éléments.</li> - <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li> -</ul> +### Rappel de la structure arborescente d'un tableau HTML -<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> + -<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> +### Création et insertion des éléments dans l'arborescence -<pre class="brush: html"><head> -<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> -<script> +On peut décomposer la création du tableau de Exemple1.html en trois étapes : + +- Récupérer l'objet body (c'est le premier élément de l'objet document). +- Créer tous les éléments. +- Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus). + +Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1. + +> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` 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. + +```html +<head> +<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> +<script> function start() { // récupère une référence vers l'élément body var body = document.getElementsByTagName("body")[0]; - // création des éléments <table> et <tbody> + // création des éléments <table> et <tbody> table = document.createElement("table"); tablebody = document.createElement("tbody"); // création des cellules - for(var j = 0; j < 2; j++) { - // création d'un élément <tr> + for(var j = 0; j < 2; j++) { + // création d'un élément <tr> row = document.createElement("tr"); - for(var i = 0; i < 2; i++) { - // création d'un élément <td> + for(var i = 0; i < 2; i++) { + // création d'un élément <td> cell = document.createElement("td"); // création d'un nœud texte texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i); - // ajoute le nœud texte créé à la cellule <td> + // ajoute le nœud texte créé à la cellule <td> cell.appendChild(texte); - // ajoute la cellule <td> à la ligne <tr> + // ajoute la cellule <td> à la ligne <tr> row.appendChild(cell); } - // ajoute la ligne <tr> à l'élément <tbody> + // ajoute la ligne <tr> à l'élément <tbody> tablebody.appendChild(row); } - // ajoute <tbody> à l'élément <table> + // ajoute <tbody> à l'élément <table> table.appendChild(tablebody); - // ajoute <table> à l'élément <body> + // ajoute <table> à l'élément <body> body.appendChild(table); // définit l'attribut border de table à 2; table.setAttribute("border", "2"); } -</script> -</head> -<body onload="start()"> -</body> -</html> -</pre> +</script> +</head> +<body onload="start()"> +</body> +</html> +``` -<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> +## Manipulation du tableau avec DOM et CSS -<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> +### Récupérer un nœud texte dans le tableau -<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> +Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut `childNodes` qui est utilisé pour récupérer la liste des nœuds enfants de `cel`. A la différence de `getElementsByTagName`, la liste renvoyée par `childNodes` comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode `{{ mediawiki.external('x') }}` 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 `celtext`. Ensuite, un nouveau nœud texte contenant les données de `celtext` est greffé en tant qu'enfant sur l'élément \<body>. -<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> +> **Note :** Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut `data`. -<pre class="brush:js">mybody = document.getElementsByTagName("body")[0]; +```js +mybody = document.getElementsByTagName("body")[0]; mytable = mybody.getElementsByTagName("table")[0]; mytablebody = mytable.getElementsByTagName("tbody")[0]; myrow = mytablebody.getElementsByTagName("tr")[1]; @@ -303,59 +305,58 @@ myceltext=mycel.childNodes[0]; // 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">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="brush:html">mytable.getAttribute("border");</pre> - -<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> - -<pre><html> -<body onload="start()"> -</body> -<script> - function start() { - var body = document.getElementsByTagName("body")[0]; - table = document.createElement("table"); - tablebody = document.createElement("tbody"); - - for(var j = 0; j < 2; j++) { - row = document.createElement("tr"); - for(var i = 0; i < 2; i++) { - cell = document.createElement("td"); - text = document.createTextNode("la cellule est :" + i + j); - cell.appendChild(text); - row.appendChild(cell); - // change la couleur de fond de la cellule - // si la colonne est 0. Si la colonne est 1, cache la cellule - if (i == 0) { - cell.style.background = "rgb(255,0,0)"; - } else { - cell.style.display = "none"; +mybody.appendChild(currenttext); +``` + +### Récupérer la valeur d'un attribut + +A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : + +```html +mytable.getAttribute("border"); +``` + +### Cacher une colonne en changeant les propriétés de style + +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. + + <html> + <body onload="start()"> + </body> + <script> + function start() { + var body = document.getElementsByTagName("body")[0]; + table = document.createElement("table"); + tablebody = document.createElement("tbody"); + + for(var j = 0; j < 2; j++) { + row = document.createElement("tr"); + for(var i = 0; i < 2; i++) { + cell = document.createElement("td"); + text = document.createTextNode("la cellule est :" + i + j); + cell.appendChild(text); + row.appendChild(cell); + // change la couleur de fond de la cellule + // si la colonne est 0. Si la colonne est 1, cache la cellule + if (i == 0) { + cell.style.background = "rgb(255,0,0)"; + } else { + cell.style.display = "none"; + } } + tablebody.appendChild(row); } - tablebody.appendChild(row); - } - table.appendChild(tablebody); - body.appendChild(table); - } -</script> -</html> -</pre> + table.appendChild(tablebody); + body.appendChild(table); + } + </script> + </html> -<h4 id="Original_Document_Information">Original Document Information</h4> +#### Original Document Information -<dl> - <dt>Author(s)</dt> - <dd>Marcio Galli</dd> - <dt>Migrated from</dt> - <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd> -</dl> +- Author(s) + - : Marcio Galli +- Migrated from + - : http\://web.archive.org/web/20000815054125/http\://mozilla.org/docs/dom/technote/tn-dom-table/ -<p><br> - Interwik</p> +Interwik diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md index e4298a2055..c2d92e9281 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md @@ -9,16 +9,16 @@ tags: translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple --- - -<pre class="brush: html"> <html> - <head> - <title>Mon Document</title> - <script type="text/javascript"> +```html + <html> + <head> + <title>Mon Document</title> + <script type="text/javascript"> function change() { - // document.getElementsByTagName("H1") renvoie une NodeList (<em>liste de noeuds</em>) de h1 + // document.getElementsByTagName("H1") renvoie une NodeList (liste de noeuds) de h1 // les éléments dans le document dont le premier a le numéro 0 : var header = document.getElementsByTagName("H1").item(0); - // le firstChild (<em>premier enfant</em>) de l'en-tête est un noeud Texte : + // le firstChild (premier enfant) de l'en-tête est un noeud Texte : header.firstChild.data = "Un document dynamique"; // maintenant l'en-tête est "Un document dynamique". var para = document.getElementsByTagName("P").item(0); @@ -30,15 +30,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ // placer le texte dans le paragraphe newElement.appendChild(newText); // et placer le paragraphe à la fin du document par son ajout - // le BODY (<em>corps</em>) (qui est le parent de para) + // le BODY (corps) (qui est le parent de para) para.parentNode.appendChild(newElement); } - </script> - </head> - <body> - <input type="button" value="Modifier ce document." onclick="change()"> - <h1>Header</h1> - <p>Paragraph</p> - </body> - </head> -</pre> + </script> + </head> + <body> + <input type="button" value="Modifier ce document." onclick="change()"> + <h1>Header</h1> + <p>Paragraph</p> + </body> + </head> +``` diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index c59fe45427..0348ed4df2 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -9,49 +9,51 @@ tags: translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C --- -<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> +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. -<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> +## Définition d'un arbre de contenu -<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> +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 [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : -<pre class="eval"><html> -<head> - <title>Mon document</title> -</head> -<body> - <h1>Titre</h1> - <p>Paragraphe</p> -</body> -</html> -</pre> + <html> + <head> + <title>Mon document</title> + </head> + <body> + <h1>Titre</h1> + <p>Paragraphe</p> + </body> + </html> -<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> +Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage. -<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> +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.) -<h2 id="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> +## Ce que permet le DOM Level 1 Core -<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> +Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. 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é `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. -<h2 id="Un_exemple_simple">Un exemple simple</h2> +## Un exemple simple -<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> +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 : -<h3 id="Contenu_HTML">Contenu HTML</h3> +### Contenu HTML -<pre class="brush: html"><body> -<input type="button" value="Change this document." onclick="change()"> -<h2>Header</h2> -<p>Paragraph</p> -</body></pre> +```html +<body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body> +``` -<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> +### Contenu JavaScript -<pre class="brush: js"> function change() { - // document.getElementsByTagName ("H2") renvoie un NodeList du <h2> +```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); @@ -71,14 +73,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ // 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> +{{ EmbedLiveSample('A_simple_example', 800, 300) }} -<p>Vous pouvez voir ce script dans <a href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> +Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html). -<h3 id="Pour_en_savoir_plus">Pour en apprendre plus</h3> +### Pour en apprendre plus -<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> +Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant [les méthodes fondamentales de DOM Level 1](/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript). C'est la suite de ce document. -<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 +Consultez également la [spécification DOM Level 1 Core](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html) 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 [documentation complète sur le DOM](/fr/docs/Web/API/Document_Object_Model). diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md index 9529722049..e20754093f 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.md +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -5,63 +5,63 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -<h2 id="Le_probl.C3.A8me">Le problème</h2> +## Le problème -<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> +La présence d'espaces et de blancs dans le [DOM](fr/DOM) 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 `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : -<ul> - <li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li> - <li>certains nœuds texte commenceront ou se termineront par des blancs.</li> -</ul> +- il y aura certains nœuds texte qui ne contiendront que du vide, et +- certains nœuds texte commenceront ou se termineront par des blancs. -<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p> +En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : -<pre class="eval"><!-- My document --> -<html> -<head> - <title>My Document</title> -</head> -<body> - <h1>Header</h1> - <p> - Paragraph - </p> -</body> -</html> -</pre> + <!-- My document --> + <html> + <head> + <title>My Document</title> + </head> + <body> + <h1>Header</h1> + <p> + Paragraph + </p> + </body> + </html> -<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> +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. -<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> +## Rendre les choses plus faciles -<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p> +On peut formater leur code comme indiqué ci-dessous pour contourner le problème: -<pre class="brush: html"><!-- jolie impression conventionnelle +```html +<!-- jolie impression conventionnelle avec des espaces entre les balises: - --> -<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">/** + --> +<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> +``` + +Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : + +```js +/** * Tout au long, les espaces sont définis comme l'un des caractères * "\t" TAB \u0009 * "\n" LF \u000A @@ -78,8 +78,8 @@ translation_of: Web/API/Document_Object_Model/Whitespace * * @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>. + * @return True (vrai) Si tout le contenu du texte du |nod| est un espace, + * sinon false (faux). */ function is_all_ws( nod ) { @@ -92,16 +92,16 @@ function is_all_ws( nod ) * 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|. - * @return true <em>(vrai)</em> si le nœud est : + * @return true (vrai) si le nœud est : * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| - * et autrement false <em>(faux)</em>. + * et autrement false (faux). */ 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 + ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace } /** @@ -204,13 +204,15 @@ function data_of( txt ) if (data.charAt(data.length - 1) == " ") data = data.substring(0, data.length - 1); return data; -}</pre> +} +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<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> +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 `"Ceci est le troisième paragraphe"`, et change ensuite l'attribut `class` et le contenu de ce paragraphe. -<pre class="brush: js">var cur = first_child(document.getElementById("test")); +```js +var cur = first_child(document.getElementById("test")); while (cur) { if (data_of(cur.firstChild) == "This is the third paragraph.") @@ -219,4 +221,5 @@ while (cur) cur.firstChild.textContent = "This is the magic paragraph."; } cur = node_after(cur); -}</pre>
\ No newline at end of file +} +``` |