Lors de la construction d’un site web, vous rencontrerez souvent le terme DOM, qui signifie 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 et modifier le contenu d’une page dynamiquement.
Qu’est-ce que le DOM ?
Lorsque votre navigateur charge le code HTML, il l’analyse et construit un arbre d’objets faits d’éléments sur la page. L’élément en haut serait la racine de l’arbre, et en dessous vous trouveriez les nœuds et , et à l’intérieur leurs objets enfants. Le DOM est souvent décrit comme une API standardisée pour le contenu HTML. Si un programme a besoin de mettre à jour le contenu de votre page, il interagirait avec le DOM.
Il est également important de mentionner que le DOM lui-même est neutre en termes de langage. Ce n’est pas une partie de JavaScript, mais JavaScript se trouve être le meilleur moyen d’interagir avec lui.
DOM Dans les Coulisses
Lorsqu’un navigateur charge un site web, le HTML est analysé en un arbre DOM et le CSS en CSSOM (Modèle d’Objet CSS), qui représente toutes les règles de style de vos objets. Une fois terminé, le navigateur combine le DOM et CSSOM pour déterminer à quoi devraient ressembler les nœuds et où ils devraient apparaître, calculant la position exacte et la taille de chaque élément DOM.
Le DOM est une structure vivante et dynamique, donc JavaScript et d’autres codes peuvent changer les nœuds après le chargement d’une page, le site se mettant à jour instantanément sans avoir besoin d’un rechargement.
Interagir avec le DOM
Le navigateur expose le DOM via l’objet `document`, que JavaScript peut ensuite utiliser pour interagir avec lui. En utilisant l’API DOM, vous pouvez effectuer une variété d’actions pour rendre une page statique plus dynamique et interactive. Certaines choses incluent :
- Sélectionner des éléments en faisant `document.getElementById`, qui renvoie le bouton ou l’élément pour cet ID
- Lire ou modifier le contenu d’une page en changeant `element.textContent` ou `element.innerHTML`.
- Appliquer ou modifier dynamiquement le CSS pour un élément en changeant les propriétés de style (par exemple, faire `element.style.backgroundColor = “yellow”` pour définir quelque chose en jaune)
- Ajouter ou supprimer des éléments sur une page en faisant `document.createElement` ou `element.removeChild`
Pourquoi le DOM Compte
Sans le DOM, les sites web tels que nous les connaissons n’existeraient pas ! Le DOM permet tout, d’un script web simple aux applications complexes en permettant du contenu dynamique, et c’est vraiment le pont entre HTML simple et JavaScript. En comprenant ce qu’est le DOM et comment il fonctionne, les développeurs peuvent l’utiliser sur leurs propres sites pour construire des fonctionnalités engageantes pour leurs utilisateurs.
