Vous êtes sur la page 1sur 19

AJAX:

CHAPITRE1: DOCUMENT OBJECT MODEL (DOM)


Abdelouahed Sabri abdelouahed.sabri@gmail.com

2012/2013

INTRODUCTION

Le Document Object Model (ou DOM) est un standard du W3C qui dcrit une interface indpendante de tout langage de programmation et de toute plate-forme, permettant des programmes informatiques et des scripts d'accder et/ou de mettre jour le contenu, la structure ou le style de documents (langage de balisage) XML et HTML. Src. Wikipdia

HISTORIQUE

Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model.

Diffrence entre noms dobjets pour diffrents Navigateur web il faut crire plusieurs versions de chaque morceau de script pour rendre un site accessible au plus grand nombre de navigateur

La standardisation de ces techniques s'est faite en plusieurs tapes DOM 1, DOM 2 et DOM 3

HISTORIQUE

DOM niveau 1:

Publi en 1998
Dfinition par le W3C dune manire prcise de reprsenter un document (en particulier un document XML) sous la forme d'un arbre Ainsi, chaque lment gnr partir du balisage forme un nud (Node): pour le cas de HTML, un paragraphe, un titre ou un bouton de formulaire et considr comme un nud Aussi, ils ont introduits plusieurs fonctions qui permettent de manipuler larbre: ajouter, modifier ou supprimer des lments (nuds).

HISTORIQUE

DOM 2:
Publi en 2002 Possibilit de manipuler les vnements, les styles et les Views Dans cette version, il est possible didentifier rapidement un nud ou un groupe de nuds dans un document

Avant, on cherche un nud dans un tableau DOM 2 fera appel la fonction getElementById()

Norme standard de W3C


5

HISTORIQUE

DOM 3:
Publi en 2004 Ajout dinterface de chargement (vnement Load) et de sauvegarde de documents XML, Xpath (vnement Save).

NUDS

Tout composant ou lment dun document de balissage (Html, Xhtml ou XML) constitue un nud (node)

Document node (nud document): le document lui mme.


Ex. le document entier Toutefois la balise comme iframe peut introduire un nouveau document Ex. <hi>, <p>, <ul>, <li>, Ex., pour <p> Mon paragraphe</p>, les mots "Mon paragraphe" constituent un nud texte

Element node (nud lment): chaque balise ou lment.

Text node (noeud texte): texte contenu entre les balises.

Attribute node (noeud attribut): Chaque attribut dune balise ou lment.

Ex: Pour <img href="logo.png nuds attribut

alt="Logo" />, href et alt sont des


7

Comment node (noeud de commentaire): Commentaires

HIRARCHIE DES NUDS


Les nuds dans un langage de balisage sont en relation hirarchique sou forme dun arbre gnalogique Ainsi, la realtion entre nuds peut tre qualifi de relation:

parent/enfant:

Des nuds peuvent avoir des ascendants et des descendants: Nuds ascendants sont les nuds qui sont parents dun nud ou parents dun nud parent Nuds descendants sont les nuds qui sont enfants dun nud ou enfants dun nud enfant
8

frres et surs (siblings),

HIRARCHIE DES NUDS

Exemple:

Document

<html> <head> <title>Hirarchie des nuds</title> </head> <body> <h1>Titre de niveau 1</h1> <p>Mon paragraphe</p> <h2>Titre de niveau 2</h2> </body> </html>

HTML

Head

Body

Title

H1

H2

Hirarchie des nuds

Titre de niveau 1

Types de nuds:

Mon paragraph e

Titre de niveau 2

nud document: Document 9 nuds lment: html, head, body, title, h1, p, h2 Nuds texte: Hirarchie des nuds, Titre de niveau 1, Mon paragraphe, Titre de niveau 2

HIRARCHIE DES NUDS

Exemple (suite): Relation entre nuds:


Nud fils HEAD TITLE NB: lexception du nud document, chaque nud a un parent:

