11 juin 2010

Introduction à JavaScript: Cours N° 05

12:21 Java Script , 0 Comments
V. Manipuler la page - Les grandes lignes du DOM
V-A. Représentation de la page
V-A-1. Propriétés des nœuds
V-A-1-a. Propriétés
V-A-1-b. Remarques sur innerHTML et nodeValue
V-A-2. Exemples d'arbres DOM sous divers navigateurs
V-A-2-a. Arborescence selon Firefox
V-A-2-b. Arborescence selon Firefox v2
V-A-2-c. Arborescence selon Internet Explorer v5
V-B. Création, insertion, suppression d'un nœud
V-B-1. Méthodes JavaScript pour la gestion des nœuds
V-B-2. Exemple
V-B-2-a. Arborescence du document
V-B-2-b. Création des éléments
V-B-2-c. Insertion des objets dans le document
V-C. Ajax


V. Manipuler la page - Les grandes lignes du DOM


V-A. Représentation de la page

V-A-1. Propriétés des nœuds

V-A-1-a. Propriétés
Le DOM (Document Object Model) est un modèle standardisé par le W3C (World Wide Web Consortium). Ce modèle propose de représenter un document sous la forme d'un arbre. Toutes les balises HTML sont donc des nœuds de l'arbre et les feuilles sont soit des balises sans contenu, soit le texte de la page HTML.

Popriétés Commentaires
childNodes nœuds enfants
firstChild premier nœud enfant
lastChild dernier nœud enfant
nextSibling prochain nœud d'un type (nœud de même niveau)
parentNode nœud parent
previousSibling nœud précédent d'un type (nœud de même niveau)
nodeName nom du nœud
nodeValue valeur / contenu du nœud
nodeType type du nœud (cf. ci-dessous)
Types de nœuds :

1 - Nœud élément
2 - Nœud attribut
3 - Nœud texte
4 - Nœud pour CDATA
5 - Nœud pour référence d'entité
6 - Nœud pour entité 		7 - Nœud pour instruction de traitement
8 - Nœud pour commentaire
9 - Nœud document
10 - Nœud type de document
11 - Nœud de fragment de document
12 - Nœud pour notation

V-A-1-b. Remarques sur innerHTML et nodeValue
innerHTML est une instruction qui permet de modifier le contenu d'une balise ou d'insérer un objet dans la page.
Insertion d'une image en utilisant innerHTML

//Ciblage du paragraphe
var MonParagraphe = document.getElementById("idPg");
//Modification de son contenu
MonParagraphe.innerHTML = " src='imageInseree.gif' /> Mon nouveau texte";
Une image sera insérée dans le paragraphe. Néanmoins, cette méthode présente quelques inconvénients lorsqu'il s'agit de modifier le contenu d'un formulaire (balise form). Lors de l'envoi du formulaire, les valeurs des objets créés via innerHTML ne sont pas toujours transmises au serveur. C'est pour cette raison qu'il est préférable d'utiliser les méthodes gérant les nœuds.
Insertion d'une image en utilisant nodeValue

//Ciblage du paragraphe
var e = document.getElementById("idPg");

//Création de l'image
var i = document.createElement("img");

//Source de l'image
i.src = "imageInseree.gif";

//Modifiaction du texte (noeud #text)
e.firstChild.nodeValue ="mon nouveau texte";

//Ajout de l'image avant le texte
e.insertBefore(i,e.firstChild);

V-A-2. Exemples d'arbres DOM sous divers navigateurs

Soit une page Web définie par le code ci-dessous.
Représentation de la page Web

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>DOM</title>
 </head>

<body>

 <div id="idP1" style="border:1px solid #AAAAAA">
 <h4>DIV 1</h4>
 bla bla bla bla bla bla bla bla bla bla bla 
 <span>bla bla bla bla bla bla bla</span>
 bla bla bla bla bla bla bla bla bla
 <a href="">bla bla bla bla bla bla bla bla bla</a>
 </div>

 <div id="idP2">
  <h4>DIV 2</h4>
  bla bla bla bla bla bla bla bla bla
 </div>

</body>

</html>

V-A-2-a. Arborescence selon Firefox
La page ci-dessus est représentée sous Firefox selon ce schéma :
Arbre DOM de Firefox v1

|-- HTML
 |-- HEAD
  |-- TITLE
   |-- #text
 |-- #text (0)
 |-- BODY
  |-- #text (1)
  |-- DIV  id = "idP1"
   |-- H4
    |-- #text 
   |-- #text (2)
   |-- SPAN
   |-- #text 
   |-- A
   |-- #text (3)
  |-- #text (4)
  |-- DIV  id = "idP2"
   |-- H4
    |-- #text
   |-- #text (5)
  |-- #text (6)
