des arbres vocabulaire l’arbre DOM

HTML : arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 1

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 2

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 3

 des arbres vocabulaire l’arbre DOM

des arbres...
Vous pensez peut-être qu’un arbre c’est

Université Lille 1 Technologies du Web – HTML : arbre DOM 4

 des arbres vocabulaire l’arbre DOM

des arbres...
Vous pensez peut-être qu’un arbre c’est ça

Université Lille 1 Technologies du Web – HTML : arbre DOM 4

 des arbres vocabulaire l’arbre DOM

des arbres...
Vous pensez peut-être qu’un arbre c’est ou cela

Université Lille 1 Technologies du Web – HTML : arbre DOM 4

 des arbres vocabulaire l’arbre DOM

des arbres...
Vous pensez peut-être qu’un arbre c’est ou peut-être cela

Université Lille 1 Technologies du Web – HTML : arbre DOM 4

 des arbres vocabulaire l’arbre DOM

des arbres...
Vous pensez peut-être qu’un arbre c’est ou peut-être cela

mais en fait non...

Université Lille 1 Technologies du Web – HTML : arbre DOM 4
 des arbres vocabulaire l’arbre DOM

Un arbre c’est ça :

Université Lille 1 Technologies du Web – HTML : arbre DOM 5

 des arbres vocabulaire l’arbre DOM

Un arbre c’est ça :

Université Lille 1 Technologies du Web – HTML : arbre DOM 5

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 6

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 7

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

nœud
Des nœuds de l’arbre.

Université Lille 1 Technologies du Web – HTML : arbre DOM 8

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

racine
Le nœud racine de l’arbre

Université Lille 1 Technologies du Web – HTML : arbre DOM 9

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

feuille
Les nœuds feuilles de l’arbre

Université Lille 1 Technologies du Web – HTML : arbre DOM 10

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

sous-arbre
sous-arbre de racine le nœud article.

Université Lille 1 Technologies du Web – HTML : arbre DOM 11

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

sous-arbre et descendants
sous-arbre de racine le nœud article.
Les nœuds du sous-arbre sont les descendants du nœud article

Université Lille 1 Technologies du Web – HTML : arbre DOM 11

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

père et fils
Le nœud article est le père des noeuds h1, p, img et p.

Université Lille 1 Technologies du Web – HTML : arbre DOM 12

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

père et fils
Le nœud article est le père des noeuds h1, p, img et p.
Les nœuds h1, p, img et p sont les fils du nœud article

Université Lille 1 Technologies du Web – HTML : arbre DOM 12

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

frères
Les nœuds h1, p, img et p sont des nœuds frères.

Université Lille 1 Technologies du Web – HTML : arbre DOM 13

 des arbres vocabulaire l’arbre DOM

vocabulaire sur les arbres

frères
Les nœuds h1, p, img et p sont des nœuds frères.
Le nœud img suit le premier nœud p que précède le nœud h1.

Université Lille 1 Technologies du Web – HTML : arbre DOM 13

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 14

 des arbres vocabulaire l’arbre DOM

au programme...

1 des arbres

2 vocabulaire

3 l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 15

 des arbres vocabulaire l’arbre DOM

structure arborescente d’un document HTML

arbre DOM
On représente la structure d’un document html à l’aide d’un arbre.
On parle d’arbre DOM (Document Object Model) du document.
Les nœuds de l’arbre sont les éléments.

Université Lille 1 Technologies du Web – HTML : arbre DOM 16

 des arbres vocabulaire l’arbre DOM

structure arborescente d’un document HTML

arbre DOM
On représente la structure d’un document html à l’aide d’un arbre.
On parle d’arbre DOM (Document Object Model) du document.
Les nœuds de l’arbre sont les éléments.

Le plus souvent on ignore les nœuds txt.

Université Lille 1 Technologies du Web – HTML : arbre DOM 16
 des arbres vocabulaire l’arbre DOM

structure arborescente d’un document HTML

arbre DOM
On représente la structure d’un document html à l’aide d’un arbre.
On parle d’arbre DOM (Document Object Model) du document.
Les nœuds de l’arbre sont les éléments.

Le plus souvent on ignore les nœuds txt.

Université Lille 1 Technologies du Web – HTML : arbre DOM 16
 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

on parcourt le document séquentiellement

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

on parcourt le document séquentiellement

chaque élément est un nouveau nœud

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

on parcourt le document séquentiellement

chaque élément est un nouveau nœud
si l’élément <elt> est emboité dans l’élément <boite>, le nœud
elt est fils du nœud boite

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

on parcourt le document séquentiellement

chaque élément est un nouveau nœud
si l’élément <elt> est emboité dans l’élément <boite>, le nœud
elt est fils du nœud boite
les nœuds des éléments emboités à un même niveau sont frères.
Ils se suivent « de gauche à droite » selon leur ordre d’apparition
dans le document

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

construire l’arbre DOM

on parcourt le document séquentiellement

chaque élément est un nouveau nœud
si l’élément <elt> est emboité dans l’élément <boite>, le nœud
elt est fils du nœud boite
les nœuds des éléments emboités à un même niveau sont frères.
Ils se suivent « de gauche à droite » selon leur ordre d’apparition
dans le document

exemple

Université Lille 1 Technologies du Web – HTML : arbre DOM 17

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

Université Lille 1 Technologies du Web – HTML : arbre DOM 18

 des arbres vocabulaire l’arbre DOM

le navigateur

interprète en continu l’arbre DOM du document pour afficher la

page
chaque élément/nœud occupe une zone rectangulaire dans la page
⇒ « boite »
toute modification de la structure DOM est répercutée
⇒ pages dynamiques

Université Lille 1 Technologies du Web – HTML : arbre DOM 19

 des arbres vocabulaire l’arbre DOM

à suivre...

CSS

Université Lille 1 Technologies du Web – HTML : arbre DOM 20