From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../api/document_object_model/events/index.html | 74 +++++ .../api/document_object_model/examples/index.html | 369 +++++++++++++++++++++ .../api/document_object_model/exemples/index.html | 369 --------------------- .../how_to_create_a_dom_tree/index.html | 146 ++++++++ .../index.html" | 74 ----- .../index.html" | 55 --- .../index.html | 55 +++ .../pr\303\251face/index.html" | 54 --- .../index.html | 351 ++++++++++++++++++++ .../example/index.html | 44 +++ .../using_the_w3c_dom_level_1_core/index.html | 92 +++++ .../exemple/index.html | 44 --- .../index.html | 92 ----- 13 files changed, 1131 insertions(+), 688 deletions(-) create mode 100644 files/fr/web/api/document_object_model/events/index.html create mode 100644 files/fr/web/api/document_object_model/examples/index.html delete mode 100644 files/fr/web/api/document_object_model/exemples/index.html create mode 100644 files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html delete mode 100644 "files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" delete mode 100644 "files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" create mode 100644 files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html delete mode 100644 "files/fr/web/api/document_object_model/pr\303\251face/index.html" create mode 100644 files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html create mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html create mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html delete mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html delete mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html (limited to 'files/fr/web/api/document_object_model') diff --git a/files/fr/web/api/document_object_model/events/index.html b/files/fr/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..cd96a7446c --- /dev/null +++ b/files/fr/web/api/document_object_model/events/index.html @@ -0,0 +1,74 @@ +--- +title: Les évènements et le DOM +slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM +tags: + - API + - DOM + - Guide + - évènements +translation_of: Web/API/Document_Object_Model/Events +--- +

Introduction

+ +

Ce chapitre décrit le modèle d'événement DOM. L'interface Event elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les écouteurs d'évènements et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.

+ +

Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le document sur les évènements DOM Niveau 3.

+ +

Voir aussi l'exemple 5 : Propagation des évènements dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.

+ +

Enregistrement des écouteurs d'évènements

+ +

Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.

+ +

EventTarget.addEventListener

+ +
// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+
+ +

C'est la méthode à utiliser dans les pages web modernes.

+ +

Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.

+ +

Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.

+ +

attribut HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre event. La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML.

+ +

Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.

+ +

Propriétés d'un élément DOM

+ +
// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

La fonction peut être définie pour prendre un paramètre d'event. La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML.

+ +

Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.

+ +

Accès aux interfaces d'évènements

+ +

Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'objet fenêtre, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.

+ +

L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.

+ +
function foo(evt) {
+  // le paramètre evt est automatiquement assigné à l'objet évènement
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ + + + diff --git a/files/fr/web/api/document_object_model/examples/index.html b/files/fr/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..08bd432a1e --- /dev/null +++ b/files/fr/web/api/document_object_model/examples/index.html @@ -0,0 +1,369 @@ +--- +title: Exemples +slug: Web/API/Document_Object_Model/Exemples +tags: + - DOM + - Exemples +translation_of: Web/API/Document_Object_Model/Examples +--- +

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.

+ +

Exemple 1 : height (hauteur) et width (largeur)

+ +

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

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>width/height example</title>
+<script>
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "<ul>";
+
+  for (var i = 0; i < arrImages.length; i++) {
+    strHtml += "<li>image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  }
+
+  strHtml += "<\/ul>";
+
+  objOutput.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="init();">
+
+<p>Image 1: no height, width, or style
+  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+
+<p>Image 2: height="50", width="500", but no style
+  <img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500">
+</p>
+
+<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;">
+</p>
+
+<div id="output"> </div>
+</body>
+</html>
+ +

Exemple 2 : attributs d'image

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Modifying an image border</title>
+
+<script>
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test">
+</p>
+
+<form name="FormName">
+  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
+  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
+</form>
+
+</body>
+</html>
+ +

Exemple 3 : manipulation de styles

+ +

Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupéré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.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Changing color and font-size example</title>
+
+<script>
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+
+<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+
+<form>
+  <p><input value="rec" type="button" onclick="changeText();" /></p>
+</form>
+
+</body>
+</html>
+ +

Exemple 4 : utilisation de feuilles de style

+ +

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

+ +
var ss = document.styleSheets;
+
+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" );
+  }
+}
+ +

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

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

