Formation HTML 5

xHTML et DOM

Rappel XML

Un document XML impose une structure arborescente de ses composants.
Il peut être manipulé par des méthodes standardisées qui permettent :
- de localiser et de lire un élément ou un branche,
- d'insérer un élément,
- de supprimer un élément,
- ...

Qu'est ce que le DOM ?

Le DOM permet une modélisation cohérente et ordonnée d'un document XML.
Il fournit :
- une représentation structurée du document, sous forme d'arborescence,
- un ensemble de fonctions pour manipuler cette arborescence.
Le xHTML étant du XML il est accessible par les fonctions du DOM.
En raison d'une standardisation tardive le DOM est constitué de plusieurs niveaux.
Chaque niveau spécifié par le W3C est un sous ensemble du niveau supérieur.

On voit l'avantage de l'utilisation du xHTML qui de par sa structure cohérente permet des manipulations à partir d'outils standards. Le HTML qui est conforme au SGML ne bénéficie pas de tels outils car sa structure est permissive. Par exemple les balises n'ont pas besoin d'être fermées en fonction de leur type ...

Les fonctionnalités du niveau 1 sont incluses dans les fonctionnalités du niveau 2 qui sont incluses dans les fonctionnalités du niveau 3.

DOM niveau 0

Le DOM niveau 0 correspond à l'ancien modèle de gestion interne d'un document WEB.
Il permet d'agir par Javascript sur certains éléments seulement :
- les éléments de formulaire,
- la couleur de fond du document,
- l'url d'un lien.
Il ne permet pas d'agir sur la structure du document (insertion, suppression, ...).

L'ancien modèle DOM niveau 0 utilise énormément le nommage des éléments accessible par la propriété name. Ce mode d'accès est théoriquement devenu obsolète.
La raison de cet obsolescence est liée au fait que plusieurs éléments peuvent partager le même nom. La méthode actuellement préconisée est le recours à l'identifiant id qui est unique sur le document.

DOM niveau 0

Exemple de syntaxe permettant de donner une valeur à un champ texte nommé adresse dans le formulaire nommé localisation :

<form name="localisation">
<input type="text" name="adresse" value=""/>
</form>

<script type="text/javascript">

// adressage par tableau associatif de formulaires 
document.forms["localisation"].adresse.value='Émile';

// adressage par nom de formulaire 
document.forms.localisation.adresse.value='Émile';

// adressage par tableau indicé de formulaires 
document.forms[0].adresse.value='Émile';

// adressage par nom sans préciser de formulaire 
document.localisation.adresse.value='Émile';
</script>

Il y a plusieurs moyens pour adresser les éléments en DOM version 0 pouvant être ou ne pas être pris en compte par tous le navigateurs. Il sera préférable d'éviter l'utilisation des tableaux indicés car l'indice correspond à l'ordre d'apparition du formulaire dans la page, et les utiliser rendra la maintenance difficile.

DOM niveau 1

Les DOM intermédiaires datent de la période de la guerre opposant Microsoft et Nestcape.
Pour cette raison ils ont répondu différemment à la demande d'intégrer la gestion des feuilles de style dans les pages ce qui a donné naissance au "DHTML" adressé par 2 DOM inconciliables :
- l'approche de Netscape 4 : document.layers,
- l'approche de Microsoft : document.all.
Le W3C a écrit le premier standard du DOM niveau 1 en 1998.
Il a été rapidement suivi de la version 2 actuelle à partir de 2000.
Le DOM version 2 a été implémenté partiellement dans les navigateurs Mozilla et IE 5.
Ce standard devrait maintenant normalement être pris en charge par tous les navigateurs.

On voit l'avantage de l'utilisation du xHTML qui de par sa structure cohérente permet des manipulations à partir d'outils standards. Le HTML qui est conforme au SGML ne bénéficie pas de tels outils car sa structure est permissive. Par exemple les balises n'ont pas besoin d'être fermées en fonction de leur type ...

DOM niveau 1

Il est possible de détecter la compatibilité d'un navigateur avec le DOM niveau 1.

Exemple de script vérifiant la prise en charge du DOM niveau 1 :

<script type="text/javascript">
 if (document.getElementById && document.createElement) 
   alert("Ce navigateur est conforme au DOM niveau 1");
</script>

Ce script remontera une fenêtre d'alerte contenant :
Ce navigateur est conforme au DOM niveau 1

DOM niveau 2

