DOM

une interface de programmation pour les documents HTML et XML
- propriétés (modifiables ou non)
- méthodes
- évènements
fournit une représentation structurée du document et une manière (API) d'accéder à cette structure depuis des programmes, permettant à ceux-ci de modifier la structure du document, son style et son contenu
conçu pour être indépendant de tout langage de programmation
des liaisons (bindings) définies pour Java et JavaScript
le standard DOM du W3C forme la base du DOM
plusieurs navigateurs fournissent des extensions du standard
problème: contrairement à SAX qui traite les documents élément par élément, l'API de DOM impose de construire un arbre en mémoire contenant tous les éléments du document. Ainsi pour de gros documents (dont la taille est proche de la quantité de mémoire présente sur la machine), DOM devient insuffisant.

Exemple en JavaScript et son

paragraphes = document.getElementsByTagName("P");
// paragraphes[0] est le premier élément <p>
// paragraphes[1] est le second élément <p>, etc.
alert(paragraphes[0].nodeName);

Exemple en JavaScript et son exécution :

<html>
<script>
 // lancer cette fonction quand le document est chargé
 window.onload = function() {
   // crée quelques éléments dans
   // une page HTML pour l'instant vide
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Exemple - comment ajouter un élément h1");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
 }
</script>
</html>

document
- fournit une manière générale de représenter les documents HTML, XHTML et XML
- inclus dans l'objet window et peut contenir n'importe quel nombre d'éléments;
- les objets document implémentent l'interface DOM Core Document :
  - document.getElementById(id)
  - document.createElement(nom)
  - document.insertBefore(noeud, noeud)
  - ...
```
var debut = document.getElementById("debut");
var div = document.createElement("div");
document.insertBefore(div, debut);
```
- les documents HTML implémentent aussi l'interface DOM HTMLDocument
  - document.title
  - document.body
  - document.forms
  - ...

element

l'interface partagée par tous les éléments HTML et XML;

element hérite de l'interface générique node

element.getElementsByTagName(nom)
element.innerHTML
element.lastChild
...

var e = document.getElementById("d1");
e.setAttribute("align", "center");

var tr = document.getElementById("ligne1");
var td_au_coin = tr.lastChild;

// HTML:
// <div id="d"><p>Contenu</p>
// <p>Développé en détail</p>
// </div>

d = document.getElementById("d");
dump(d.innerHTML);

// la chaîne "<p>Contenu</p><p>Développé en détail</p>"
// est affichée dans la fenêtre de la console

certains éléments comme body ou table disposent de fonctions et propriétés supplémentaires

// La largeur de la bordure est mise à 2 pixels
var t = document.getElementById("TableA");
t.border="2";

nodeList
- un tableau d'éléments;
- les éléments d'une nodeList sont accessibles par un index de deux manières différentes :
  - list.item(i)
  - list[i]
```
document.getElementsByTagName('td').item(2)
```
attribute - attributs;
ils sont des noeuds dans le DOM
window
- contient le document parmi ses enfants
- donne accès aux objets window.navigator et window.screen pour manipuler l'environnement de navigation
- fournit un certain nombre de propriétés spéciales
- si un navigateur utilise des onglets (Firefox), chaque onglet contient son propre objet window
- exemples: window.document, window.navigator, window.history, window.alert(), window.focus()

DOM

Types de données utilisées par l'API

Exemple : test de l'API DOM