Développement Web - Manipulation de l'arbre DOMsoulier/data/TechnoWeb/cours8.pdf · ... couleur d’arrière plan charset : jeu de caractères utilisés cookie : chaîne de caractères

Développement WebManipulation de l’arbre DOM

LI328Laure Soulier

slides de Sylvain Lamprier

UPMC

1 / 41

Arborescences Web

Arbre DOM (Document Object Model)Standard du W3CDécrit une interface indépendante de tout langage deprogrammation

) Accéder ou de mettre à jour le contenu, la structure ou lestyle de documents XML et HTML

Arbre BOM (Browser Object Model)Pas de standard sur la manière de gérer les éléments dunavigateurNécessité de produire du code javascript adapté à toutnavigateur / système d’exploitation

) BOM sert d’interface standard entre le navigateur etjavascript

2 / 41

Document Object Model (DOM)

3 / 41

Browser Object Model (BOM)

4 / 41

Javascript : Objets du Navigateur

Lors de l’ouverture d’une page Web, le navigateur créedifférents objets. Les principaux sont :

window : fenêtre d’affichage de la page (contient despropriétés sur la fenêtre mais aussi les objets de la pagechargée)

navigator : qui contient des informations sur le navigateur

location : contient des informations relatives à l’adresse dela page à l’écran

history: historique de navigation (liste de liens visitésprécédemment)

document : contient les propriétés sur le contenu de lapage Web chargée

5 / 41

Javascript : Objet Window

Objet Window : Fenêtre active du navigateurParent de tous les autres objets

window.navigatorwindow.locationwindow.documentwindow.historywindow.frames...

Méthodes relatives à windowméthodes pour l’ouverture de boîtes de dialogue alert(),confirm() et prompt()méthodes pour l’ouverture ou la fermeture de fenêtresopen() et close()) open(x,[y]) permet de charger dans une fenêtre une page d’url x.Si y absent, on charge dans une nouvelle fenêtre, sinon on charge dans lafenêtre / onglet y (une nouvelle si pas encore de fenêtre nommée y)

6 / 41

Javascript : Objet Navigator

Objet Navigator : Permet d’avoir des informations sur lenavigateur utilisé

Infos générales sur le navigateur : navigator.userAgent;Nom du navigateur : navigator.appName;Version du navigateur : navigator.appVersion;Méthodes de test sur le nom du navigateur : isIE(),isFirefox, isSafari(), ...Système d’exploitation du poste client : navigator.platform;Langue utilisée par le navigateur : naviigator.language;Types de données supportées par le navigateur :navigator.mimeTypes;Liste de plugins installés : navigator.plugins;Méthode pour savoir si le Java est autorisé :navigator.javaEnabled();Pour savoir si les cookies sont autorisés :navigator.cookiesEnabled;

7 / 41

Javascript : Objet History

Objet History : Contient des infos sur l’historiqueLa propriété history.length permet de connaître le nombred’objets dans l’historiqueLa méthode history.back() permet d’aller à l’URL précédentdans l’historiqueLa méthode history.forward() permet d’aller à l’URL suivantdans l’historiqueLa méthode history.go(variable) permet d’aller à un desURL de l’historique (variable peut être un index de page ouune chaîne proche de la page désirée).

8 / 41

Javascript : Objet Location

Objet Location : Contient les éléments de l’URL dudocument

location.protocol : contient la partie protocole de l’url (leplus souvent "http:")location.port : Numéro du port utilisé (serveur web : port80)location.hostname : Domaine de la pagelocation.host : "domaine:port"location.pathname : Répertoire et nom de fichier de la pagelocation.hash : Ancre de l’url ("presentation" dans"www.lip6.fr#presentation")location.search : Liste des variables et leurs valeurs (parexemple "?nom=valeur&nom2=valeur2")location.href : url complète (on peut changer cette propriétépour changer de page)location.reload() : pour recharger la page courante

9 / 41

Javascript : Objet Document

Objet Document : Contenu de la pagePropriétés