Le DOM niveau 1 a été rapidement suivi de la version 2 actuelle à partir de 2000.
Le DOM niveau 2 a été partiellement réalisé dans les navigateurs Mozilla et IE 5.
Ce standard devrait maintenant normalement être pris en charge par tous les navigateurs.
C'est par des fonctions javascript qu'il est possible d'accéder au DOM et donc :
- à la structure (insertion, suppression, permutation...)
- au style (couleur, polices, visibilité...)
- au contenu (modification du texte, des images...)

Ces possibilités correspondent à celles offertes par les applications du web 2.0 qui permettent de modifier des zones dans une page sans avoir à recharger tout le document.

DOM niveau 2

Le DOM d'un document WEB est une structure de données qui représente ce document comme une arborescence.
La racine symbolique de cet arbre est un nœud nommé document.
Chaque nœud du document à l'exception de document n'a qu'un seul parent et est un descendant de document.
Chaque nœud peut avoir un nombre quelconque d'enfants.

DOM niveau 2

Dans un document xHTML les balises correspondent à des nœuds de l'arbre DOM, de type Element, et en constituent donc la structure.
Les différentes parties du contenu, c'est-à-dire les textes de la page, sont inclus dans l'arbre en tant que nœuds de type Text.
Chaque nœud textuel est toujours enfant du nœud représentant la balise à laquelle il est accroché dans le code XML
Les attributs des balises sont représentés dans l'arbre comme des propriétés des nœuds des balises correspondantes.

DOM niveau 2

Le DOM est une structure de programmation orientée-objet, qui se compose d'un ensemble d'interfaces et non de classes.
En conséquence le programmeur n'utilisera pas de constructeurs d'objets comme :
```
var v = new Text("voici un texte");
```
mais il invoquera une méthode de création définie dans l'une des interfaces :
```
var v = document.createTextNode("voici un texte");
```
L'interface fondamentale est Node.
Les autres interfaces correspondent à des types de nœuds particuliers tels que Document, Element, Text.
Chaque objet Node a un type particulier déterminé par une valeur de la propriété nodeValue.

Les interfaces définissent une série de méthodes et de propriétés permettant d'interroger l'état de l'arbre, de le parcourir et de le modifier.

À partir de chaque nœud pris comme base de départ il est possible d'explorer complètement l'arborescence du document et de le modifier dynamiquement en interaction avec des déclenchements d'événements provoqués par l'utilisateur.

La méthode document.createElement() permet de créer un élément.

La méthode element.appendChild() permet d'insérer un élément dans un autre élément.

Propriétés et méthodes

Chaque nœud est un objet qui a des propriétés pouvant être lues par des méthodes.
Les méthodes sont appliquées à partir de la référence d'un objet.
Pour obtenir la référence sur un objet dont l'identité est id_elmt il est possible d'utiliser
```
nd = getElementById('id_elmt')
```

Propriétés et méthodes

nd.nodeType indique le type du nœud nd, les valeurs possibles sont données par le tableau suivant :

type de nœud valeur de retour

Element 1

Attribute 2

Text 3

Comment 8

Document 9

type de nœud	valeur de retour
`Element`	1
`Attribute`	2
`Text`	3
`Comment`	8
`Document`	9

Propriétés et méthodes

nd.nodeName donne le nom du nœud nd c'est à dire :
- s'il s'agit d'une balise XML retourne le nom cette la balise,
- s'il s'agit d'un élément textuel retourne la valeur #text.
- s'il s'agit de la racine retourne la valeur #document.
nd.nodeValue donne le contenu du nœud nd c'est à dire :
- le texte pour les nœuds de type text,
- la valeur de l'attribut pour les nœuds de type Attribute,
- null pour les nœuds de type element.
nd.data n'est applicable que pour les nœuds de type texte et donne ou affecte leur contenu actuel.
nd.attributes retourne un tableau indicé de toutes les propriétés du nœud.

DOM niveau 3

Le DOM niveau 3 a été initié en 2004 et est en cours de validation.
Les principaux apports sont :
- de fournir un ensemble standard d'objets pour la représentation de documents et de données XML comprenant :
  - les espaces de noms,
  - la modification de l'URI de base par XML Base,
  - le support de types de données XML Schema,
- d'améliorer le support de la plateforme XML, et d'étendre les applications de services Web,
- de permettre le chargement et la sauvegarde de documents XML ou de fragments XML.

On peut regretter que la spécification du niveau 3 ne soit pas déjà finalisée, mais pour manipuler un document XML le DOM niveau 2 apporte à lui seul un ensemble assez complet.