Séance 2 : DOM et ECMAScript, Ajax

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

Exercice n°4 : Parsing DOM

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

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 
);

Exercice n°7 : Utilisation des évènements natifs

A partir du code de l'exercice n°2, ajoutez des listeners sur les <li> de la liste "myList" pour les évènements "click" et "dblclick".
Créez ensuite un script qui :

• lors d'un double click : affiche une popup contenant le label de l'élément cliqué.
• lors d'un ctrl+click : supprime l'item cliqué.

Exemple de requête synchrone

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
alert(req.responseText);

Exemple de requête asynchrone

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      alert(req.responseText);
     else
      alert("Erreur pendant le chargement de la page.\n");
  }
};
req.send(null);

Pour s'exécuter correctement, la requête AJAX doit être effectuée à partir d'un fichier chargé en http://.
Les scripts précédents ne fonctionneront pas si vous les ouvrez dans le navigateur avec le protocole file://