alinkColor : couleur des liens lorsqu’ils sont cliquésbgColor : couleur d’arrière plancharset : jeu de caractères utiliséscookie : chaîne de caractères pouvant être sauvegardéechez l’utilisateurfgColor : couleur du textelastModified : date de dernière modificationlinkColor : couleur des liensreferrer : pages déjà visitéestitle : titre de la page

10 / 41

Javascript: Cookies

Un cookie est une paire attribut/valeurStocké dans le navigateur du clientPossède éventuellement une date péremptionContient des informations envoyées par un serveur à unclient HTTP

! Envoyé par le client en entête de chaque communicationHTTP avec le serveur qui l’a créé

Sert à enregistrer chez le clientDes données d’authentificationL’identifiant de la session en cours sur le serveurDes préférences de l’utilisateurLe contenu d’un panier d’achat électronique. . .

11 / 41

Javascript: Objet Document

Gestion de cookies

f u n c t i o n createCookie (name, value , days ) {i f ( days ) {

var date = new Date ( ) ;date . setTime ( date . getTime ( ) + ( days *24*60*60*1000) ) ;var exp i res = " ; exp i res ="+ date . toGMTString ( ) ;

}e lse var exp i res = " " ;document . cookie = name+"="+ value+exp i res + " ; path = / " ;

}

f u n c t i o n readCookie (name) {var nameEQ = name + " = " ;var ca = document . cookie . s p l i t ( ’ ; ’ ) ;f o r ( var i =0; i < ca . leng th ; i ++) {

var c = ca [ i ] ;wh i le ( c . charAt (0 )== ’ ’ ) c = c . subs t r i ng (1 , c . leng th ) ;i f ( c . indexOf (nameEQ) == 0) r e t u r n c . subs t r i ng (nameEQ. length , c . leng th ) ;

}r e t u r n n u l l ;

}

f u n c t i o n eraseCookie (name) {createCookie (name, " " , °1 ) ;

}

createCookie ( " a " , 1 , 1 0 ) ; / / crée un cookie a=1 exp i r an t dans 10 jou r svar va l=readCookie ( " a " ) ; / / l i t un cookie nommé a

12 / 41


MéthodescreateAttribute(nom_attribut) : Crée un noeud attributcreateElement(nom_balise) : Crée un noeud élémentcreateTextNode(texte) : Crée un noeud de textegetElementById(id) : Retourne le noeud correspondant àl’identifiant passé en paramètregetElementsByName(nom) : Retourne un tableaucontenant les éléments possédant le nom passé enparamètregetElementsByTagName(nom_balise) : Retourne untableau contenant les éléments du type passé enparamètre

) Attention : manipuler arbre DOM suppose d’attendre la findu chargement de la page. Les traitements devant êtrefaits lors de de l’affichage doivent être appelés par legestionnaire d’évènement document.onload.

13 / 41

Javascript : Node

Node = Noeud de l’arbre DOMDifférents types de noeud

14 / 41

Javascript : Node

Node = Noeud de l’arbre DOMPropriétés

nodeType : numéro du type du noeudnodeValue : contenu du noeudnodeName : nom du noeudattributes : tableau de noeuds attribut associéfirstChild : premier noeud enfantlastChild : dernier noeud enfantnextSibling : noeud suivant dans l’arborescenceparentNode : noeud parentpreviousSibling : noeud précédent dans l’arborescence

15 / 41

Javascript : Node

MéthodesappendData(texte) : concatène du texte en fin de la valeurd’un noeud texte ou attribut

insertData(pos,texte) : insère du texte à la position posdans la valeur d’un noeud texte ou attribut

replaceData(pos,nb,texte) : remplace du texte d’un noeudtexte ou d’un noeud attribut (pos correspond à la positiondans la chaîne et nb le nombre de caractères à supprimer)

deleteData(pos,nb) : efface du texte d’un noeud texte oud’un noeud attribut

16 / 41

Javascript : Node

MéthodesgetAttribute(nom) : retourne la valeur d’un noeud attributgetAttributeNode(nom) : retourne un noeud attributsetAttribute(nom,valeur) : fixe la valeur d’un noeud attributsetAttributeNode(node) : ajoute un noeud attributremoveAttribute(nom) : efface la valeur d’un noeud attributremoveAttributeNode(node) : supprime un noeud attribut