Ce script affiche les lignes suivantes :

+ +
BODY
+P
+#LUMPY
+
+ +

Exemple 5 : propagation d'évènements

+ +

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

+ +

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.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Event Propagation</title>
+
+<style>
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+</style>
+
+<script>
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // cela devrait empêcher t-daddy d'obtenir le click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<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>
+
+</body>
+</html>
+ +

Exemple 6 : getComputedStyle

+ +

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.

+ +

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

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<title>getComputedStyle example</title>
+
+<script>
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+</script>
+
+<style>
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+</style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+  <p>
+    <button type="button" onclick="cStyles();">getComputedStyle</button>
+    height<input id="t1" type="text" value="1" />
+    max-width<input id="t2" type="text" value="2" />
+    bg-color<input id="t3" type="text" value="3" />
+  </p>
+</form>
+
+</body>
+</html>
+ +

Exemple 7 : affichage des propriétés d'un objet event

+ +

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.

+ +

Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.

+ +

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.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
+
+<style>
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+</style>
+
+<script>
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+</head>
+
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
+
+</html>
+ +

Exemple 8 : utilisation de l'interface DOM Table

+ +

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")}}

+ +

Pour ajouter une ligne et quelques cellules à un tableau existant :

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script>
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i < 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+</script>
+ +

Notes

+ + + + + + diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/exemples/index.html deleted file mode 100644 index 08bd432a1e..0000000000 --- a/files/fr/web/api/document_object_model/exemples/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Exemples -slug: Web/API/Document_Object_Model/Exemples -tags: - - DOM - - Exemples -translation_of: Web/API/Document_Object_Model/Examples ---- -

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.

- -

Exemple 1 : height (hauteur) et width (largeur)

- -

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

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>width/height example</title>
-<script>
-function init() {
-  var arrImages = new Array(3);
-
-  arrImages[0] = document.getElementById("image1");
-  arrImages[1] = document.getElementById("image2");
-  arrImages[2] = document.getElementById("image3");
-
-  var objOutput = document.getElementById("output");
-  var strHtml = "<ul>";
-
-  for (var i = 0; i < arrImages.length; i++) {
-    strHtml += "<li>image" + (i+1) +
-            ": height=" + arrImages[i].height +
-            ", width=" + arrImages[i].width +
-            ", style.height=" + arrImages[i].style.height +
-            ", style.width=" + arrImages[i].style.width +
-            "<\/li>";
-  }
-
-  strHtml += "<\/ul>";
-
-  objOutput.innerHTML = strHtml;
-}
-</script>
-</head>
-<body onload="init();">
-
-<p>Image 1: no height, width, or style
-  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
-</p>
-
-<p>Image 2: height="50", width="500", but no style
-  <img id="image2"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       height="50" width="500">
-</p>
-
-<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
-  <img id="image3"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       style="height: 50px; width: 500px;">
-</p>
-
-<div id="output"> </div>
-</body>
-</html>
- -

Exemple 2 : attributs d'image

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Modifying an image border</title>
-
-<script>
-function setBorderWidth(width) {
-  document.getElementById("img1").style.borderWidth = width + "px";
-}
-</script>
-</head>
-
-<body>
-<p>
-  <img id="img1"
-       src="image1.gif"
-       style="border: 5px solid green;"
-       width="100" height="100" alt="border test">
-</p>
-
-<form name="FormName">
-  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
-  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
-</form>
-
-</body>
-</html>
- -

Exemple 3 : manipulation de styles

- -

Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupéré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.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Changing color and font-size example</title>
-
-<script>
-function changeText() {
-  var p = document.getElementById("pid");
-
-  p.style.color = "blue"
-  p.style.fontSize = "18pt"
-}
-</script>
-</head>
-<body>
-
-<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
-
-<form>
-  <p><input value="rec" type="button" onclick="changeText();" /></p>
-</form>
-
-</body>
-</html>
- -

Exemple 4 : utilisation de feuilles de style

- -

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

- -
var ss = document.styleSheets;
-
-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" );
-  }
-}
- -

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

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

Ce script affiche les lignes suivantes :

- -
BODY
-P
-#LUMPY
-
- -

