Manipulation du dom avec JavaScript
But du jeu
On souhaite pouvoir développer une application riche du point de vue de l'interaction avec
l’utilisateur. On veut faire de la programmation événementielle, écouter les actions de l'utilisateur et
modifier la page en conséquence. Pour l'instant, cette programmation intervient sur le client, en
utilisant le moteur javascript du navigateur. Nul ne sera question ici de php.
Qu'est ce que le DOM
Un document XML ou HTML forme naturellement une arborescence :
<html>
<head>
<title>
Vous Etes Perdu ?
</title>
</head>
<body>
<h1>Perdu sur
l'Internet ?</h1>
<h2>Pas de panique, on va
vous aider</h2>
<strong>
<pre> * <----- vous
êtes ici</pre>
</strong>
</body>
</html> Cette arborescence est stockée dans la mémoire
du navigateur. C'est la structure de donnée qui
contient la page, son « Modèle » au sens du navigateur.
L'arborescence stockée dans la mémoire du navigateur s'appelle le DOM. DOM est l'abréviation de
Document Object Model.
Par le biais de l'api DOM fournie par le navigateur, on peut lire en javascript et également
modifier comme on le souhaite cette structure.
Les évènements
Notre but est de modifier la page en fonction des actions de l'utilisateur. Comme dans les autres
langages de programmation, on à accès à une multitude d'évènements en javascript, pour la plupart
des nœuds de l'arborescence.
On trouve notament :
• onclick L'utilisateur a cliqué sur un élément
• onmouseover L'utilisateur passe au dessus d'un élément
• onmouseout La souris sort d'un élément
• onkeydown L'utilisateur appuie sur une touche
• onload Le navigateur a terminé de charger la page
Il en existe une multitude d'autres. Cf w3schools
Pour inscrire du code à des évènements, il suffit de positionner un attribut ayant pour nom
l'évènement sur la balise concernée et de mettre en valeur de cet attribut du code javascript à
executer.
Généralement, on appellera une fonction, dans la quelle on fera tout ce qu'il faut.
Considérons la ligne suivante :
<button onclick='alert("hello world!");'> GO! </button>
Cette ligne de html crée un bouton. Lorsqu'on clique dessus, le code javascript associé à
l'évènnement onclick est executé.
Étapes de la programmation évènementielle en JS
1. Dans le fichier html, j'associe un appel de fonction à l’événement qui m'intéresse sur
l'élément concerné
2. Je code la fonction associée :
1. Je récupère à l'aide de l'api dom les éléments de la page que je veux modifier
2. Je les modifie.
Ou coder mes fonctions Javascript ?
Dans le head de ma page html, entre <script> et </script> je peux mettre tout le javascript
que je veux. Si je souhaite plutôt coder mes fonctions javascript dans des fichiers à part, aucun
problème, dans le head de mon html, je mets des lignes comme celle qui suit :
<script src="[Link]"></script>
L'api dom
On a évoqué le dom, voyons comment utiliser cette api pour récuperer des éléments qu'on veut
modifier dans la page, les modifier, les supprimer, ou simplement en créer de nouveaux.
• Toutes les balises correspondent a des éléments dans la terminologie dom
• Les éléments , comme les balises, ont des attributs, et peuvent avoir un contenu
• Les éléments dans l'api dom héritent des nœuds, classe plus générale qui permet aussi de
représenter les parties de la page qui ne peuvent pas elles mêmes avoir de contenu (le texte
simple par exemple)
En lecture
getElementsByXXX
La première chose qu'on souhaite faire c'est récuperer des éléments, selon certains critères.
• La racine de l'arbre DOM est disponible grâce a la variable document. C'est très souvent
cette variable qui servira de point de départ à nos accès au dom.
• Ensuite, toute une panoplie de méthodes nous permettra d’accéder au contenu de la page :
Voici tout d'abord la grande famille des méthodes getElementsByXXXX
getElementsByTagName Renvoie la liste d'éléments descendants qui ont
ce nom de balise
getElementsByClassName Renvoie la liste d'éléments descendants qui ont
cet attribut class
getElementsByName Renvoie la liste d'éléments descendants qui ont
cet attribut name
getElementById Renvoie l'unique élément descendant qui a cet
id
Exemples de code :
//récupère l'elt correspondant à la balise ayant l'id "fact"
var tab = [Link]("fact");
//récupère tous les titres de la page
var titres = [Link]("h1") ;
//récupère le troisième titre
var t3=titres[3];
Il faut bien comprendre que document est un élément comme les autres. Si on veut faire une
recherche dans les descendants d'un autre element, rien ne nous en empêche.
//je récupère le tableau ayant pour id matable
var tab = [Link]("matable");
//je récupère la troisième ligne du tableau
var l3 = [Link]("tr")[3] ;
Il est possible, une fois qu'on a un élément, de manipuler ses attributs :
On peut appeler sur les éléments la méthode getAttribute(nom_attribut) qui nous donne le
contenu de l'attribut passé en paramètre.
//je veux la classe de la troisième ligne du tableau
var l3cl=[Link]("class") ;
//je l'affiche dans un alert
alert('ma classe css:'+l3cl) ;
QuerySelectors
Pour aller plus loin, vous pouvez explorer les querySelectors, qui vous permettent d'une manière
extremmement flexiblede récupérer n'importe quoi dans le dom.
En écriture
Pour manipuler le dom, maintenant qu'on sait chercher dedans, il nous faut de quoi modifier son
contenu et sa structure.
[Link]
Un objet de type Element en javascript a un attribut (au sens objet, pas au sens html) innerHTML
Cet attribut nous permet de définir tout le html enfant de l'élément considéré.
Exemple :
//je récupère le tableau ayant pour id matable
var tab = [Link]("matable");
//je récupère la troisième ligne du tableau
var l3 = [Link]("tr")[3] ;
// je change le html de cette ligne
[Link]="<td>Toto</td><td>Bob</td><td>Lisa</td>";
[Link](nom,valeur)
On peut manipuler les attributs des éléments, par exemple, changer une classe css (très pratique)
[Link]("class","ligneverte");
...
[Link]("class","ligneblanche");
[Link]()
Cette méthode enlève l'élément du dom
[Link](nom)
Cette méthode enlève l'attribut en question de la balise.
[Link](position, contenu)
Cette méthode est très pratique et permet d’inserer du code dans une page html d’une manière très
flexible. Voyons un exemple :
clic clic
Cette méthode est très simple a utiliser. Pour
bien comprendre son fonctionnement il faut
maîtriser l’utilisation du champ position.
Voici une illustration qui le montre, si on
appelle insertAdjacentHTML sur la
balise <p> verte
[Link], élé[Link](enfant)
On peut bien entendu créer des éléments avec l'api dom, et les ajouter a un élément parent :
var btn = [Link]("button"); // Cree un <button>
var t = [Link]("Clique moi");// Cree du texte
[Link](t);// Ajoute le texte au <button>
[Link](btn);// Ajoute le <button> au <body>
Manipulation directe du style
On peut changer directement la valeur du style d'un élément
var p = [Link]("zonecommentaire");
[Link] = "blue"
[Link] = "18pt"
Ressources vitales
• W3schools : la référence exhaustive pour avoir le nom des évènements, des renseignements
sur des balises, l'api dom...
[Link]
• Fiches javascript sdz : Pour savoir manipuler les concepts de base de la programmation en
JS : if, for, while, function, variables, tableaux …
[Link]