17 / 41

Javascript : Node

MéthodesappendChild(node) : ajoute un noeud enfant (en tant quedernier enfant)removeChild(node) : retire un noeud passé en paramètrede la liste des fils du noeudreplaceChild(new,old) : remplace un noeud enfant old parun noeud new dans la liste des fils du noeudhasChildNodes() : vérifie l’existence de noeuds enfantsinsertBefore(new,avant) : insère un noeud enfant avant unautre noeud enfant dans la liste de fils du noeud (new =nouveau noeud, avant = noeud enfant avant lequel insérer)cloneNode(booleen) : copie un noeud (si le booléen passéen paramètre est true, alors on copie aussi les fils dunoeud)

18 / 41


Manipulation arbre DOM

/ / Crée un noeud t i t r e e t i n s e r t i o n sur l a pagevar t i t r e =document . createElement ( " h1 " ) ;document . body . appendChild ( t i t r e ) ;t i t r e . appendChild ( document . createTextNode ( " T i t r e " ) ) ;t i t r e . s e t A t t r i b u t e ( " s t y l e " , " t ex t °a l i g n : center ; co l o r : b lue " ) ;

/ / Deplacement du t i t r e en haut de l a pagedocument . body . i nse r tBe fo r e ( t i t r e , document . body . f i r s t C h i l d ) ;

/ / Crée des noeuds de tex tevar horodateur = document . createTextNode ( document . l a s t M o d i f i e d ) ;

var tex teprecedent = document . createTextNode ( " Date de l a dern iè re mise à j o u r : " ) ;

/ / A joute les nouveaux noeuds en f i n du paragraphe d ’ i d e n t i f i a n t " paragraphe "document . getElementsByTagName ( " p " ) [ 0 ] . rep laceCh i ld (

texteprecedent , document . getElementsByTagName ( " p " ) [ 0 ] . f i r s t C h i l d ) ;document . getElementById ( " horo " ) . rep laceCh i ld (

horodateur , documentgetElementById ( " horo " ) . f i r s t C h i l d ) ;

19 / 41

Javascript

La librairie JQuery

20 / 41

Javascript : JQuery

jQueryBibliothèque JavaScript libre qui porte sur l’interaction entreJavaScript et HTML

) Simplifier les commandes communes de JavaScript.

La librairie JQuery inclusParcours et modification du DOMGestion d’évènementsEffets et animationsManipulations des feuilles de style...

21 / 41

Javascript : JQuery

Chargement librairie JQuery

<html ><head>< s c r i p t s rc =" h t t p : / / code . jquery . com/ jquery ° l a t e s t . j s " > </ s c r i p t ></head></ html >

22 / 41

Javascript : JQuery

La bibliothèque jQuery peut être appelée de trois manièresdifférentes :

Via la fonction $(expression)

$ ( " d i v . t e s t " ) . add ( " p . quote " ) . addClass ( " blue " ) . slideDown ( " slow " ) ;

Via le préfixe jQuery(expression)

jQuery ( "# d iv_a_e f face r " ) . s l ideUp ( " f a s t " ) ;

Via le préfixe de fonction $.

$ . each ( [ 1 , 2 , 3 ] , f u n c t i o n ( ) {document . w r i t e ( t h i s + 1 ) ;

} ) ;

23 / 41

Javascript : JQuery

Fonction $() permet différentes choses selon lesparamètres

Une fonction) Lancer cette fonction lorsque la page est chargée par le

navigateur (comme window.onload mais n’attend pas quetout soit complètement téléchargé)

Processus de chargement

1. Le f i c h i e r html es t té léchargé .

2 . I l es t l u par l e nav iga teur .

3 . Le nav iga teur commence à té lécha rge r les éléments auxquels l e f i c h i e r htmlf a i t ré férence ( images , css . . . ) .

4 . Le code s i t u é dans $ ( f u n c t i o n ( ) { } ) es t exécuté dès que poss ib le .

5 . Lorsque t o u t es t té léchargé , l e code s i t u é dans window . onload = f u n c t i o n ( ) { }es t exécuté .

24 / 41

Javascript : JQuery


