Scribd Logo
Importer

Bienvenue sur Scribd !

  • Document Object Model (DOM)

    Transféré par

    Abdelouahed Sabri
    35 vues19 pages
    Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.

    Titre original

    Document Object Model ( DOM)

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    35 vues19 pages

    Document Object Model (DOM)

    Transféré par

    Abdelouahed Sabri
    Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 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

    Vous aimerez peut-être aussi