Exemple 5 : propagation d'évènements

- -

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

- -

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.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Event Propagation</title>
-
-<style>
-#t-daddy { border: 1px solid red }
-#c1 { background-color: pink; }
-</style>
-
-<script>
-function stopEvent(ev) {
-  c2 = document.getElementById("c2");
-  c2.innerHTML = "hello";
-
-  // cela devrait empêcher t-daddy d'obtenir le click.
-  ev.stopPropagation();
-  alert("event propagation halted.");
-}
-
-function load() {
-  elem = document.getElementById("tbl1");
-  elem.addEventListener("click", stopEvent, false);
-}
-</script>
-</head>
-
-<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>
-
-</body>
-</html>
- -

Exemple 6 : getComputedStyle

- -

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.

- -

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

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-
-<title>getComputedStyle example</title>
-
-<script>
-function cStyles() {
-  var RefDiv = document.getElementById("d1");
-  var txtHeight = document.getElementById("t1");
-  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
-
-  txtHeight.value = h_style;
-
-  var txtWidth = document.getElementById("t2");
-  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
-
-  txtWidth.value = w_style;
-
-  var txtBackgroundColor = document.getElementById("t3");
-  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
-
-  txtBackgroundColor.value = b_style;
-}
-</script>
-
-<style>
-#d1 {
-  margin-left: 10px;
-  background-color: rgb(173, 216, 230);
-  height: 20px;
-  max-width: 20px;
-}
-</style>
-
-</head>
-
-<body>
-
-<div id="d1">&nbsp;</div>
-
-<form action="">
-  <p>
-    <button type="button" onclick="cStyles();">getComputedStyle</button>
-    height<input id="t1" type="text" value="1" />
-    max-width<input id="t2" type="text" value="2" />
-    bg-color<input id="t3" type="text" value="3" />
-  </p>
-</form>
-
-</body>
-</html>
- -

Exemple 7 : affichage des propriétés d'un objet event

- -

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.

- -

Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.

