JavaScript – Principes du DOM et sa modification via JavaScript

LEÇON

 

Qu'est-ce que le DOM ?

Imaginons une page web créé avec HTML et JavaScript, où au moins une partie du code en JavaScript est invoqué dès le chargement de la page (attribut onload de la balise body comme on a vu dans la leçon sur les fondamentaux du JavaScript).

Quand un navigateur accède à cette page web, certaines choses se passent :

  • le fichier HTML est chargé par le navigateur
  • le contenu du fichier HTML est analysé structurellement et syntaxiquement par le navigateur
  • c'est pendant cette analyse que le navigateur va "comprendre" le contenu du fichier HTML dans sa totalité
  • pendant cette analyse les erreurs dans le HTML sont éliminées/réparées
  • à la fin de cette analyse le contenu du fichier HTML est transformé en objet structuré (sorte de variable avec une structure complexe) dans la mémoire vive
  • cet objet structuré est le DOM - en anglais Document Object Model
  • le code JavaScript est invoqué et opère sur le DOM
  • le navigateur exploite le DOM pour afficher la page : c'est le DOM (et non pas le HTML) qui est la référence du navigateur pour déterminer ce qu'il faut afficher
  • chaque changement supplémentaire via JavaScript opère sur le DOM
  • chaque fois que le DOM change, le navigateur recalcule l'affichage et applique les changement à l'écran

 

Voir le DOM

Recréer ces fichiers sur votre machine, et ouvrir la page HTML dans Mozilla Firefox :

 

dom.js

function nombre_aleatoire(min, max)
{
  plage = max - min + 1;
  return Math.floor(Math.random() * plage) + min;
}

function initialiser()
{
  for (var i = 0; i < 5; i++)
  {
    var table = document.getElementById('loto-' + (i+1));
    for (var j = 0; j < 3; j++)
    {
      var ligne = table.insertRow(-1);
      for (var k = 0; k < 10; k++)
      {
        var cellule = ligne.insertCell(-1);
        cellule.appendChild(document.createTextNode(nombre_aleatoire(1,99)));
      }
    }
  }
}

 

dom.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript DOM</title>
        <script type="text/javascript" language="JavaScript" src="dom.js"></script>
        <style>
          body { background-color:#c0c0c0; width:960px; margin:0 auto; font-family:monospace; font-size:16px;}
          table, tr, td { border:1px solid gray;}
          table { border-collapse:collapse; margin:0 auto;}
          td { padding:10px; }
          .wrapper { background-color:white; padding:20px 0px 50px 0px; text-align:center;}
        </style>
    </head>
    <body onload="initialiser()">
      <div class="wrapper">
        <p>Loto</p>
        <table id="loto-1"></table><br/>
        <table id="loto-2"></table><br/>
        <table id="loto-3"></table><br/>
        <table id="loto-4"></table><br/>
        <table id="loto-5"></table>
      </div>
    </body>
</html>

 

Ensuite, pour voir le DOM :

  • dans le menu principal choisir Outils / Développeur Web / Examiner
  • faire en sorte que le "panneau de balisage" est activé (bouton tout en bas à gauche, avec trois traits horizontales un peu décalé - ce bouton doit être actif)
  • le panneau en bas à gauche est le panneau de balisage qui montre le DOM
  • dans ce panneau on peut "surfer" le DOM en cliquant les éléments y présents, pour les ouvrir/fermer et voir leur contenu

 

Code Source de la Page ≠ le DOM

La fonctionnalité pour afficher le "code source de la page", disponible dans le plupart des navigateurs, ne montre pas le contenu du DOM. Ce qui est affiché est toujours le contenu du fichier HTML du départ, avec ses éventuelles erreurs de syntaxe ou structure, et sans les ajouts/modifications par l'exécution du code en JavaScript.

Ouvrir le code source de la page de l'exemple ci-dessus et remarquer que le contenu est quasi-vide. Comparer ce contenu au contenu du DOM via le "panneau de balisage".

 

Nous avons déjà manipulé le DOM

Dans les exemples de la leçon sur les fondamentaux de JavaScript :

  • var obj = document.getElementById(identifiant);
  • obj.innerHTML = "<p>Lorem ipsum dolor</p>";
  • document.cookie.indexOf("cookiename");
  • element.style.backgroundColor = "#a7dd89";

 

Mais dans l'exemple ci-dessus on va un peu plus loin. Car avant, on ne faisait que manipuler les éléments déjà présents dans le DOM. Dans l'exemple ci-dessus on ajoute des éléments au DOM :

  • var ligne = table.insertRow(-1);
  • var cellule = ligne.insertCell(-1);
  • cellule.appendChild(document.createTextNode("Lorem ipsum dolor"));

 

Un autre exemple

Une page type "Bonjour, le monde !" construit avec JavaScript via manipulation du DOM.

 

dom.js

function initialiser()
{
   titre = document.createElement("h1");
   titre_contenu = document.createTextNode("Hello, world!");
   titre.appendChild(titre_contenu);
   document.body.appendChild(titre);
}

 

dom.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript DOM</title>
        <script type="text/javascript" language="JavaScript" src="dom.js"></script>
        <script>
          window.onload = function() { initialiser(); }
        </script>
    </head>
    <body>
    </body>
</html>

 

 


 

EXERCICES

 

  1. Prendre le premier exemple ci-dessus et l'améliorer pour faire un vrai jeu de loto interactif. Suivre ces étapes :
    • faire en sorte que cliquer un nombre a l'effet de le surligner en rouge
    • faire en sorte que si toutes les cases dans un tableau sont rouges, on ajoute un élément HTML par dessus la table en question (texte ou image superposé(e) avec CSS position:absolute par exemple) - l'élément ajouté devrait annoncer "Gagné !"
    • faire en sorte qu'un nombre aléatoire (de 1 à 99) apparaît quelque part sur la page toutes les 3 secondes. Astuce : pour ceci on peut exploiter les fonctions window.setInterval() et window.clearInterval() - faire des recherches sur internet pour connaître ces fonctions
    • stocker les nombres générés dans un tableau et faire en sorte que ces nombres ne sont plus générés (par exemple, si le nombre 14 est déjà sorti, il ne devrait pas être affiché une 2ème fois - sauf, bien sûr, si on rafraîchit la page)
    • faire en sorte que si l'internaute essai de cliquer un nombre qui n'est pas encore sorti, il n'est pas surligné