Introduction au JavaScript

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

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.