- -

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.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Show Event properties</title>
-
-<style>
-table { border-collapse: collapse; }
-thead { font-weight: bold; }
-td { padding: 2px 10px 2px 10px; }
-
-.odd { background-color: #efdfef; }
-.even { background-color: #ffffff; }
-</style>
-
-<script>
-
-function showEventProperties(e) {
-  function addCell(row, text) {
-    var cell = row.insertCell(-1);
-    cell.appendChild(document.createTextNode(text));
-  }
-
-  var e = e || window.event;
-  document.getElementById('eventType').innerHTML = e.type;
-
-  var table = document.createElement('table');
-  var thead = table.createTHead();
-  var row = thead.insertRow(-1);
-  var lableList = ['#', 'Property', 'Value'];
-  var len = lableList.length;
-
-  for (var i=0; i<len; i++) {
-    addCell(row, lableList[i]);
-  }
-
-  var tbody = document.createElement('tbody');
-  table.appendChild(tbody);
-
-  for (var p in e) {
-    row = tbody.insertRow(-1);
-    row.className = (row.rowIndex % 2)? 'odd':'even';
-    addCell(row, row.rowIndex);
-    addCell(row, p);
-    addCell(row, e[p]);
-  }
-
-  document.body.appendChild(table);
-}
-
-window.onload = function(event){
-  showEventProperties(event);
-}
-</script>
-</head>
-
-<body>
-<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
-</body>
-
-</html>
- -

Exemple 8 : utilisation de l'interface DOM Table

- -

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")}}

- -

Pour ajouter une ligne et quelques cellules à un tableau existant :

- -
<table id="table0">
- <tr>
-  <td>Row 0 Cell 0</td>
-  <td>Row 0 Cell 1</td>
- </tr>
-</table>
-
-<script>
-var table = document.getElementById('table0');
-var row = table.insertRow(-1);
-var cell,
-    text;
-
-for (var i = 0; i < 2; i++) {
-  cell = row.insertCell(-1);
-  text = 'Row ' + row.rowIndex + ' Cell ' + i;
-  cell.appendChild(document.createTextNode(text));
-}
-</script>
- -

Notes

- - - - - - diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..9e74fa2870 --- /dev/null +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,146 @@ +--- +title: Comment créer un arbre DOM +slug: Comment_créer_un_arbre_DOM +tags: + - AJAX + - DOM + - Extensions +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+ +

Cet article décrit comment utiliser l'API DOM Core (en) 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

+ +

Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :

+ +
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+ +

Et après ?

+ +

Les arbres DOM peuvent être interrogés en utilisant des expressions XPath, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant XMLSerializer (sans avoir à le convertir en chaîne de caractères auparavant), envoyés à un serveur Web (via XMLHttpRequest), transformés en utilisant XSLT, XLink,  convertis en un objet JavaScript à travers un algorithme JXON, etc.

+ +

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.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" "b/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" deleted file mode 100644 index cd96a7446c..0000000000 --- "a/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Les évènements et le DOM -slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM -tags: - - API - - DOM - - Guide - - évènements -translation_of: Web/API/Document_Object_Model/Events ---- -

Introduction

- -

Ce chapitre décrit le modèle d'événement DOM. L'interface Event elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les écouteurs d'évènements et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.

- -

Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le document sur les évènements DOM Niveau 3.

- -

Voir aussi l'exemple 5 : Propagation des évènements dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.

- -

Enregistrement des écouteurs d'évènements

- -

Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.

- -

EventTarget.addEventListener

- -
// Supposons que myButton est un élément de bouton
-myButton.addEventListener('click', function(){alert('Hello world');}, false);
-
- -

C'est la méthode à utiliser dans les pages web modernes.

- -

Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.

- -

Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.

- -

attribut HTML

- -
<button onclick="alert('Hello world!')">
-
- -

Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre event. La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML.

- -

Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.

- -

Propriétés d'un élément DOM

- -
// Supposons que myButton est un élément de bouton
-myButton.onclick = function(event){alert('Hello world');};
-
- -

La fonction peut être définie pour prendre un paramètre d'event. La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML.

- -

Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.

- -

Accès aux interfaces d'évènements

- -

Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'objet fenêtre, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.

- -

L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.

- -
function foo(evt) {
-  // le paramètre evt est automatiquement assigné à l'objet évènement
-  alert(evt);
-}
-table_el.onclick = foo;
-
- - - - diff --git "a/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" "b/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" deleted file mode 100644 index aae8808be0..0000000000 --- "a/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Localisation des éléments DOM avec les sélecteurs -slug: >- - Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs -tags: - - API - - DOM - - Débutant - - Elements - - Sélecteurs -translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors ---- -
{{ gecko_minversion_header("1.9.1") }}
- -

L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds 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.

- -

L'interface NodeSelector

- -

Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :

- -
-
querySelector
-
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
-
querySelectorAll
-
Renvoie une 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.
-
- -
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
- -

Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes querySelector() et querySelectorAll(), ainsi que dans l'article Extraits de code pour querySelector.

- -

Sélecteurs

- -

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 :

- -
var special = document.querySelectorAll( "p.warning, p.note" );
- -

Vous pouvez aussi interroger par l'ID (identifiant). Par exemple :

- -
var el = document.querySelector( "#main, #basic, #exclamation" );
- -

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.

- -

Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes querySelector() et querySelectorAll().

- -

Voir aussi

- - diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..aae8808be0 --- /dev/null +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,55 @@ +--- +title: Localisation des éléments DOM avec les sélecteurs +slug: >- + Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs +tags: + - API + - DOM + - Débutant + - Elements + - Sélecteurs +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +
{{ gecko_minversion_header("1.9.1") }}
+ +

L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds 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.

+ +

L'interface NodeSelector

+ +

Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :

+ +
+
querySelector
+
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
+
querySelectorAll
+
Renvoie une 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.
+
+ +
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
+ +

Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes querySelector() et querySelectorAll(), ainsi que dans l'article Extraits de code pour querySelector.

+ +

Sélecteurs

+ +

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 :

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

Vous pouvez aussi interroger par l'ID (identifiant). Par exemple :

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

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.

+ +

Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes querySelector() et querySelectorAll().

+ +

Voir aussi

+ + diff --git "a/files/fr/web/api/document_object_model/pr\303\251face/index.html" "b/files/fr/web/api/document_object_model/pr\303\251face/index.html" deleted file mode 100644 index 77c272f5b2..0000000000 --- "a/files/fr/web/api/document_object_model/pr\303\251face/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Préface -slug: Web/API/Document_Object_Model/Préface -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -

{{ ApiRef() }}

-

À propos de cette référence

-

Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.

-

Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la référence de DOM document) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.

-

À qui est destiné ce guide

-

Le lecteur de la Référence du DOM Gecko est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, XML, les serveurs et standards du Web, et même en ce qui concerne JavaScript, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec HTML, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.

-

Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.

-

Présentation de Gecko

-

Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

-

Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple window etc.) dans le contexte des pages Web et de l'interface applicative (ou - - chrome - ) du navigateur.