Nud parent HTML HEAD

TITLE
BODY H2
<H1>, <P> ET <H2> <HEAD> et <BODY>

Hirarchie des nuds


H2 Titre de niveau 2

Nuds frres et surs (siblings)

Ascendants Descendants
<HTML>

11

Les nuds de texte le nud de texte de <p>

<BODY>

ACCDER AU NUDS

Pour manipuler les nuds dans un document, on va utiliser les mthodes et proprits de lobjet document

Mthodes:

getElementById(x): retourne le nud lment dont l'ID est x getElementsByName(x): retourne la liste de nuds identifis par lattribut name="X" . Le rsultat est sous forme dun tableau Array. getElementsByTagName(x): retourne la liste de nuds (balises) de type spcifique X . Le rsultat est sous forme dun tableau Array item(n) : retourne l'lment en position n dans une lise de nuds innerHTML : attribut pour lire ou assigner le contenu d'un ID. utiliser avec les nuds de type 3 (#Texte) parentNode: Renvoie le nud parent dun nud. firstChild: Renvoie le premier enfant dun nud lastChild: Renvoie le dernier enfant dun nud childNodes(x): Stocke une liste de tous les nuds enfant disponibles partir dun nud X previousSibling: Renvoie le nud frres/surs prcdent dun nud. nextSibling; Renvoie le nud frres/surs suivant dun nud. 12 nodeName: Indique le nom du nud slectionn nodeType: Indique le type de nud rencontr. 1 si le nud est un lment. 2 si cest un attribut. 3 sil sagit du nud de texte nodeValue: Permet dobtenir ou de changer la valeur dun nud de type texte

Proprits:

ACCDER AU NUDS

Exemple:

