UPB Technologies Web : HTML, arbre DOM

Technologies du web
HTML: arbre DOM

2021-2022
UPB Technologies Web : HTML, les éléments

au programme...

? Des arbres

? vocabulaire

? L’arbre DOM

2/21
UPB Technologies Web : HTML, les éléments

Des arbres (1/2)

Des arbres :
Vous pensez peut-être qu’un arbre c’est ça

mais en fait non... Lien

3/21
UPB Technologies Web : HTML, les éléments

Des arbres (2/2)

Des arbres :
Un arbre c’est ça:

4/21
UPB Technologies Web : HTML, les éléments

au programme...

? Des arbres

? vocabulaire

? L’arbre DOM

5/21
UPB Technologies Web : HTML, les éléments

Vocabulaire sur les arbres (1/5)

noeud :
Des nœuds de l’arbre.:

6/21
UPB Technologies Web : HTML, les éléments

Vocabulaire sur les arbres (2/5)

racine :
e nœud racine de l’arbre.:

7/21
UPB Technologies Web : HTML, les éléments

Vocabulaire sur les arbres (3/5

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:

8/21
UPB Technologies Web : HTML, les éléments

Vocabulaire sur les arbres (4/5)

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

9/21
UPB Technologies Web : HTML, les éléments

Vocabulaire sur les arbres (5/5)

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.

10/21
UPB Technologies Web : HTML, les éléments

au programme...

? Des arbres

? vocabulaire

? L’arbre DOM

11/21
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(1/7)

arbre DOM:
On représente la structure d’un document html `a 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.

12/21
Le plus souvent on ignore les nœuds txt.
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(2/7)

arbre DOM:
On représente la structure d’un document html `a 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.

13/21
Le plus souvent on ignore les nœuds txt.
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(3/7)

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

14/21
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(4/7)

Exemple:

Exemple

15/21
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(5/7)

Exemple:

Exemple

16/21
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(6/7)

Exemple:

Exemple

17/21
UPB Technologies Web : HTML, les éléments

structure arborescente d’un document HTML(7/7)

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

18/21
UPB Technologies Web : HTML, les éléments

Complément:
Quelques éléments blocs :

 Les titres (h1 à h6), les paragraphes (<p>)  Les tableaux

 Les listes :

19/21
UPB Technologies Web : HTML, les éléments

Complément:
Les formulaires :
Exemple de balises <input>

20/21
UPB Technologies Web : HTML, les éléments

À suivre :

CSS

21/21
? ?