-

Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.

-

Syntaxe de l'API

-

Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.

-

Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule availHeight de l'objet screen est présentée de la manière suivante :

-
screenObj = window.screen.availHeight;
-
-

Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :

-
chaine = window.status;
-window.status =chaine;
-
-

En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme element pour tous les éléments, document pour l'objet de document racine, table pour un objet de tableau, etc. Consultez Types de données importants pour plus d'informations à propos des types de données.

-

Utilisation des exemples

-

Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété window.document peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :

-
<html>
-
-<script>
-function testWinDoc() {
-
-  doc= window.document;
-
-  alert(doc.title);
-
-}
-</script>
-
-<button onclick="testWinDoc();">test de la propriété document</button>
-
-</html>
-
-

Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section Test de l'API DOM de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.

-
-  
-

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..9e3407a0aa --- /dev/null +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,351 @@ +--- +title: Explorer un tableau HTML avec des interfaces DOM et JavaScript +slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript +tags: + - DOM + - Guide + - HTML + - JavaScript +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

 

+ +

Introduction

+ +

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.

+ +
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).
+ +

Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)

+ +

Contenu HTML

+ +
<input type="button" value="Generate a table." onclick="generate_table()">
+ +

Contenu JavaScript

+ +
function generate_table() {
+  // get the reference for the body
+  var body = document.getElementsByTagName("body")[0];
+
+  // creates a <table> element and a <tbody> element
+  var tbl = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // creating all cells
+  for (var i = 0; i < 2; i++) {
+    // creates a table row
+    var row = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Create a <td> element and a text node, make the text
+      // node the contents of the <td>, and put the <td> at
+      // the end of the table row
+      var cell = document.createElement("td");
+      var cellText = document.createTextNode("cell in row "+i+", column "+j);
+      cell.appendChild(cellText);
+      row.appendChild(cell);
+    }
+
+    // add the row to the end of the table body
+    tblBody.appendChild(row);
+  }
+
+  // put the <tbody> in the <table>
+  tbl.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tbl);
+  // sets the border attribute of tbl to 2;
+  tbl.setAttribute("border", "2");
+}
+ +

{{ 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. +
  2. Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.
    3. +
  3. Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.
    4. +
  4. Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.
    5. +
  5. Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.
    6. +
+ +

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);
    +
    2. +
  2. Ensuite, on lie chaque élément <td> à son élément <tr> parent avec + 
    row.appendChild(cell);
    +
    3. +
  3. Puis chaque <tr> à son parent <tbody> avec + 
    tablebody.appendChild(row);
    +
    4. +
  4. Puis l'élément <tbody> est attaché à son élément parent <table> grace à + 
    table.appendChild(tablebody);
    +
    5. +
  5. Enfin, <table> est rattaché à <body> avec + 
    body.appendChild(table);
    +
    6. +
+ +

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.

+ +

Voici l'HTML généré par ce code JavaScript :

+ +
...
+<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>
+...
+
+ +

Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :

+ +

Image:sample1-tabledom.jpg

+ +

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.

+ +

Exemple : Définition de la couleur d'arrière-plan d'un paragraphe

+ +

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.

+ +

Contenu HTML

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

Contenu JavaScript

+ +
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];
+
+  // à présent, trouve tous les éléments p enfants de cet élément body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // récupère le second élément de cette liste d'éléments p
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ 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).

+ +
    +
  1. On récupère d'abord une liste de tous les éléments body avec + 
    myBody = document.getElementsByTagName("body")[0]
    + 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)}}.
    2. +
  2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Pour finir on prend le deuxième élément de la liste des éléments p avec + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

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 :

