Pendant la première heure de ce TP vous allez vous familiariser avec les différentes méthodes du DOM. Toute cette partie se fera en Javascript/HTML et dans Firefox 3.5 minimum.

Pour vous simplifier la tâche, vous pouvez installer les addons suivants :

Liens utiles :

Base de travail

Vous trouverez ci-dessous une base HTML pour les exercices du TP.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Manipulation DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function addListItem(){}
</head>
<body>
<h1>Manipulation du DOM</h1>
<h2>Insertion d'éléments</h2>
Ajouter des éléments dans une liste HTML
<ul id="myList">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>
<a href="javascript:addListItem()">Ajouter un élément à la liste</a>

<h2>Parcours d'éléments</h2>
<p>Le DOM est un modèle objet.</p>
<p>Il permet d'interagir avec n'importe quelle partie du document.</p>
<p>Il existe de nombreux moyens de parcourir le document. Avec les noms de balises, avec les attributs, les ID.</p>
<p>Néanmoins, attention, le DOM n'est pas implémenté de la même manière dans tous les navigateurs. Certains navigateurs comme IE6 et IE7 ne respectent pas la norme.</p>
</body>
</html>

Exercice n°1 : Parcourir le DOM

A partir du code précédent, créez un script qui liste et affiche le contenu de toutes les balises <p> comprises dans la page.

Vous pourrez vous aider des fonctions :

document.getElementsByTagName
element.firstChild
element.nodeValue

Exercice n°2 : Modifier le DOM

A partir de la même page HTML, créez un script qui insère dynamiquement un élement <li> dans la liste "myList" et qui créé le label en fonction du nombre de <li> existants dans la page.

Vous pourrez vous aider des fonctions :

document.getElementById
document.createElement
document.createTextNode
document.getElementsByTagName
element.appendChild

Exercice n°3 : Sérialisation XML

Créez un script qui sérialise l'objet document.body de la page HTML précédente.

Vous pourrez vous aider de :

L'objetXMLSerializer et de sa méthodeserializeToString

Parsing DOM

Exercice n°4 :

Créez un script qui parse la chaîne suivante et qui génère une liste <ul> avec les noms contenus dans l'attribut "name".

<people>
  <person name="Napoleon Bonaparte" gender="male"/>
  <person name="Cleopatra" gender="female"/>
  <person name="Julius Caesar" gender="male"/>
  <person name="Ferdinand Magellan" gender="male"/>
  <person name="Laura Secord" gender="female"/>
</people>

Vous pourrez vous aider de :

L'objet DOMParser et de sa méthode parseFromString
De la méthode element.innerHTML

DOM Traversal

Exercice n°5 : NodeIterator

Créez un script qui utilise un NoteIterator qui sélectionne tous les noeuds text dans le document.body et qui les affiche à l'écran.

Un nodeIterator se créé de la manière suivante :

var nodeIterator = document.createNodeIterator(
    document.body, 
    NodeFilter.SHOW_ALL, 
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false 
);

Vous pourrez utiliser :

element.nodeType pour déterminer le type de noeud
nodeIterator.nextNode()

Exercice n°6 : TreeWalker

Même exercice mais avec un TreeWalker qui sélectionne tous les noeuds element dans le document.body et qui les affiche à l'écran.

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_ALL, 
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, 
    false 
);

Création d'un client Ajax

Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=Intranet_de_Michel_Buffa/Web_2.0_2010/TP2_:_DOM_et_ECMAScript%2C_JSON%2C_Ajax"