HTML DOM (modèle objet de document) est une représentation hiérarchique des documents HTML. Il définit la structure et les propriétés des éléments d'une page Web, permettant à JavaScript d'accéder, de manipuler et de mettre à jour dynamiquement le contenu, améliorant ainsi l'interactivité et les fonctionnalités.

Note : On l'appelle une structure logique car DOM ne spécifie aucune relation entre les objets.

Table des matières

• Pourquoi DOM est requis ?
• Structure du DOM
• Propriétés du DOM
• Méthodes du modèle objet de document
• Quel DOM n’est pas ?
• Niveaux de DOM :

Qu’est-ce que le DOM ?

DOMAINE , ou Modèle d'objet de document , est une interface de programmation qui représente des documents structurés comme HTML et XML comme un arbre d'objets. Il définit comment accéder, manipuler et modifier les éléments du document à l'aide de langages de script tels que JavaScript.

Donc, fondamentalement, le modèle objet de document est un API qui représente et interagit avec des documents HTML ou XML.

maman kulkarni

Le DOM est un W3C (World Wide Web Consortium) standard et il définit une norme pour accéder aux documents.

La norme W3C Dom est divisée en trois parties différentes :

• DOM de base – modèle standard pour tous types de documents
• XML-DOM – modèle standard pour les documents XML
• DOM HTML – modèle standard pour les documents HTML

DOM HTML

HTML DOM est un standard modèle objet et interface de programmation pour Documents HTML. DOM HTML est une façon de représenter la page Web dans un manière hiérarchique structurée afin qu'il devienne plus facile pour les programmeurs et les utilisateurs de parcourir le document.

Avec HTML DOM, nous pouvons facilement accéder et manipuler des balises, des identifiants, des classes, des attributs ou des éléments HTML à l'aide de commandes ou de méthodes fournies par l'objet document.

En utilisant DOM JavaScript, nous avons accès au HTML ainsi qu'au CSS de la page Web et pouvons également modifier le comportement des éléments HTML.

Pourquoi DOM est-il requis ?

HTML est utilisé pour structure les pages Web et Javascript est utilisé pour ajouter comportement à nos pages Web. Lorsqu'un fichier HTML est chargé dans le navigateur, JavaScript ne peut pas comprendre directement le document HTML. Ainsi, il interprète et interagit avec le modèle d'objet de document (DOM), créé par le navigateur sur la base du document HTML.

DOM est essentiellement la représentation du même document HTML mais dans une structure arborescente composée d'objets. JavaScript ne peut pas comprendre les tags() dans le document HTML mais peut comprendre l'objet h1 dans le DOM.

JavaScript interprète facilement le DOM, en l'utilisant comme un pont pour accéder et manipuler les éléments. DOM Javascript permet d'accéder à chacun des objets (h1, p, etc) en utilisant différentes fonctions.

Le Modèle Objet de Document (DOM) est essentiel dans le développement Web pour plusieurs raisons :

• Pages Web dynamiques : Il vous permet de créer des pages Web dynamiques. Il permet à JavaScript d'accéder et de manipuler le contenu, la structure et le style de la page de manière dynamique, ce qui offre des expériences Web interactives et réactives, telles que la mise à jour du contenu sans recharger la page entière ou répondre instantanément aux actions de l'utilisateur.
• Interactivité : Avec le DOM, vous pouvez répondre aux actions des utilisateurs (comme les clics, les saisies ou les défilements) et modifier la page Web en conséquence.
• Mises à jour du contenu : Lorsque vous souhaitez mettre à jour le contenu sans actualiser la page entière, le DOM permet des modifications ciblées rendant les applications Web plus efficaces et plus conviviales.
• Compatibilité entre navigateurs : Différents navigateurs peuvent afficher le HTML et le CSS de différentes manières. Le DOM fournit un moyen standardisé d'interagir avec les éléments de la page.
• Applications d'une seule page (SPA) : Les applications construites avec des frameworks tels que React ou Angular s'appuient fortement sur le DOM pour un rendu et une mise à jour efficaces du contenu au sein d'une seule page HTML sans recharger la page entière.

Structure du DOM

DOM peut être considéré comme un arbre ou une forêt (plus d'un arbre). Le terme modèle de structure est parfois utilisé pour décrire la représentation arborescente d'un document.

Chaque branche de l'arborescence se termine par un nœud et chaque nœud contient des objets. Des écouteurs d'événements peuvent être ajoutés aux nœuds et déclenchés lors de l'occurrence d'un événement donné. Une propriété importante des modèles de structure DOM est isomorphisme structural : si deux implémentations DOM sont utilisées pour créer une représentation du même document, elles créeront le même modèle de structure, avec précisément les mêmes objets et relations.

Pourquoi DOM est-il appelé un modèle objet ?

Les documents sont modélisés à l'aide d'objets, et le modèle inclut non seulement la structure d'un document mais également le comportement d'un document et les objets qui le composent comme des éléments de balise avec des attributs en HTML.

Propriétés du DOM

Voyons les propriétés de l'objet document qui peuvent être consultées et modifiées par l'objet document.

Représentation des DOM

• Objet fenêtre : L'objet fenêtre est l'objet du navigateur qui se trouve toujours en haut de la hiérarchie. C'est comme une API utilisée pour définir et accéder à toutes les propriétés et méthodes du navigateur. Il est automatiquement créé par le navigateur.
• Objet du document : Lorsqu'un document HTML est chargé dans une fenêtre, il devient un objet document. L'objet « document » possède diverses propriétés qui font référence à d'autres objets qui permettent d'accéder et de modifier le contenu de la page Web. S'il est nécessaire d'accéder à un élément d'une page HTML, nous commençons toujours par accéder à l'objet « document ». L'objet document est la propriété de l'objet fenêtre.
• Objet de formulaire : Il est représenté par formulaire Mots clés.
• Objet de lien : Il est représenté par lien Mots clés.
• Objet d'ancrage : Il est représenté par un href Mots clés.
• Éléments de contrôle de formulaire : Le formulaire peut comporter de nombreux éléments de contrôle tels que des champs de texte, des boutons, des boutons radio, des cases à cocher, etc.

Méthodes d'objet de document

DOMAINE fournit diverses méthodes permettant aux utilisateurs d'interagir avec et de manipuler le document. Certaines méthodes DOM couramment utilisées sont :

Exemple: Dans cet exemple, nous utilisons l'identifiant de l'élément HTML pour rechercher l'élément HTML DOM.

    
techcodeview.comh2>
Un portail informatique pour les geeks. p>
Cet exemple illustre le getElementByIdb> méthode. p>
p>