Introduction et HTML - fil
publicité
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 Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’arbre DOM 18 des arbres Université Lille 1 vocabulaire Technologies du Web – HTML : arbre DOM l’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