+ +
myP.style.background = "rgb(255,0,0)";
+// ajoute une propriété de style inline
+
+ +

Création de nœuds texte avec document.createTextNode("..")

+ +

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.

+ +
myTextNode = document.createTextNode("world");
+ +

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.

+ +

Insertion d'éléments avec appendChild(...)

+ +

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).

+ +
myP.appendChild(noeudTexte);
+
+ +

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 :

+ +

Image:sample2b2.jpg

+ +
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.
+ +

Création de nouveaux éléments avec l'objet document et la méthode createElement(...)

+ +

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 :

+ +
nouveauNoeudBALISEP = document.createElement("p");
+body.appendChild(nouveauNoeudBALISEP);
+
+ +

Image:sample2c.jpg

+ +

Suppression de nœuds avec la méthode removeChild(...)

+ +

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 » :

+ +
myP.removeChild(noeudTexte);
+
+ +

Vous pouvez ensuite ajouter monNoeudTexte (contenant "world") dans l'élément <p> récemment créé :

+ +
nouveauNoeudBALISEP.appendChild(noeudTexte);
+
+ +

L'arborescence des objets se présente désormais comme ceci :

+ +

Image:sample2d.jpg

+ +

Création dynamique d'un tableau (retour à Sample1.html)

+ +

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.

+ +

Rappel de la structure arborescente d'un tableau HTML

+ +

Image:sample1-tabledom.jpg

+ +

Création et insertion des éléments dans l'arborescence

+ +

On peut décomposer la création du tableau de Exemple1.html en trois étapes :

+ + + +

Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

+ +
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.
+ +
<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>
+        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>
+            row = document.createElement("tr");
+
+            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>
+                cell.appendChild(texte);
+                // ajoute la cellule <td> à la ligne <tr>
+                row.appendChild(cell);
+            }
+            // ajoute la ligne <tr> à l'élément <tbody>
+            tablebody.appendChild(row);
+        }
+
+        // ajoute <tbody> à l'élément <table>
+        table.appendChild(tablebody);
+        // 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>
+
+ +

Manipulation du tableau avec DOM et CSS

+ +

Récupérer un nœud texte dans le tableau

+ +

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>.

+ +
Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
+ +
mybody = document.getElementsByTagName("body")[0];
+mytable = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow = mytablebody.getElementsByTagName("tr")[1];
+mycel = myrow.getElementsByTagName("td")[1];
+
+// premier élément du noeud liste des enfants de mycel
+myceltext=mycel.childNodes[0];
+
+//  contenu de currenttext est le contenu des données de myceltext
+currenttext=document.createTextNode(myceltext.data);
+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 :

+ +
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);
+       }
+       table.appendChild(tablebody);
+       body.appendChild(table);
+    }
+</script>
+</html>
+
+ +

Original Document Information

+ +
+
Author(s)
+
Marcio Galli
+
Migrated from
+
http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/
+
+ +


+ Interwik

diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html new file mode 100644 index 0000000000..a9efdf8cdb --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html @@ -0,0 +1,44 @@ +--- +title: Exemple +slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple +tags: + - API + - DOM + - Débutant + - Exemples +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +--- +

 

+ +
 <html>
+ <head>
+   <title>Mon Document</title>
+   <script type="text/javascript">
+   function change() {
+     // 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 (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);
+     para.firstChild.data = "C'est le premier paragraphe.";
+     // créer un nouveau noeud Texte pour le second paragraphe
+     var newText = document.createTextNode("Ceci est le second paragraphe.");
+     // créer un nouvel Element devant être le second paragraphe
+     var newElement = document.createElement("P");
+     // placer le texte dans le paragraphe
+     newElement.appendChild(newText);
+     // et placer le paragraphe à la fin du document par son ajout
+     // 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>
+
diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..0f140378e6 --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,92 @@ +--- +title: Utilisation du DOM Level 1 Core du W3C +slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C +tags: + - Arbre + - DOM + - Noeud + - Texte +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

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.

+ +

Définition d'un arbre de contenu

+ +

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) :

+ +
<html>
+<head>
+  <title>Mon document</title>
+</head>
+<body>
+  <h1>Titre</h1>
+  <p>Paragraphe</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.

+ +

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.)

+ +