Un élément, ou un tableau d’éléments DOM) Pour créer un objet JQuery auquel on peut appliquer

diverses fonctions

Création d’objet JQuery

var mon_element = document . getElementById ( " id_de_mon_element_html " ) ;var mon_objet_jquery = $ ( mon_element ) ;

25 / 41

Javascript : JQuery


Le mot-clé this) Pour créer un objet JQuery contenant l’objet sur lequel la

fonction dans laquelle on se trouve a été appelée

Création d’objet JQuery

var mon_element = document . getElementById ( " main " ) ;var jquery1=$ ( mon_element ) ;

mon_element . getJQuery= f u n c t i o n ( ) { r e t u r n ( $ ( t h i s ) ) ; }var jquery2 = mon_element . getJQuery ( ) ;

/ / => jquery1 e t jquery2 équ iva len ts

26 / 41

Javascript : JQuery


Une expression en CSS) Permet de sélectionner facilement des éléments) Forme un objet JQuery regroupant les noeuds

correspondant à l’expressions CSS

Sélection d’objets avec sélecteurs CSS

/ / Sé lec t i on des éléments ayant pour c lasse " ique " ,/ / dans l ’ élément ayant pour i d " f i x e "var mon_objet_jquery = $ ( "# f i x e . ique " ) ;

/ / Sé lec t i on du premier élément <p> de l ’ élément <div >.var mon_objet_jquery = $ ( " d i v p : f i r s t °c h i l d " ) ;

/ / Sé lec t i on des éléments <p> , enfants d i r e c t s d ’ un élement <div >/ / e t ayant pour c lasse " ique " .var mon_objet_jquery = $ ( " d i v > p . ique " ) ;

27 / 41

Javascript : JQuery


Un chemin XPath) Permet de sélectionner facilement des éléments) Forme un objet JQuery regroupant les noeuds

correspondant aux chemins XPath

Sélection d’objets avec chemin XPath

/ / Sé lec t i on des éléments p enfants de body , l u i °même enfant de html$ ( " / html / body / / p " ) ;

Documentation XPath en JQuery :http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors

28 / 41

Javascript : JQuery


Une expression avec sélecteurs spécifiques à JQuery) Permet de sélectionner facilement des éléments) Forme un objet JQuery regroupant les noeuds

correspondant à l’expression JQuery

Sélection d’objets avec sélecteurs JQuery

/ / Sé lec t i on du deuxième élément p de l a page$ ( " p : nth ( 1 ) " ) ;

/ / Sé lec t i on des d iv cachés$ ( " d i v : hidden " ) ;

/ / Sé lec t i on des d iv contenant l a chaine de carac tè res " t e s t "$ ( " d i v : conta ins ( ’ t es t ’ ) " ) ;

Documentation sélecteurs JQuery :http://docs.jquery.com/DOM/Traversing/Selectors#Custom_Selectors

29 / 41

Javascript : JQuery

Fonction $() permet de regrouper des noeudscorrespondant à un sélecteur passé en paramètre) Objet JQuery contenant des noeuds DOM) Possibilités d’y appliquer des méthodes JQuery

Attention :Fonctions Node pas applicables directement

) Accès aux éléments de l’objet par la méthode JQuery getget() retourne un tableau contenant les noeuds sélectionnésget(index) retourne le noeud à l’index index

Exemple utilisation JQuery

/ / Mauvaise u t i l i s a t i o n JQuery ( génère une e r reu r )$ ( "# comment > p " ) . f i r s t C h i l d . appendData ( " Posté par Joe l e 14 /02 /2012" ) ;

/ / Accès au premier élément de l ’ ob j e t e t a p p l i c a t i o n méthode au noeud$ ( "# comment > p " ) . get ( 0 ) . f i r s t C h i l d . appendData ( " Posté par Joe l e 14 /02 /2012" ) ;

/ / Équ iva len t à :$ ( "# comment > p " ) . get ( ) [ 0 ] . f i r s t C h i l d . appendData ( " Posté par Joe l e 14 /02 /2012" ) ;

30 / 41

Javascript : JQuery

