[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ===== WEB - Fonctionnement du navigateur et DOM ===== [Mise à jour le 25/8/2022] * **Sources** et compléments sur **MDN Web Docs** * Référence du DOM * **Lectures connexes** * [[web:javascript|JavaScript : les bases]] * [[web:javascript:avance:dom|Le DOM et jQuery]] * **Mots-clés** * Navigateur, HTML, CSS, DOM, noeud, gestionnaire d'évènements. ---- ==== 1. Fonctionnement du navigateur ==== Le **navigateur** commence par **télécharger** le fichier **HTML** correspondant à l'URL visitée. {{ :web:fonctionnement1.png?nolink&400 |}} Une fois récupérée, la page est transformée en une //**structure de donnée d'arbre**//: le **DOM**. 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é. Dans le même temps, les scripts **JavaScript** présents dans la page sont exécutés. L'une de leurs activités principales est la définition de **gestionnaires d'évènements**. Ces gestionnaires peuvent modifier librement l'**arbre** représentant le document. //Exemple// {{ :web:fonctnavigateur.png?nolink&550 |}} Le **fichier original**, stocké ou non sur un serveur Web **n'est pas modifié**. 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. Le DOM ==== === 2.1 Présentation === 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. 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. {{ :web:dom.png?nolink&350|}} //Exemple de code HTML5 et arborescence correspondante//

Un titre

Un paragraphe

 === 2.2 Modification du DOM en live ! === Pour illustrer la notion d'objet dans le DOM ou a des fins de test, il est possible de modifier le DOM en entrant du code directement dans la **console JavaScript** du navigateur. On commence par créer le fichier HTML ci-dessous. Modification du DOM dans la console du navigateur
Bonjour !
 On affiche la page dans un navigateur et on ouvre la **console JavaScript** avec **F12** ou **Ctrl-Maj-I** dans Chrome. {{ :web:consolejs1.png?nolink|}} * //Changement de la couleur de fond de la page// \\ En entrant le code ci-dessous dans la console, suivi de Entrée, on observe le changement de couleur de la fenêtre du navigateur. {{ :web:consolejs.png?nolink |}} * // Réinitialisation de la couleur par défaut // document.body.style.background = ""; {{ :web:consolejs2.png?nolink|}} * // Autres manipulations// // Récupération d'un élément et modification du style let d = document.getElementById("hello"); d.style.color="blue"; d.style.fontWeight = "bold"; // Changement du contenu de l'élément d d.innerHTML="Bonjour tout le monde !" === 2.3 Le langage JavaScript pour modifier le DOM === 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 et les traduit en différents types d'actions sur la page Web. //Exemple// {{ :web:consolejs3.png?nolink|}} Compteur en JS 0 * **Fonctionnement** {{ :web:consolejs4.png?nolink&750 |}} Le **JavaScript** est un langage de programmation sous forme de scripts((Sans phase de compilation du code source vers un langage de plus bas niveau)). C'est également un langage évènementiel((À l'écoute des évènements : clic de souris, etc.)) et orienté objet. ====Pour aller plus loin==== [[web:javascript|JavaScript : JavaScript et JQuery : les bases]] ==== A retenir ==== 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