Introduction au JavaScript


précédentsommairesuivant

V. Manipuler la page - Les grandes lignes du DOM

V-A. Représentation de la page

Quelques liens :
Utilisation du DOMUtilisation du DOM
Document du W3CLien vers le W3C - Les noeuds
Manipulation des nœuds du document (selfhtml.org)Lien vers http://fr.selfthtml.org/javascript/objets/node.htm

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

Document W3C sur les nœudsLien vers le W3C
Plus d'informations sur le type des nœuds (selfhtml.org)Lien vers http://fr.selfhtml.org/javascript/objets/node.htm#node_type

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
Sélectionnez

//Ciblage du paragraphe
var MonParagraphe = document.getElementById("idPg");
//Modification de son contenu
MonParagraphe.innerHTML = "<img 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
Sélectionnez

//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
Sélectionnez

<!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
Sélectionnez

|-- 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
Sélectionnez

|-- 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
Sélectionnez

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

Lien vers le script completExemple de script

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
Sélectionnez

|-- 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()
Sélectionnez

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

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()
Sélectionnez

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

// 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
Sélectionnez

//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
Sélectionnez

new Option("Text","Value", "defaultSelected true / false", "selected true / false");

Les objets sont créés mais ne sont pas ajoutés à la liste pour autant.

Création des options d'une liste
Sélectionnez

//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
Sélectionnez

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
Sélectionnez

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

Qu'est-ce qu'AjaxQu'est-ce qu'Ajax ? ?
La rubrique AjaxLa rubrique Ajax
Les ressources Ajax sur developpez.comLes ressources Ajax sur developpez.com


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Auteur. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.