Objet JQuery) Propriété length : nombre d’éléments contenus) Éléments rangés entre index 0 et length-1) Méthode slice(debut,fin) : retourne l’objet jquery contenant

uniquement les objets d’un jquery initial situés entre l’indexdebut et fin-1


/ / A p p l i c a t i o n méthode à tous les éléments sé lec t ionnésvar jquery=$ ( " p " ) ;f o r ( i =0; i = jquery . leng th ; i ++){

jquery . get ( i ) . f i r s t C h i l d . appendData ( " Posté par Joe l e 14 /02 /2012" ) ;}

31 / 41

Javascript : JQuery

Objet JQuery) Méthode each(func) : applique la function func à tous les

éléments de l’objet


<span> Premier paragraphe </span><span> Deuxième paragraphe </span><span> Trois ième paragraphe </span>

/ / Remplacement du tex te des span par " Paragraphe 1" , " Paragraphe 2" , . . .$ ( " span " ) . each ( f u n c t i o n ( index ) {

i f ( t h i s . f i r s t C h i l d != undef ined ) { t h i s . f i r s t C h i l d . nodeValue =" Paragraphe "+ index ; }} ) . get ( ) . j o i n ( ’ , ’ ) ;

/ / M o d i f i c a t i o n de l a cou leur des éléments " d i v "$ ( " d i v " ) . each ( f u n c t i o n ( i ) {

i f ( t h i s . s t y l e . co l o r !== " blue " ) {t h i s . s t y l e . co l o r = " blue " ;

} e lse {t h i s . s t y l e . co l o r = " " ;

}} ) ;

32 / 41

Javascript : JQuery

Méthodes d’accès / modification de contenuhtml() : retourne le code html du le premier élément del’objet JQueryhtml(code) : donne un code html à tous les éléments del’objettext() : retourne le texte contenu par le premier élément del’objet (et ses descendants)text(texte) : donne un texte à tous les éléments de l’objetval() : retourne la valeur contenue par le premier élémentde l’objet (et ses descendants)val(valeur) : donne une valeur à tous les éléments de l’objet

33 / 41

Javascript : JQuery

Méthodes de manipulation de l’arbrebefore(x), after(x) : insère x avant ou après tous leséléments de l’objet (x peut être du code html, un élémentDOM ou un objet JQuery)insertBefore(x), insertAfter(x) : insère tous les éléments del’objet JQuery avant ou après l’objet x (x peut être un objetDOM ou une expression JQuery permettant de sélectionnerdes objets)append(x), prepend(x) : insère x à la fin ou au début detous les éléments de l’objetappendTo(x), prependTo(x) : insère tous les éléments del’objet JQuery à la fin ou au début de l’objet xreplaceWith(x) : remplace tous les éléments de l’objetJQuery par xreplaceAll(x) : remplace x par les éléments de l’objet

34 / 41

Javascript : JQuery


<d iv c lass = ’a ’ ><d iv c lass = ’b ’ >b </ div >

</ div >

$ ( ’ . a ’ ) . a f t e r ( $ ( ’ . c ’ ) ) ;<d i v c lass = ’a ’ >

<d iv c lass = ’b ’ >b </ div ></ div ><d iv c lass = ’ c ’ >c </ div >

$ ( ’ . a ’ ) . before ( $ ( ’ . c ’ ) ) ;<d i v c lass = ’ c ’ >c </ div ><d iv c lass = ’a ’ >

<d iv c lass = ’b ’ >b </ div ></ div >

$ ( ’ . a ’ ) . append ( $ ( ’ . c ’ ) ) ;<d i v c lass = ’a ’ >

<d iv c lass = ’b ’ >b </ div ><d iv c lass = ’ c ’ >c </ div >

</ div >

35 / 41

Javascript : JQuery

Méthodes pour le CSScss(nom) : retourne la valeur de la propriété css nom pourle premier élément de l’objet JQuerycss(nom,valeur) : donne une valeur à une propriété csspour tous les éléments de l’objetheight(), width() : retourne la hauteur et largeur calculéespour le premier élément de l’objetheight(hauteur), width(largeur) : donnent une hauteur etune largeur à tous les éléments de l’objetoffset() : retourne un objet contenant les coordonnéesabsolues du premier élément de l’objetoffset(coordinates) : donne les coordonnées de l’objetcoordinates à tous les éléments de l’objet

