Différencier une Page Web du DOM
Nous venons d’intégrer une vidéo YouTube. C’est le moment parfait pour comprendre la différence entre le code source de la page et le DOM, le modèle généré par le navigateur.
Code source de la page :
En affichant le code source (clic droit > « Afficher le code source de la page »),
Nous voyons exactement ce que nous avons écrit dans notre fichier HTML. Par exemple, notre élément iframe apparaît ainsi :
Une surprise dans l’inspecteur (F12)
Si nous utilisons l’inspecteur de la console (Google Chrome, F12), nous verrons des éléments ou attributs supplémentaires ajoutés par le navigateur ou des scripts externes.
Pour observer cela :
- Ouvrez l’inspecteur en appuyant sur F12 ou en cliquant droit > « Inspecter ».
- Déroulez l’élément
<iframe>dans l’arborescence DOM. - Vous verrez des attributs supplémentaires ajoutés par le navigateur ou par YouTube, comme :
- Des styles injectés automatiquement.
- Des paramètres spécifiques gérés par YouTube.
Explication vulgarisée du DOM
Le DOM, ou Document Object Model, est le résultat final généré à partir de votre code HTML. Ce résultat inclut :
- Votre code : ce que vous écrivez dans votre fichier.
- Le code ajouté par les scripts : si votre page utilise des fonctions ou des ressources externes (comme YouTube), elles peuvent ajouter ou modifier du contenu dans le DOM.
Le DOM, c’est donc la version complète et enrichie de votre page, comprenant votre code de départ et tout ce que les scripts (comme ceux de YouTube) ajoutent automatiquement.
Quand on parle d’une page HTML et du DOM (Document Object Model), on peut dire qu’ils représentent la même chose à un certain niveau : le HTML sert de base pour construire le DOM, qui est une version interprétée et manipulable par le navigateur.
Cependant, une différence importante est la suivante : si du JavaScript injecte des modifications (comme changer des couleurs, des tailles de caractères ou du contenu), ces modifications s’appliquent uniquement au DOM, c’est-à-dire à la représentation en mémoire de la page HTML par le navigateur. Elles ne modifient pas directement le fichier HTML d’origine, qui reste inchangé.
Vous comprenez bien que le JavaScript n’est pas en train de modifier votre fichier HTML. Cela, il ne peut pas le faire, puisque ce fichier est enregistré « en dur », tel quel, sur votre disque ou sur un serveur. Pour manipuler les informations de cette page, le navigateur crée une sorte de miroir temporaire : c’est le DOM. C’est ce miroir que JavaScript va pouvoir manipuler en temps réel, sans toucher au fichier HTML original.