Donc d'après cet arbre DOM, nous avons :

  BODY DIV (idP1) DIV (idP2)
childNodes #text (1) ; DIV ; #text (4) ; DIV ; #text (6) H4 ; #text (2) ; SPAN ; #text ; A ; #text (3) H4 ; #text (5)
firstChild #text (1) H4 H4
lastChild #text (6) #text (3) #text (5)
nextSibling inexistant #text (4) #text (6)
parentNode HTML BODY BODY
previousSibling #text (0) #text (1) #text (4)

V-A-2-b. Arborescence selon Firefox v2
Arbre DOM de Firefox v2

|-- HTML
 |-- HEAD
  |-- TITLE
   |-- #text (0)
 |-- BODY
  |-- #text (1)
  |-- DIV  id = "idP1"
   |-- #text (2)
   |-- H4
    |-- #text 
   |-- #text (3)
   |-- SPAN
    |-- #text
   |-- #text  (4)
   |-- A
    |-- #text
   |-- #text (5)
  |-- #text (6)
  |-- DIV  id = "idP2"
   |-- #text (7)
   |-- H4
    |-- #text
   |-- #text (8)
  |-- #text (9)
D'après cet arbre :

  BODY DIV (idP1) DIV (idP2)
childNodes #text (1) ; DIV (idP1) ; #text (6) ; DIV (idP2) ; #text (9) #text (2) ; H4 ; #text (3) ; SPAN ; #text (4) ; A ; #text (5) #text (7) ; H4 ; #text (8)
firstChild #text (1) #text (2) #text (7)
lastChild #text (9) #text (5) #text (8)
nextSibling inexistant #text (6) #text (9)
parentNode HTML BODY BODY
previousSibling HEAD #text (1) #text (6)

V-A-2-c. Arborescence selon Internet Explorer v5
Internet Explorer supprime les nœuds vides au moment de la création de la page.
Arbre DOM d'Internet Explorer

|-- HTML
 |-- HEAD
  |-- TITLE
 |-- BODY
  |-- DIV  id = "idP1"
   |-- H4
   |-- #text (1)
   |-- SPAN
   |-- #text (2)
   |-- A
   |-- #text (3)
  |-- DIV  id = "idP2"
   |-- H4
   |-- #text (4)
Donc d'après cet arbre, nous avons :

  BODY DIV (idP1) DIV (idP2)
childNodes DIV ; DIV H4 ; #text (1) ; SPAN ; #text (2) ; A ; #text (3) H4 ; #text (4)
firstChild DIV (idP1) H4 H4
lastChild DIV (idP2) #text (3) #text (4)
nextSibling inexistant DIV (idP2) inexistant
parentNode HTML BODY BODY
previousSibling HEAD inexistant DIV (idP1)

V-B. Création, insertion, suppression d'un nœud


V-B-1. Méthodes JavaScript pour la gestion des nœuds

Quelques fonctions permettant de gérer les nœuds du document.

Méthodes Commentaires
createElement() Méthode pour créer un nouvel élément HTML dans le document (div, p, span, a, form, input, etc...).
createTextNode() Méthode pour créer un nœud texte.
appendChild() Pour ajouter l'élément créé dans le document. L'élément sera ajouté comme étant le dernier nœud enfant d'un élément parent.
insertBefore() Pour ajouter l'élément créé avant un autre nœud.
removeChild() Pour supprimer un nœud.

V-B-2. Exemple


Soit un formulaire dans lequel on trouve  un groupe d'éléments :

  • trois textes : « Votre texte » ; « Vos options » ; « La suite »
  • deux boîtes de textes ;
  • une liste d'options.
ET un bouton qui permet d'ajouter à ce formulaire un nouveau groupe d'éléments identique au précédent. Ce nouveau groupe sera inséré avant le bouton.

Aspect final du formulaire :

Exemple de formulaire
Aspect final du formulaire

V-B-2-a. Arborescence du document
Arborescence du document HTML

|-- BODY
 |-- FORM   id = "idFormulaire"
  |-- #text :  Votre texte :
  |-- INPUT  value = ""  type = "text" 
  |-- #text :  Vos options :
  |-- SELECT  size = "1"
   |-- OPTION  value = ""   text="Votre choix"
   |-- OPTION  value = "valeur1"  text="Option 1"
   |-- OPTION  value = "valeur2"  text="Option 2"
   |-- OPTION  value = "valeur3"  text="Option 3"
   |-- OPTION  value = "valeur4"  text="Option 4"
  |-- #text :  La suite :
  |-- INPUT  value = ""  type = "text" 
  |-- BR
  |-- BR
  |-- INPUT  value = "Ajouter un élément"  type = "button" id = "idBouton" 
    onclick ="addLigne()" 
  |-- BR

