Traitement du code source

Le HTML que nous écrivons n’est pas utilisé tel quel par le navigateur. Avant d’être utilisé, ce dernier est traité, et enrichi, par le moteur de rendu du navigateur.

Le moteur de rendu d’un navigateur peut changer d’un navigateur à l’autre, et il peut arriver que le rendu ne soit pas identique de l’un à l’autre.

Le HTML lu par le navigateur est donc transformée en une arborescence appelé le DOM, pour Document Object Model ou Modèle d’Objet Document.

Exemple de représentation en arborescence

Le schéma suivant représente notre carte postale sous forme d’arborescence

Pour rappel le document balisé était le suivant :

<document>

  <!-- On peut avoir des métadonnées -->
  <metadonnees>
    <auteur>Albert</auteur>
    <type>carte postale</type>
  </metadonnes>

  <!-- Le contenu de la missive -->
  <contenu>

    <principal>
      <titre>Mes supers vacances</titre>
      <paragraphe>chère mamie, je suis en vacances à la mer, il y a des vagues.</paragraphe>
      <paragraphe>Je te fais des gros bisous, Albert</paragraphe>
      <image alt="Dessin représentant Albert à la plage. Il y a des vagues et un bateau." src="../images/dessin-d-albert.png">
    <principal>

    <!-- Affranchissement -->
    <affranchissement>
      <timbre valeur="100" devise="francs">
      <timbre valeur="1000" devise="francs">
    </affranchissement>

    <!-- La destination -->
    <destinataire>
      <nom>Mamie</nom>
      <adresse>
        <numero>10</numero>
        <rue>rue des arbres</rue>
        <cp>10000</cp>
        <localite>trifouilly-les-oies</localite>
      </adresse>
    </destinataire>

  </contenu>

</document>