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 :

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 :

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

DOM Traversal

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"