Javascript
Document object model
1
Document Object Model
DOM est un standard permettant de manipuler et consulter
un fichier XML.
Accessible de JavaScript.
Possible de modifier l’arbre « à tout moment »
2
Ce que permet de DOM
Naviguer dans le document
Aller directement sur un nœud
balise, texte…
Changer la valeur d’un nœud
balise, attribut, texte…
Créer ou retirer un nœud
balise, attribut…
Modifier le CSS
style d’un élément,
entête CSS,
CSS actif…
3
Arbre avec ses noeuds
Soit le code suivant:
<p class=‘maClasse’>
Exemple de code <b>ayant <br />plusieurs</b>enfants
</p>
nœud enfant attribut
‘Exemple de code’ b ‘enfants’ classe = ‘maClasse’
nœud enfant
4 ‘ayant’ br ’plusieurs
Accéder aux éléments de l’arbre
En utilisant les fonctions :
parent, firstChild, lastChild, …
Pour accéder aux balises
x = [Link]
x = [Link][0]
[Link]
[Link](‘id’).firstChild
5
Accès direct au noeud
getElementsByTagName()
Permet d’accéder à un ou des nœuds avec leur nom de balise
ex.: x = [Link](‘p’)
x sera une variable dimensionnée
[Link]
getElementById()
mettre un id="identifiantUnique" à la balise <p>
<p id="unik">
x = [Link]('unik')
6
Modifier le texte d’un noeud
Pour modifier le texte ‘Exemple de code’ par ‘magie!’
x= [Link]('unik');
[Link] = ‘magie!‘;
<p id="unik">
Exemple de code <b>ayant <br/>
plusieurs</b>enfants
</p>
7
Modifier complètement le code HTML
d’un noeud
Pour modifier le HTML du paragraphe par ‘magie!’
x= [Link]('unik');
[Link] = ‘magie!‘;
<p id="unik">
Exemple de code <b>ayant <br/>
plusieurs</b>enfants
</p>
8
Ajouter / modifier un attribut
setAttribute
x = [Link]('img')[0]
[Link](‘alt', ‘J. Rabbit')
Écrase l’ancienne valeur si l’attribut existait
9
Accéder au texte d’un champ de saisie
Soit le code:
<form …>
<input id="unik" type="text" name="nom" value="" />
</form>
Il est possible d’accéder au champ texte par:
var val = document. getElementById('unik').value;
10
Création de nœuds
Ici nous voulons ajouter le nœud <i> avant <b>
Avant:
<p id="un">
Exemple de code
<b> ayant <br /> plusieurs </b>
enfants
</p>
Après:
<p id="un">
Exemple de code
<i>
<b>ayant <br /> plusieurs</b>
</i>
enfants
</p>
11
Création de nœuds – les étapes
Créer un nœud <i>
elementi = [Link]('i')
Repérer le nœud <b>
elementb = [Link]('b')[0]
Cloner le nœud <b> et ses enfants
noeudb = [Link](true)
Ajouter au nœud <i> le nœud <b> et ses enfants
[Link](noeudb)
Remplacer le nœud <b> original par le nœud <i> modifié
document. getElementsByTagName('p')[0]. replaceChild(elementi,elementb)
12
Supression de nœuds
Repérer le nœud a ôter <br>
elementbr = document. getElementsByTagName ('br')[0]
Repérer le nœud parent <b>
elementparent =[Link];
Retirer le nœud <br>
ancienbr = [Link](elementbr)
elementbr est le nœud enfant à retirer du DOM.
elementparentt est le nœud parent de enfant.
ancienbr conserve une référence au nœud enfant retiré.
Le nœud retiré existe toujours en mémoire, mais ne fait plus partie du
DOM. Il peut être réutilisé plus tard dans votre code, via la référence à
l'objet ancienbr.
13
Modification d’un style
[Link] = ‘style’
ex.:
x = [Link];
[Link] = 'blue';
La majeur partie des styles sont en mode
lecture/écriture
Si le nom d’un style est séparer par un « - », ôter le « - »
et mettre la première lettre du deuxième mot en
majuscule
Ex.: background-color
[Link] = ‘red’
14