Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:dom

Voir cette page sous forme de diaporama.

DOM : Concepts

Le modèle Objet de Document : DOM

Concepts

Les entrailles du navigateur

Modèle Objet de Document

Document
C’est tout simplement la page WEB vue par l’utilisateur. Ne pas confondre avec le fichier HTML qui a été chargé.
Objet
C’est le concept informatique d’objet. Il est nommé ainsi par analogie avec les objets du monde réel.
Modèle
Représentation reproduisant les caractéristiques et comportements de façon appréhendable par l’ordinateur.


L' api : DOM n'est pas un concept propre à un navigateur, c'est un standard établi pour manipuler des documents XML en mémoire.

L'essor du WEB 2.0 a pour conséquence une évolution des navigateurs. Manipuler le document (affichage) n'est plus suffisant. D'autres api émergent pour compléter les besoins (ex:canevas).

Relation : DOM / JavaScript

  • DOM + JavaScript = DHTML
  • JavaScript :
    • Apporte l'interactivité (événement)
  • Modèle Objet de Document
    • Représente la page
    • Permets de manipuler ce qui est affiché
    • Indispensable au rendu (X)HTML/CSS moderne

L'essor du DOM et de HTML 4.0 vient de la compétition entre Netscape et Microsoft. L'objectif était d'animer les pages pour les rendre plus attractives.

Microsoft à donner l'impulsion initiale de DOM avec IE 4.0, mais aussi limité l'évolution de la toile une fois la victoire sur Netscape acquise.

  • Compatibilité ascendante avec IE 4.0
  • Peu de moyens mis sur le développement des navigateurs
  • Pas de démarche de respect des standards (recommandation du W3C)

Rq : Cela semble changer avec IE 8.0

Il est important de comprendre que le DOM/JavaScript est le pendant de la séparation du contenu (HTML) et la forme (CSS).
Le DOM représente le contenu, JavaScript apporte l'interactivité.

Pour effectuer un rendu le navigateur construit une représentation du document HTML (DOM ou équivalant) et lui applique les règles de rendu, les CSS.

Le travail du navigateur

  • Télécharger le contenu
  • Analyser le contenu
  • Mettre en page
  • Afficher

Télécharger le contenu

L'utilisateur saisi une URL :

Le navigateur télécharge le contenu :

Si le contenu est déjà en cache, le chargement est “instantané”.

Définitions

URL
Une adresse unique permettant d’indiquer de façon précise où se trouve une ressource Internet.
cache (informatique)
Mémoire tampon dans laquelle se trouvent stockées des informations que le système estime être susceptible de redemander, afin d’accélérer l’accès.

Analyser le contenu

Le navigateur reçoit du texte : Content-Type text/html

<p id="para">Un texte 
    <b>en gras</b>
</p>

Il le converti en une structure de données (arborescente) : Le DOM

Texte du document

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id="para">Un texte 
      <b>en gras</b>
  </p>
</body>
</html> 

HTML vs XHTML+XML

HTML
Langage de balisage utilisé pour créer les documents hypertextes et hypermédias du Web.
XML
“langage de balisage extensible”, le W3C recommande la syntaxe XML pour exprimer des langages de balisages spécifiques.
XHTML
Conçu à l'origine comme le successeur de HTML, XHTML se fonde sur la syntaxe définie par XML.

Type mime

Type MIME :
Multipurpose Internet Mail Extensions (MIME) est un standard internet pour supporter des contenus non textuels (application,audio,image,video,…) et textuels.

text/html : HTML ; Défini dans la RFC 2854 application/xhtml+xml : XHTML ; Défini dans la RFC 3236

DOM : structure arborescente

Définitions

  • Le langage HTML est constitué de balises.
  • Une balise ouvrante et une balise fermante forment un élément HTML.
  • La balise ouvrante peut comporter des attributs.
  • Un élément HTML peut contenir d’autres éléments, on les appelle éléments enfants.

Définitions

  • Il existe un élément particulier l’élément #text
  • Il ne peut pas avoir d’éléments enfants.
  • Il contient simplement du texte littéral.

Définitions

  • Le DOM modélise l’imbrication des éléments.
  • C'est une arborescence reflétant les relations parent/enfants.
  • Les attributs sont liés à UN élément.

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Illustration

