Comment un document XHTML est représenté en DOM

Parcourir un document

Dans le restant de ce tutorial nous nous focaliserons sur l'utilisation du DOM dans le cadre d'un fichier XHTML (*). Pour illustrer les notions et concepts vus au cours de ce tutorial, nous nous inspirerons du tutorial lui-même... c'est pourquoi je vous livre ci-dessous, si vous n'êtes pas tenter de lire la source, le schéma général en XHTML d'une page du tutorial, toutes les pages sont construites selon ce modèle ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <title>Le modèle objet document (DOM), 1ère partie</title>
    <link rel="stylesheet" media="screen" type="text/css" href="/tutorial/style/screen.css" />
    <script type="text/javascript" src="/tutorial/script/dom.js"></script>
    <script type="text/javascript" src="/tutorial/script/script.js"></script>
  </head>
  <body>
    <div id="page">
      <h1><!-- ici vient le titre explicite de la page --></h1>
      <div id="content">
        <!-- le contenu proprement dit se trouve ici -->
      </div>
      <div id="navigation">
        <!-- la barre de navigation se trouve ici -->
      </div>
      <div id="footer">
        <!-- ici vien mon adresse -->
      </div>
    </div>
  </body>
</html>

Si certaines parties ou l'entiereté de ce document vous paraissent obscures, il est encore temps de faire un tour sur un tutorial sur le XHTML pour comprendre le pourquoi du comment de chaque balise ou instruction utilisée ci-dessus.

Parcourir un document XHTML avec le DOM

Le DOM représente un document XHTML comme un arbre généalogique dont la racine supérieure, qui est également un node se nomme document. De ce fait :

  1. Tous les node du document sont des enfants ou child de document ;
  2. Il n'existe aucun parent (au-dessus ou au même niveau) de document ;

Toutes les balises comprises dans un document XHTML sont considérées comme des node et l'on peut, à partir de chacune d'entre-elles, naviguer dans le document ou rechercher les liens qui unissent un node au restant du document.

Enfin le contenu texte de chaque balise et également considéré comme un noeud de type texte nommé #text Tout comme les balises, on peut à partir de celui-ci naviguer dans le document pour en déterminer les liens de parenté.

Comme vous le constatez, le DOM définit de nombreux node, mais il définit également plusieurs méthodes complémentaires pour permettre de naviguer dans cette représentation du document XHTML. Ces méthodes sont de 2 types :

Trois Deux méthodes de parcours transversale du document qui n'informe en rien quand à la localisation précise d'un node :

Une méthode qui tient compte uniquement de la relation père-enfants des node

Enfin, différentes propriétés associées à un node pour faciliter sa localisation dans le document et connaître sa relation avec les node qui l'entourent.

Notes de bas de page

le XHTML :
Un fichier XHTML est un type de fichier XML qui, reformule les règles éditées en HTML et les rend cohérentes et plus strictes. Pour plus d'infos sur le XHTML, veuillez vous rapporter à un tutorial sur ce type de fichier.
Catérogies : Tutoriels