UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  2. Introduction

2. Introduction

Les navigateurs récents (IE6, Moz1x, Firefox) implémentent un modèle plus puissant et surtout plus propre de ce qu’on avait appelé "DHTML" et qui reposaient sur des technologies non-standardisées et donc incompatibles. Voici les composantes

  1. Le langage "JavaScript", un langage de scripting "objets" et qui actuellement est formalisé sous l’appellation "ECMAScript"
  2. Les "Document Object Models" (DOMs), qui définissent une série de méthodes et propriétés avec lesquelles on peut interroger et modifier n’importe quel élément d’un document HTML, XML ou encore langages XML comme SVG, X3D, etc.
  3. Et bien sûr: HTML + CSS

2.1 Les DOMs du W3C

Principe

  1. 1. Un DOM est une description structurée d’un document HTML ou XML.
  2. Un DOM fournit une interface à cette structure et qui permet de modifier structure, contenu et style d’un document XML ou HTML

En termes techniques:

  1. Un DOM est un arbre avec des noeuds
  2. Chaque noed est un objet pour lequel il existe des méthodes et des propriétés (qu’on peut "lire" ou modifier).
  3. Ces interfaces (classes, méthodes et propriétés) sont implémentés pour plusieurs langages comme JavaScript, PhP 5, Java, Python, Perl, ActiveX, ... Dans ce contexte, on parle de "Language bindings".
  4. Les noms des interfaces, classes, méthodes et propriétés sont en principes les mêmes dans toutes ces implémentations (ce qui facilite la vie).

URL des spécifications:

2.2 Niveaux et familles DOM

Level 0

Level 1 (octobre 1998)

Level 2 (2001)

Level 3: contient 6 spécifications

Autre langages XML du W3C

Autres langages

2.3 Implémentations

Tableaux de comparaison:

2.4 Survol des objets DOM

Il existe quelques variables système qui contiennent les objets les plus importants:

 

2.5 Le rapport entre DOM et Javascript

Voici un exemple de sensibilisation

Ce qui est en rouge est DOM

var liste_balises_a
 = document.getElementsByTagName("a")
;
for (var i = 0; i < liste_balises_a
.length
 ; i++)
{
   alert
("Href of " + i + "-th element is : " + liste_balises_a
[i].href
 + "\n");
}

Quelques explications

document.getElementsByTagName("a")

liste_balises_a.length

liste_balises_a[i].href

alert()


UPPREVIOUS NEXT -- TIE