Ce que permet le DOM Level 1 Core

+ +

Le DOM Level 1 permet de modifier l'arbre du contenuselon 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 de la spécification DOM Level 1 du W3C.

+ +

Un exemple simple

+ +

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 :

+ +

Contenu HTML

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+ +

Contenu JavaScript

+ +
  function change() {
+    // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
+    // éléments dans le document, et le premier est le nombre 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // le firstChild de l'en-tête est un noeud texte::
+    header.firstChild.data = "A dynamic document";
+    // maintenant l'en-tête est "Un document dynamique".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // crée un nouveau noeud texte pour le second paragraphe
+    var newText = document.createTextNode("This is the second paragraph.");
+    // crée un nouvel Element pour le second paragraphe
+    var newElement = document.createElement("P");
+    // pose le texte dans le paragraphe
+    newElement.appendChild(newText);
+    // et pose le paragraphe à la fin du document en l'ajoutant
+    // au BODY (qui est le parent de para)
+    para.parentNode.appendChild(newElement);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

Vous pouvez voir ce script dans un exemple complet.

+ +

Pour en apprendre plus

+ +

Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.

+ +

Consultez également la spécification DOM Level 1 Core 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.

+ +
+

Informations sur le document original

+ + +
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html deleted file mode 100644 index a9efdf8cdb..0000000000 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Exemple -slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple -tags: - - API - - DOM - - Débutant - - Exemples -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example ---- -

 

- -
 <html>
- <head>
-   <title>Mon Document</title>
-   <script type="text/javascript">
-   function change() {
-     // 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 (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);
-     para.firstChild.data = "C'est le premier paragraphe.";
-     // créer un nouveau noeud Texte pour le second paragraphe
-     var newText = document.createTextNode("Ceci est le second paragraphe.");
-     // créer un nouvel Element devant être le second paragraphe
-     var newElement = document.createElement("P");
-     // placer le texte dans le paragraphe
-     newElement.appendChild(newText);
-     // et placer le paragraphe à la fin du document par son ajout
-     // 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>
-
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html deleted file mode 100644 index 0f140378e6..0000000000 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Utilisation du DOM Level 1 Core du W3C -slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C -tags: - - Arbre - - DOM - - Noeud - - Texte -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core ---- -

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.

- -

Définition d'un arbre de contenu

- -

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) :

- -
<html>
-<head>
-  <title>Mon document</title>
-</head>
-<body>
-  <h1>Titre</h1>
-  <p>Paragraphe</p>
-</body>
-</html>
-
- -

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

- -

Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.

- -

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.)

- -

Ce que permet le DOM Level 1 Core

- -

Le DOM Level 1 permet de modifier l'arbre du contenuselon 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 de la spécification DOM Level 1 du W3C.

- -

Un exemple simple

- -

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 :

- -

Contenu HTML

- -
<body>
-<input type="button" value="Change this document." onclick="change()">
-<h2>Header</h2>
-<p>Paragraph</p>
-</body>
- -

Contenu JavaScript

- -
  function change() {
-    // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
-    // éléments dans le document, et le premier est le nombre 0:
-
-    var header = document.getElementsByTagName("H2").item(0);
-    // le firstChild de l'en-tête est un noeud texte::
-    header.firstChild.data = "A dynamic document";
-    // maintenant l'en-tête est "Un document dynamique".
-
-    var para = document.getElementsByTagName("P").item(0);
-    para.firstChild.data = "This is the first paragraph.";
-
-    // crée un nouveau noeud texte pour le second paragraphe
-    var newText = document.createTextNode("This is the second paragraph.");
-    // crée un nouvel Element pour le second paragraphe
-    var newElement = document.createElement("P");
-    // pose le texte dans le paragraphe
-    newElement.appendChild(newText);
-    // et pose le paragraphe à la fin du document en l'ajoutant
-    // au BODY (qui est le parent de para)
-    para.parentNode.appendChild(newElement);
-  }
- -

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

- -

Vous pouvez voir ce script dans un exemple complet.

- -

Pour en apprendre plus

- -

Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.

- -

Consultez également la spécification DOM Level 1 Core 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.

- -
-

Informations sur le document original

- - -
-- cgit v1.2.3-54-g00ecf