| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:dom [2021/08/11 10:49] – phil | web:dom [2022/08/25 10:33] (Version actuelle) – phil |
|---|
| ===== WEB - Fonctionnement du navigateur et DOM ===== | ===== WEB - Fonctionnement du navigateur et DOM ===== |
| |
| [Mise à jour le 18/11/2020] | [Mise à jour le 25/8/2022] |
| |
| * **Sources** et compléments sur **MDN Web Docs** | * **Sources** et compléments sur **MDN Web Docs** |
| * **Mots-clés** | * **Mots-clés** |
| * Navigateur, HTML, CSS, DOM, noeud, gestionnaire d'évènements. | * Navigateur, HTML, CSS, DOM, noeud, gestionnaire d'évènements. |
| | |
| | ---- |
| |
| ==== 1. Fonctionnement du navigateur ==== | ==== 1. Fonctionnement du navigateur ==== |
| {{ :web:fonctionnement1.png?nolink&400 |}} | {{ :web:fonctionnement1.png?nolink&400 |}} |
| |
| <note important>Une fois récupérée, la page est transformée en une //**structure de donnée d'arbre**//: le **DOM**.</note> | <callout type="warning" icon="true">Une fois récupérée, la page est transformée en une //**structure de donnée d'arbre**//: le **DOM**.</callout> |
| |
| Une fois l'arbre construit, ses **noeuds** (les éléments du document HTML) sont parcourus; les **règles CSS** sont appliquées et le rendu graphique de la page est effectué. | Une fois l'arbre construit, ses **noeuds** (les éléments du document HTML) sont parcourus; les **règles CSS** sont appliquées et le rendu graphique de la page est effectué. |
| {{ :web:fonctnavigateur.png?nolink&550 |}} | {{ :web:fonctnavigateur.png?nolink&550 |}} |
| |
| <note important>Le **fichier original**, stocké ou non sur un serveur Web **n'est pas modifié**.</note> | <callout type="warning" icon="true">Le **fichier original**, stocké ou non sur un serveur Web **n'est pas modifié**.</callout> |
| |
| Les attributs des balises peuvent aussi être modifiés. Parmi ces attributs, la modification de l'attribut style permet de changer le rendu graphique de l'élément. Ces changements sont immédiatement répercutés sur l'affichage. | Les attributs des balises peuvent aussi être modifiés. Parmi ces attributs, la modification de l'attribut style permet de changer le rendu graphique de l'élément. Ces changements sont immédiatement répercutés sur l'affichage. |
| === 2.1 Présentation === | === 2.1 Présentation === |
| |
| <note>Le **DOM** (//Document objet Model//) est une **interface de programmation** pour tous les documents et pages web HTML.Il s'agit d'une structure représentant ces **documents** tels qu'ils ont été **interprétés en mémoire par le navigateur**, permettant de parcourir et **modifier leur contenu**, ainsi que leur **présentation visuelle** si des règles CSS sont appliquées.</note> | <callout type="primary" icon="true">Le **DOM** (//Document objet Model//) est une **interface de programmation** pour tous les documents et pages web HTML.Il s'agit d'une structure représentant ces **documents** tels qu'ils ont été **interprétés en mémoire par le navigateur**, permettant de parcourir et **modifier leur contenu**, ainsi que leur **présentation visuelle** si des règles CSS sont appliquées.</callout> |
| |
| Au chargement d'un document HTML depuis le réseau ou un fichier local, un "**arbre**" de la page est élaboré via le DOM. Chacun des éléments est considéré comme un **objet** et peut jouer le rôle de **noeud**, auquel on peut attacher les qualités de **parent**, **enfant**, **orphelin** ou **frère**. Cette représentation permet d'accéder aux propriétés de chacun de ces objets ou groupes d'objets et aux méthodes associées. | Au chargement d'un document HTML depuis le réseau ou un fichier local, un "**arbre**" de la page est élaboré via le DOM. Chacun des éléments est considéré comme un **objet** et peut jouer le rôle de **noeud**, auquel on peut attacher les qualités de **parent**, **enfant**, **orphelin** ou **frère**. Cette représentation permet d'accéder aux propriétés de chacun de ces objets ou groupes d'objets et aux méthodes associées. |
| |
| === 2.3 Le langage JavaScript pour modifier le DOM === | === 2.3 Le langage JavaScript pour modifier le DOM === |
| <note>Pour modifier les pages Web sans les recharger dans le navigateur, on modifie le DOM avec du code **JavaScript**. Ce code est placé dans des balises HTML <script>.</note> | <callout type="primary" icon="true">Pour modifier les pages Web sans les recharger dans le navigateur, on modifie le DOM avec du code **JavaScript**. Ce code est placé dans des balises HTML <script>.</callout> |
| |
| Les navigateurs contiennent un interpréteur JavaScript qui lit les instructions situées entre les balises <script> et </script> et les traduit en différents types d'actions sur la page Web. | Les navigateurs contiennent un interpréteur JavaScript qui lit les instructions situées entre les balises <script> et </script> et les traduit en différents types d'actions sur la page Web. |
| {{ :web:consolejs4.png?nolink&750 |}} | {{ :web:consolejs4.png?nolink&750 |}} |
| |
| <note>Le **JavaScript** est un langage de programmation sous forme de <html><a href="https://whatis.techtarget.com/fr/definition/langage-de-script" target="_blank"><strong>scripts</strong></a></html>((Sans phase de compilation du code source vers un langage de plus bas niveau)). C'est également un langage <html><a href="https://fr.wikipedia.org/wiki/Programmation_%C3%A9v%C3%A9nementielle" target="_blank"><strong>évènementiel</strong></a></html>((À l'écoute des évènements : clic de souris, etc.)) et <html><a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet" target="_blank"><strong>orienté objet</strong></a></html>.</note> | <callout type="primary" icon="true">Le **JavaScript** est un langage de programmation sous forme de <html><a href="https://whatis.techtarget.com/fr/definition/langage-de-script" target="_blank"><strong>scripts</strong></a></html>((Sans phase de compilation du code source vers un langage de plus bas niveau)). C'est également un langage <html><a href="https://fr.wikipedia.org/wiki/Programmation_%C3%A9v%C3%A9nementielle" target="_blank"><strong>évènementiel</strong></a></html>((À l'écoute des évènements : clic de souris, etc.)) et <html><a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet" target="_blank"><strong>orienté objet</strong></a></html>.</callout> |
| |
| ====Pour aller plus loin==== | ====Pour aller plus loin==== |
| |
| ==== A retenir ==== | ==== A retenir ==== |
| <note important>Les sites Web offrent des interfaces **interactives** grâce à du code écrit en langage **JavaScript**. Ce code est **exécuté dans le navigateur**. Le code JavaScript est intégré au sein d'un fichier HTML avec des balises <script>. Le code JavaScript permet d'associer à des éléments HTML des **gestionnaires d'évènements**. Ces derniers sont des fonctions JavaScript qui sont exécutées lorsqu'un évènement choisi (clic de souris, pression sur une touche, etc.) se déclenche pour l'élément concerné. L'attribut id permet de **référencer des éléments HTML** dans du code JavaScript.</note> | <callout type="default" icon="true">Les sites Web offrent des interfaces **interactives** grâce à du code écrit en langage **JavaScript**. Ce code est **exécuté dans le navigateur**. Le code JavaScript est intégré au sein d'un fichier HTML avec des balises <script>. Le code JavaScript permet d'associer à des éléments HTML des **gestionnaires d'évènements**. Ces derniers sont des fonctions JavaScript qui sont exécutées lorsqu'un évènement choisi (clic de souris, pression sur une touche, etc.) se déclenche pour l'élément concerné. L'attribut id permet de **référencer des éléments HTML** dans du code JavaScript.</callout> |
phil