<html>
<head>
  <title>Test</title>
</head>
<body>
  <h3>Un titre</h3>
  <p id=“para”>Un texte
        <b>en gras</b>
  </p>
</body>
</html>

Mettre en page

Calcule les positions et tailles des éléments sur la page :

  • C'est les éléments du DOM.
  • La mise en page est déterminée par les propriétés CSS.
    • Les styles par défaut.
    • Les styles définis par l'utilisateur.
  • C'est l'application du modèle de “boîtes” CSS

Illustration

Illustration

Illustration

Illustration

Illustration

Illustration

Illustration

Illustration

Afficher

Une fois les tailles et positions de tous les éléments déterminés :

  • Détermine l'ordre d'affichage
  • Effectue le rendu de tous les éléments
  • Compose les éléments :

Détermine l'ordre d'affichage

  • Ordre naturel
  • Éléments en position absolue
    • z-index

Effectue le rendu de tous les éléments

  • Applique les styles
    • couleurs, police, bords…
  • Rendu du contenu
    • Textes, images …

Compose les éléments :

  • Visibilité
  • Ordre
  • Transparence

Résumé

Relation JavaScript / DOM

Les événements

C'est le navigateur qui gère les événements :

  • Suite à une action de l'utilisateur
  • Un intervalle de temps
  • Un événement interne (chargement, rendu, …)

Si il existe un gestionnaire d'événement, la fonction associé est exécutée.

L'exécution de fonctions

Le code javascript peut modifier à loisir le DOM :

  • Création d'éléments
  • Modification des styles

Nouveau rendu

Les modifications faites au DOM, sont prises en compte pour un nouveau rendu :

  • Nouveau contenu
  • Modification de la mise en forme

AJAX ?

Définitions

XMLHttpRequest : objet Javascript qui permet d'obtenir des données au format XML, JSON, mais aussi HTML

AJAX (XML et JavaScript asynchrones) : AJAX est un acronyme qui évoque l'utilisation de technologies

Technologies AJAX

  • HTML : Structure et sémantique
  • CSS : Présentation
  • DOM / Javascript : Intéractivité
  • XMLHttpRequest : Communication asynchrone avec le serveur
  • XML : Échange d'information avec le serveur

Synchrone / asynchrone

Synchrone : L'exécution est interrompue en attendant la réponse (comme un appel de fonction)

Asynchrone : L'exécution se poursuit sans attendre la réponse, un événement signale l'arriver de la réponse et permet de traité les données reçues.

Schéma complet (initial)

  • Téléchargement du fichier HTML
  • Mise en cache
  • Analyse du code HTML
    • Téléchargement des fichiers liées (css,js,…)
      • Analyse du code JavaScript
      • Exécution du code :
        • Initialisation
        • Connexion au gestionnaires d'événements

Schéma complet (boucle)

  • Mise en page
  • Rendu
  • Gestion des événements
    • Exécution des fonctions
      • Modification du DOM
      • Nouveaux gestionnaires d'événements
  • Retour mise en page …

À venir

  • Naviguer dans le DOM
  • Modifier
    • Le DOM
    • Les éléments
      • contenu
      • attributs
      • styles
  • Gérer les événements
    • Les écouter
    • Obtenir des informations
    • Leurs propagations

Exemple menu HTML

<ul id="menu">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
</ul>
#menu li a {
   display:block;
   margin: 0;
   font-size:20px;
   background-color:#5E994C;
}

Exemple menu JS

window.addEvent('domready', function(){
window.addEvent('domready', function(){
  var menuElements = $$('#menu li a');
  menuElements.setStyles({'font-size':'20px','color':'#0000FF'});
  menuElements.each(function(element) {
    var fx = new Fx.Morph(element,{duration: 500,transition: Fx.Transitions.Quad.easeInOut,wait:false});
    element.addEvent('mouseenter',function() {
      fx.start({'font-size':'60px','color':'#FF0000'});
    });
    element.addEvent('mouseleave',function() {
      fx.start({'font-size':'20px','color':'#0000FF'});
    });
  });
});
cours2007/poo1/cm/dom.txt · Dernière modification: 2009/05/09 22:00 (modification externe)