En bref : qu’est-ce que le DOM
- Le DOM (Document Object Model) est la représentation vivante et structurée par le navigateur d’une page web, sous forme d’arbre d’objets que JavaScript peut lire et modifier.
- Chaque script chargé par votre page (bundles first-party, gestionnaire de tags, analytics, chat, ad-tech) dispose par défaut d’un accès complet en lecture et en écriture à ce même DOM. C’est pourquoi un script tiers compromis peut lire un formulaire de connexion ou un champ de paiement.
- La sécurité côté client surveille ce que les scripts font réellement au DOM lors des sessions utilisateurs réelles, seul endroit où l’inventaire des scripts exigé par PCI DSS 4.0.1 §6.4.3 et la détection d’altération §11.6.1 peuvent réellement être validés.
Lors de la construction d’un site web, vous rencontrerez souvent le terme DOM, qui signifie Document Object Model (Modèle d’Objet de Document). Le DOM est une interface de programmation qui représente une page web comme un arbre structuré de nœuds, chaque nœud correspondant à un élément HTML (comme une balise de titre, un paragraphe et un lien). Cela permet un accès programmatique pour naviguer dans le contenu d’une page et le modifier dynamiquement.
Qu’est-ce que le DOM ?
Lorsque votre navigateur charge le code HTML, il l’analyse et construit un arbre d’objets à partir des éléments de la page. L’élément tout en haut constitue la racine de l’arbre, et en dessous se trouvent les nœuds et , et à l’intérieur de ceux-ci leurs objets enfants. Le DOM est une API standardisée pour le contenu HTML. Si un programme a besoin de mettre à jour le contenu de votre page, il interagit avec le DOM.
Le DOM lui-même est neutre en matière de langage. Il ne fait pas partie de JavaScript, mais JavaScript s’avère être le meilleur moyen d’interagir avec lui.
Constatez-le sur votre propre site
Si ce qui s’exécute réellement dans le navigateur vous importe (et pas seulement ce que votre serveur a envoyé), vous avez besoin d’une visibilité sur chaque mutation du DOM effectuée par vos scripts tiers. cside surveille le comportement des scripts côté client sur chaque session visiteur en temps réel. Le palier gratuit couvre la base.
Le DOM dans les coulisses
Lorsqu’un navigateur charge un site web, le HTML est analysé en un arbre DOM et le CSS en CSSOM (CSS Object Model), qui représente toutes les règles de style de vos objets. Une fois cela terminé, le navigateur combine le DOM et le CSSOM pour déterminer à quoi les nœuds devraient ressembler, où ils devraient apparaître, ainsi que leur position et leur taille exactes.
Le DOM est une structure vivante et dynamique, si bien que JavaScript et d’autres codes peuvent modifier les nœuds après le chargement d’une page. Le site se met à jour instantanément, sans nécessiter de rechargement.
Interagir avec le DOM
Le navigateur expose le DOM via l’objet `document`, que JavaScript peut ensuite utiliser pour interagir avec lui. Grâce à l’API DOM, vous pouvez effectuer diverses actions pour rendre une page statique plus dynamique et interactive. Voici quelques exemples :
- Sélectionner des éléments avec `document.getElementById`, qui renvoie le bouton ou l’élément correspondant à cet ID
- Lire ou modifier le contenu d’une page en changeant `element.textContent` ou `element.innerHTML`
- Appliquer ou modifier dynamiquement le CSS d’un élément en changeant les propriétés de style (par exemple, faire `element.style.backgroundColor = “yellow”` pour rendre quelque chose de jaune)
- Ajouter ou supprimer des éléments sur une page avec `document.createElement` ou `element.removeChild`
Pourquoi le DOM est important
Sans le DOM, les sites web dynamiques ne seraient pas possibles. Il permet à tout, du simple script à l’application complexe, de lire et de modifier le contenu d’une page, et il constitue la principale interface entre HTML et JavaScript.