<html> <head> <title>Hirarchie des nuds</title> <script type="text/javascript"> function GetNode() { var x = document.getElementById("Ttr1").nodeName; var y = document.getElementsByName("btn")[0].value; //var y = document.getElementsByName("btn").item(0).value; var z = document.getElementsByTagName("ul")[0].parentNode; var f = document.getElementById("Ttr2").firstChild.nodeValue; ; alert("x: " + x + "\n" + "y:" + y + "\n" + "z:" + z + "\n" + "e:" + e + "\n" + "f:" + f); } </script> </head> <body> <h1 id="Ttr1">Titre de niveau 1</h1> <p>Mon paragraphe</p> <ul> <li> choix 1</li><li> choix 2</li><li> choix 3</li></ul> <input type="text" value="Mon Texte" name="Txt"/> <h1 id="H1">Titre de niveau 1</h1> <h2 id="Ttr2">Titre de niveau 2</h2> <input type="button" name="btn" value="Afficher" onclick="GetNode()" /> </body> </html>

13

ACCDER AU NUDS

Exercice: pour la page HTML den bas

Ecrire le code JavaScript pour afficher un pop-up contenant: Le titre Le type du bouton Afficher . Lattribut Name du bouton est btn Le nom de la balise Un deuxime paragraphe portant l'identifiant p12 Le nom du nud parent du premier titre h2 Le deuxime paragraphe dont l'identifiant p12 Le premier titre h2 le texte en gras dans premier paragraphe Ecrire le code pour remplacer le texte Deuxime titre h2 par le texte du bouton Afficher <html> <head> <title>Exercice d'accs aux Nuds</title> </head> <body> <h1>Exemples d'accs aux lments</h1> <h2>Premier titre h2</h2> <p>Un premier <b>paragraphe.</b></p> <p id="p12">Un deuxime paragraphe portant l'identifiant p12</p> <p>Un troisime paragraphe.</p> <h2>Deuxime titre h2</h2> <p>Un quatrime paragraphe.</p> <p name="unpar">Un cinquime paragraphe portant le name unpar.</p> 14 <p name="unpar">Un sixime paragraphe portant le name unpar.</p> <p>Un septime paragraphe.</p> <input type="button" value="Afficher" name="btn" onclick="DOM()" /> </body> </html>

ACCDER AU NUDS

Exercice (suite):

<script type="text/javascript"> function DOM() { var tt=document.title; var nt= document.getElementsByName("btn").item(0).nodeType; var nn= document.getElementById("p12").nodeName; var nnp=document.getElementsByTagName("h2").item(0).parentNode.nodeName; var ndn= document.getElementById("p12").firstChild.nodeValue; // ou bien //var ndn=document.getElementById("p12").innerHTML; var npt= document.getElementsByTagName("h2").item(0).firstChild.nodeValue; var tgp= document.getElementsByTagName("p").item(0).childNodes.item(1).firstChild.nodeValue; alert(tt+"\n"+nt+"\n"+nn+"\n"+nnp+"\n"+ndn+"\n"+npt+"\n"+tgp); var x = document.getElementsByName("btn"); var y = document.getElementsByTagName("h2"); y.item(0).firstChild.nodeValue = x.item(0).value; } 15 </script>

ACCDER AUX ATTRIBUTS


Les attributs sont des proprits de llment La proprit attributes renvoie une liste des attributs dun lment spcifi.

Exemple:

// Lecture de la valeur dun attribut var para = document.getElementsByTagName("p").item(0); var attributs = para.attributes; alert(attributs.getNamedItem("lang").nodeValue); // Ajout dun attribut var attr = document.createAttribute("visible");

attr.value = "false";
para.attributes.setNamedItem(attr);
16

MANIPULER LES NUDS

Pour ajouter ou supprimer un nud on utilise:

Mthodes
createElement("TagName") : cre un lment et retourne un objet Element (un type de Node) createTextNode("data") : cre un nud de type #text appendChild(x) : ajoute un lment l'instance, en tant que dernier enfant. Cette mthode sapplique toujours un nud parent. insertBefore(x, y): insre un nud x avant un autre nud y. replaceChild(x,y): remplace un nud y par un autre nud x removeChild(Node): supprime le nud (et ventuellement ses descendants)

17

MANIPULER LES NUDS

Exemple:

function AddNode() { var x = document.createElement("p"); var texte = document.createTextNode("Nouveau Paragraphe"); x.appendChild(texte); var attr = document.createAttribute("title"); attr.value = "Nouveau title du paragraphe"; x.attributes.setNamedItem(attr); document.body.appendChild(x); } function AddNodeBefore() { var y= document.getElementById("H1"); var x = document.createElement("p"); var texte = document.createTextNode("Nouveau Paragraphe"); x.appendChild(texte); var attr = document.createAttribute("title"); attr.value = "Nouveau title du paragraphe"; x.attributes.setNamedItem(attr); document.body.insertBefore(x,y); }

18

MANIPULER LES NUDS

Exemple:

function repChild() { var h1 = document.createElement("H1"); var txt = document.createTextNode("Nouveau Titre1"); h1.appendChild(txt); var y = document.getElementById("H2"); document.body.replaceChild(h1, y); } function remNode() { var y = document.getElementsByTagName("input")[0]; // var y = document.getElementsByTagName("input").item(0); document.body.removeChild(y); //y.parentNode.removeChild(y); }

19

MANIPULER LES NUDS

Crer la page Web suivante et Ajouter les scripts JavaScript pour Ajouter, Supprimer, Insrer avant et Remplacer

<body> <form action=""> <p> <textarea id="zonetexte" rows="3" cols="30"></textarea> </p> <p> <input type="radio" name="bouton" />Ajouter <input type="radio" name="bouton" />Supprimer <input type="radio" name="bouton" />Insrer avant <input type="radio" name="bouton" />Remplacer </p> <p> Quel paragraphe ? : <select id="liste"></select>&nbsp; <input type="submit" value="Tester"/></p> </form> <div id="modifiable"> </div> </body> </html>

20