36 / 41

Javascript : JQuery

Eventsclick(fonc) : spécifie fonc comme fonction à lancer lors duclic d’un des éléments de l’objet JQuerykeypress(fonc) : spécifie fonc comme fonction à lancer lorsde la pression d’une touche (avec le focus sur un deséléments de l’objet)hover(fonc) : spécifie fonc comme fonction à lancer lors dupassage au dessus d’un des éléments de l’objetfocus(fonc) : spécifie fonc comme fonction à lancer lors del’obtention du focus par un des éléments de l’objetresize(fonc) : spécifie fonc comme fonction à lancer lors duredimensionnement d’un des éléments de l’objet...


$ ( "# t a r g e t " ) . c l i c k ( f u n c t i o n ( ) {a l e r t ( " Handler f o r . c l i c k ( ) c a l l e d . " ) ;} ) ;

37 / 41

Javascript : JQuery

Effetsshow(duree,[fonc]), hide(duree,[fonc]) : affiche / cache petità petit un élément en jouant sur la propriété display

Le paramètre duree permet de spécifier une vitesse àl’animationLe paramètre fonc correspond à une fonction à appelerlorsque l’action est terminée

fadeIn(duree,[fonc]), fadeOut(duree,[fonc]) : affiche / cachepetit à petit un élément en jouant sur la propriété opacity


slideDown(duree,[fonc]), slideUp(duree,[fonc]) : affiche /cache petit à petit un élément en jouant sur la propriétéheight


38 / 41

Javascript : JQuery

animate(objectif, duree, [fonc]) : Produit une animation detransfert entre l’état courant et un état visé

Le paramètre objectif est un ensemble de {propriété:valeur}) Uniquement sur les propriétés numériques) Replacer tirets par majuscules (exemple margin-left )

marginLeft)Le paramètre duree donne la durée de l’actionLe paramètre fonc est une fonction à lancer une fois l’actionterminée

39 / 41

Javascript : JQuery

Animation JQuery

<!DOCTYPE html ><html ><head>

< s ty l e >d iv { margin :3 px ; width :40 px ; he igh t :40 px ;p o s i t i o n : abso lu te ; l e f t :0 px ; top :60 px ;background : green ; border : s o l i d ; } </ s t y l e >

< s c r i p t s rc =" h t t p : / / code . jquery . com/ jquery ° l a t e s t . j s " > </ s c r i p t ></head><body><d iv id > </ div >< s c r i p t >var d i v = $ ( " d i v " ) ;f u n c t i o n r u n I t ( ) {

d i v . h ide ( " f a s t " ) ; d i v . show ( " slow " ) ;d i v . fadeOut (2000) ; d i v . fadeIn (2000) ;d i v . s l ideUp (1000) ; d i v . slideDown (1000) ;d i v . animate ( { l e f t : ’ +=200 ’ } ,2000) ; d i v . animate ( { marginTop : ’+=200 ’ } ,2000) ;d i v . animate ( { borderLef tWid th : ’+=200 ’ } ,2000) ;d i v . animate ( { he igh t : ’+=200 ’ , width : ’+=200 ’ } ,2000) ;d i v . animate ( { l e f t : ’ °=200 ’ } ,2000) ; d i v . animate ( { marginTop : ’ °=200 ’ } ,2000) ;d i v . animate ( { borderLef tWid th : ’ °=200 ’ } ,2000) ;d i v . animate ( { he igh t : ’ °=200 ’ , width : ’ °=200 ’} ,2000 , r u n I t ) ;

}r u n I t ( ) ;</ s c r i p t ></body></ html >

Animation JQuery 40 / 41

Javascript : JQuery

Documentation Javascript :http://fr.selfhtml.org/javascript/index.htm

Documentation JQuery :http://api.jquery.com/

41 / 41

Documents

Développement Web - Manipulation de l'arbre DOMsoulier/data/TechnoWeb/cours8.pdf · ... couleur d’arrière plan charset : jeu de caractères utilisés cookie : chaîne de caractères