Le Document Object Model (DOM) est une représentation hiérarchique en mémoire d'une page web. Il permet aux programmes JavaScript d'accéder et de manipuler le contenu, la structure et le style d'une page web dynamiquement. En d'autres termes, le DOM permet de créer, de modifier et de supprimer des éléments HTML, de gérer des événements, et bien plus encore.
Le DOM est organisé sous forme d'une arborescence (ou d'un arbre) qui reflète la structure de la page web. Chaque élément HTML est représenté par un nœud dans cet arbre. Voici quelques types de nœuds courants dans le DOM :
Nœuds d'Élément : Représentent les balises HTML telles que <div>, <p>, <ul>, etc.
Nœuds de Texte : Représentent le texte à l'intérieur des éléments.
Nœuds d'Attribut : Représentent les attributs des éléments, tels que class, id, src, etc.
Nœuds de Commentaire : Représentent les commentaires HTML (<!-- Ceci est un commentaire -->).
JavaScript est le langage principal utilisé pour interagir avec le DOM. Voici quelques opérations courantes que vous pouvez effectuer en utilisant JavaScript :
Vous pouvez utiliser des méthodes telles que getElementById, getElementsByClassName, getElementsByTagName, ou querySelector pour accéder à des éléments spécifiques du DOM.
Vous pouvez changer le contenu d'un élément en utilisant la propriété innerHTML ou la propriété textContent. Par exemple, pour changer le texte à l'intérieur d'un élément :
document.getElementById("monElement").textContent = "Nouveau texte";
Vous pouvez modifier les attributs d'un élément en utilisant la propriété setAttribute. Par exemple, pour changer la valeur de l'attribut src d'une image :
document.getElementById("monImage").setAttribute("src", "nouvelle_image.jpg");
Vous pouvez créer de nouveaux éléments en utilisant createElement et les ajouter au DOM avec appendChild. Vous pouvez également supprimer des éléments avec removeChild.
Vous pouvez attacher des gestionnaires d'événements à des éléments pour réagir aux interactions de l'utilisateur, tels que les clics, les saisies clavier, etc.
Dynamisme : Le DOM permet de créer des pages web interactives et dynamiques en permettant la manipulation des éléments de la page en temps réel.
Compatibilité : Le DOM est une norme largement prise en charge par les navigateurs web, ce qui signifie que les scripts JavaScript utilisant le DOM fonctionnent sur la plupart des navigateurs modernes.
Accessibilité : Le DOM permet d'améliorer l'accessibilité des pages web en permettant aux lecteurs d'écran et aux technologies d'assistance de comprendre la structure de la page.
créé le 2023-10-10 à 13:22