From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/document_object_model/exemples/index.html | 369 ++++++++++++++++++ files/fr/web/api/document_object_model/index.html | 428 +++++++++++++++++++++ .../document_object_model/introduction/index.html | 297 ++++++++++++++ .../index.html" | 74 ++++ .../index.html" | 55 +++ .../pr\303\251face/index.html" | 53 +++ .../exemple/index.html | 44 +++ .../index.html | 92 +++++ .../document_object_model/whitespace/index.html | 232 +++++++++++ 9 files changed, 1644 insertions(+) create mode 100644 files/fr/web/api/document_object_model/exemples/index.html create mode 100644 files/fr/web/api/document_object_model/index.html create mode 100644 files/fr/web/api/document_object_model/introduction/index.html create mode 100644 "files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" create 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/pr\303\251face/index.html" create mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html create mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html create mode 100644 files/fr/web/api/document_object_model/whitespace/index.html (limited to 'files/fr/web/api/document_object_model') diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/exemples/index.html new file mode 100644 index 0000000000..08bd432a1e --- /dev/null +++ b/files/fr/web/api/document_object_model/exemples/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/index.html b/files/fr/web/api/document_object_model/index.html new file mode 100644 index 0000000000..cf44a48c6d --- /dev/null +++ b/files/fr/web/api/document_object_model/index.html @@ -0,0 +1,428 @@ +--- +title: Référence du DOM +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - Intermédiaire + - Référence(2) +translation_of: Web/API/Document_Object_Model +--- +
{{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.

+ +

Interfaces du DOM

+ +
+ +
+ +

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 :

+ +
+ +
+ +

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

+ +
+ +
+ +

Autres interfaces

+ +
+ +
+ +

Interfaces HTML obsolètes {{obsolete_inline}}

+ +
+ +
+ +

Interfaces SVG

+ +

Interfaces des éléments SVG

+ +
+ +
+ +

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

+ +
+ +
+ +

Interfaces animées

+ +
+ +
+ +

Interfaces relatives à SMIL

+ +
+ +
+ +

Autres interfaces SVG

+ +
+ +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..49249815ec --- /dev/null +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -0,0 +1,297 @@ +--- +title: Introduction +slug: Web/API/Document_Object_Model/Introduction +tags: + - DOM + - Guide + - Reference +translation_of: Web/API/Document_Object_Model/Introduction +--- +

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.

+ +

NDTR: (Cette section consiste en une brève introduction conceptuelle du DOM : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents HTML et XML, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).

+ +

Qu'est-ce que le DOM?

+ +

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.

+ +

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.

+ +

Les normes DOM du W3C et WHATWG DOM 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.

+ +

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 :

+ +
paragraphes = document.getElementsByTagName("P");
+// paragraphes[0] est le premier élément <p>
+// paragraphes[1] est le second élément <p>, etc.
+alert(paragraphes[0].nodeName);
+
+ +

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.

+ +

DOM et JavaScript

+ +

Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en 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.

+ +

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

+ +

API(page Web ou XML) = DOM + JS(langage de script)

+ +

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 :

+ +
# 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");
+
+ +

Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.

+ +

Méthodes d'accès au DOM

+ +

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.

+ +

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 ou 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() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.

+ +

Le code JavaScrip suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).

+ +
<body
+  onload="window.alert('Bienvenue sur ma page Web !');">
+
+ +

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 :

+ +
<html>
+  <head>
+    <script>
+       //exécute la fonction lorsque le document est chargé
+       window.onload = function() {
+
+         // crée  un couple d'éléments dans une page HTML autrement vide
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Types de données fondamentaux

+ +

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.

+ +
+

Note: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN  fera souvent la même chose, à cause de la fréquence de cette hypothèse.

+
+ +

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

+ +

Le tableau suivant décrit brièvement ces types de données.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de donnée (Interface)Description
{{domxref("Document")}}Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
{{domxref("Node")}}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.
{{domxref("Element")}}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 document.createElement() 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).
{{domxref("NodeList")}}Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes : +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ +

Ces deux lignes sont équivalentes. Dans la première, item() est la méthode de l'objet nodeList. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.

+
{{domxref("Attribute")}}Lorsqu'un attribute est renvoyé par un membre (par exemple par la méthode createAttribute()), 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.
{{domxref("NamedNodeMap")}}Une namedNodeMap 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 namedNodeMap a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une namedNodeMap.
+ +

Les interfaces DOM

+ +

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

+ +

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.

+ +

Les interfaces et les objets

+ +

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

+ +

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.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Interface Node/Element
+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";
+
+ +

Interfaces essentielles du DOM

+ +

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 à la fin de livre.

+ +

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.

+ +

Ce qui suit est une brève liste des API communes au script de page dans le Web et  XML utilisant le DOM.

+ + + + + +

Test de l'API DOM

+ +

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.

+ +

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.

+ +

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.

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

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.

+ + + + + +
+
+
{{DefaultAPISidebar("DOM")}}
+
+
+ +
+
+

Traduction en Français :

+
+ +
Besoin d'aide ? • Guide d'édition • Guide stylistique
+ +
+
+
+ +
Brouillon enregistré automatiquement :
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
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" new file mode 100644 index 0000000000..cd96a7446c --- /dev/null +++ "b/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/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/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" new file mode 100644 index 0000000000..aae8808be0 --- /dev/null +++ "b/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/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" new file mode 100644 index 0000000000..025bc207a0 --- /dev/null +++ "b/files/fr/web/api/document_object_model/pr\303\251face/index.html" @@ -0,0 +1,53 @@ +--- +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 +--- +

{{ 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/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 new file mode 100644 index 0000000000..a9efdf8cdb --- /dev/null +++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/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/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 new file mode 100644 index 0000000000..0f140378e6 --- /dev/null +++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/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/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..d13a541dc7 --- /dev/null +++ b/files/fr/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,232 @@ +--- +title: Gestion des espaces dans le DOM +slug: Web/API/Document_Object_Model/Whitespace +tags: + - DOM +translation_of: Web/API/Document_Object_Model/Whitespace +--- +

Le problème

+ +

La présence d'espaces et de blancs dans le 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 fonctionne.) Cela signifie que :

+ + + +

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

+ +
<!-- My document -->
+<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>
+    Paragraph
+  </p>
+</body>
+</html>
+
+ +

+ +

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.

+ +

Rendre les choses plus faciles

+ +

On peut formater leur code comme indiqué ci-dessous pour contourner le problème:

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

Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :

+ +
/**
+ * Tout au long, les espaces sont définis comme l'un des caractères
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
+ * espaces (et aussi d'autres caractères).
+ */
+
+
+/**
+ * Détermine si le contenu du texte d'un nœud est entièrement blanc.
+ *
+ * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
+ *             un nœud |Text|, |Comment| ou |CDATASection|
+ * @return     True (vrai) Si tout le contenu du texte du |nod| est un espace,
+ *             sinon false (faux).
+ */
+function is_all_ws( nod )
+{
+  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * 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 (vrai) si le nœud est :
+ *                1) un nœud |Text| qui est tout en espace
+ *                2) un nœud |Comment|
+ *             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
+}
+
+/**
+ * Version de |previousSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.  (Normalement |previousSibling| est une propriété
+ * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
+ * un enfant du même parent, qui se produit immédiatement avant le
+ * nœud référence.)
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Version de |nextSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Version de |lastChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire. (Normalement |lastChild| est une propriété
+ * de tous les nœuds DOM qui donnent le dernier des nœuds contenus
+ * directement dans le nœud de référence.)
+ *
+ * @param sib  Le nœud référence.
+ * @return     soit :
+ *               1) Le dernier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Version de |firstChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire..
+ *
+ * @param sib  le nœud référence.
+ * @return     soit:
+ *               1) le nœud premier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Version de |data| cela n'inclut pas les espaces au début
+ * et termine et normalise tous les espaces dans un seul espace. (Normalement
+ * |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
+ *
+ * @param txt  Le nœud de texte dont les données doivent être renvoyées
+ * @return     Une chaîne donnant le contenu du nœud de texte avec
+ *             espace blanc s'est effondré.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+ +

Exemple

+ +

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.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "This is the third paragraph.")
+  {
+      cur.className = "magic";
+      cur.firstChild.textContent = "This is the magic paragraph.";
+  }
+  cur = node_after(cur);
+}
+ +
+

Informations sur le document original

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