V-B-2-b. Création des éléments
Dans un premier temps nous allons créer tous les éléments qui seront dans la page :

Création de deux input de type texte.
Nous utilisons la fonction createElement().
Syntaxe de la méthode createElement()

document.createElement("element HTML à créer");
Création des input de type text

var elInput = new Array();
for (i=0;i<2;i++)
{
 elInput[i] = document.createElement("input");
 elInput[i].type = "text";
}
 

Création des trois textNode « Votre texte » ; « Vos options » ; « La suite » : nous utilisons la fonction createTextNode().
Syntaxe de la méthode createTextNode()

document.createTextNode("Texte du nœud");
Création des textNode

// Tableau dans lequel seront stockés les éléments
var elTxt = new Array(); 

//Textes des éléments
var tabTxt = new Array("Votre texte : ","Vos options : ","La suite : ");

for (i=0; i<tabTxt.length; i++)
{
    elTxt[i] = document.createTextNode(tabTxt[i]);
}
 

Création de la liste déroulante : le code ci-dessous ne permet de créer que la balise select. Nous verrons plus loin comment créer et ajouter les options à la liste.
Création de la liste déroulante

//création de l'élément select
var elSelect = document.createElement("select"); 

//nombre d'éléments visibles
elSelect.size = "1";
 

Création des options de la liste déroulante.
Les options sont des objets de la liste. Pour les créer nous n'utilisons pas la méthode createElement(). Nous allons créer ces objets en utilisant la syntaxe suivante :
Créer une option

new Option("Text","Value", "defaultSelected true / false", "selected true / false");
NB. Les objets sont créés mais ne sont pas ajoutés à la liste pour autant.
Création des options d'une liste

//Tableau contenant les options de la liste
var elOption = new Array(
                    new Option("Votre choix", "", false, false),
                    new Option("Option 1", "valeur1", false, false),
                    new Option("Option 2", "valeur2", false, false),
                    new Option("Option 3", "valeur3", false, false),
                    new Option("Option 4", "valeur4", false, false)
                          );
 

Création d'une ligne pour séparer chaque groupe. Une feuille de style s'appliquera sur cette ligne.
Création d'une ligne

var ligne = document.createElement("hr");
ligne.className= "styleLigne";

V-B-2-c. Insertion des objets dans le document
Maintenant nous allons ajouter ces éléments au document. Ces éléments seront ajoutés dans le formulaire juste au-dessus du bouton "Ajouter un élément". Nous allons avoir besoin de l'objet formulaire (élément parent) et de l'objet bouton (référence).

La fonction utilisée est insertBefore(e1, e2) avec :
  • e1 : le nouvel élément enfant à insérer ;
  • e2 : un élément enfant avant lequel le nouvel élément enfant doit être inséré.
Ajout des éléments dans le document

//Appel des objets formulaire et bouton
var elForm = document.getElementById("idFormulaire");
var objBouton = document.getElementById("idBouton");

//Ajout de la ligne de séparation
elForm.insertBefore(ligne, objBouton);  
 
elForm.insertBefore(elTxt[0], objBouton); //1er texte
elForm.insertBefore(elInput[0], objBouton); //1er INPUT

elForm.insertBefore(elTxt[1], objBouton); //2ème texte

elForm.insertBefore(elSelect, objBouton); //Ajout du select

//Ajout dans le select des options (1)
for (i=0;i<elOption.length;i++)   
{
    elSelect.options.add(elOption[i]);
}

elForm.insertBefore(elTxt[2], objBouton); //3ème texte
elForm.insertBefore(elInput[1], objBouton); //2ème INPUT

//Saut de ligne 1
elForm.insertBefore(document.createElement("br"), objBouton); 
//Saut de ligne 2
elForm.insertBefore(document.createElement("br"), objBouton);
(1) Internet Explorer : il faut insérer le select dans le document avant d'ajouter les options.

V-C. Ajax

AJAX est une méthode de programmation des pages Web qui s'appuie sur des scripts JavaScript en utilisant l'objet xmlHttpRequest (aussi appelé XHR). Celui-ci permet de réaliser des requêtes vers le serveur de manière asynchrone et ainsi de mettre à jour tout ou partie du contenu d'une page Web.
By Price:
Product Tags:

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)