Modèle d'objet de document

Le modèle d'objet de document ( DOM ) est une interface multiplateforme et indépendante du langage qui traite un document HTML ou XML comme une structure arborescente dans laquelle chaque nœud est un objet représentant une partie du document. Le DOM représente un document avec un arbre logique. Chaque branche de l'arbre se termine par un nœud et chaque nœud contient des objets. Les méthodes DOM permettent un accès programmatique à l'arbre ; avec elles, on peut modifier la structure, le style ou le contenu d'un document. Les nœuds peuvent avoir des gestionnaires d'événements (également appelés écouteurs d'événements) qui leur sont attachés. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.

La normalisation principale du DOM a été assurée par le World Wide Web Consortium (W3C), qui a élaboré sa dernière recommandation en 2004. Le WHATWG a pris en charge le développement de la norme, la publiant sous forme de document vivant . Le W3C publie désormais des instantanés stables de la norme WHATWG.

Dans HTML DOM (Document Object Model), chaque élément est un nœud :

• Un document est un nœud de document.
• Tous les éléments HTML sont des nœuds d’élément.
• Tous les attributs HTML sont des nœuds d’attribut.
• Les textes insérés dans les éléments HTML sont des nœuds de texte.
• Les commentaires sont des nœuds de commentaires.

L'histoire du Document Object Model est intimement liée à l'histoire de la « guerre des navigateurs » de la fin des années 1990 entre Netscape Navigator et Microsoft Internet Explorer , ainsi qu'à celle de JavaScript et JScript , les premiers langages de script à être largement implémentés dans les moteurs JavaScript des navigateurs Web .

JavaScript a été publié par Netscape Communications en 1995 dans Netscape Navigator 2.0. Le concurrent de Netscape, Microsoft , a publié Internet Explorer 3.0 l'année suivante avec une réimplémentation de JavaScript appelée JScript. JavaScript et JScript permettent aux développeurs Web de créer des pages Web avec une interactivité côté client . Les fonctionnalités limitées de détection des événements générés par l'utilisateur et de modification du document HTML dans la première génération de ces langages sont finalement devenues connues sous le nom de « DOM niveau 0 » ou « Legacy DOM ». Aucune norme indépendante n'a été développée pour DOM niveau 0, mais elle a été partiellement décrite dans les spécifications de HTML 4 .

Le DOM hérité était limité dans les types d' éléments accessibles. Les éléments form , link et image pouvaient être référencés avec un nom hiérarchique commençant par l'objet document racine. Un nom hiérarchique pouvait utiliser soit les noms, soit l' index séquentiel des éléments parcourus. Par exemple, un élément de saisie de formulaire pouvait être accessible soit par document.myForm.myInputou document.forms[0].elements[0].

Le DOM hérité permettait la validation des formulaires côté client et une interactivité d'interface simple comme la création d'info-bulles .

En 1997, Netscape et Microsoft ont publié respectivement la version 4.0 de Netscape Navigator et d'Internet Explorer, ajoutant la prise en charge de la fonctionnalité Dynamic HTML (DHTML) permettant de modifier un document HTML chargé. DHTML nécessitait des extensions de l'objet document rudimentaire qui était disponible dans les implémentations DOM héritées. Bien que les implémentations DOM héritées étaient largement compatibles puisque JScript était basé sur JavaScript, les extensions DOM DHTML ont été développées en parallèle par chaque fabricant de navigateur et sont restées incompatibles. Ces versions du DOM sont devenues connues sous le nom de « DOM intermédiaire ».

Après la normalisation d' ECMAScript , le groupe de travail DOM du W3C a commencé à rédiger une spécification DOM standard. La spécification achevée, connue sous le nom de « DOM Niveau 1 », est devenue une recommandation du W3C fin 1998. En 2005, de grandes parties du DOM du W3C étaient bien prises en charge par les navigateurs courants compatibles ECMAScript, notamment Internet Explorer 6 (à partir de 2001), Opera , Safari et les navigateurs basés sur Gecko (comme Mozilla , Firefox , SeaMonkey et Camino ).

Le groupe de travail DOM du W3C a publié sa recommandation finale et a ensuite été dissous en 2004. Les efforts de développement ont migré vers le WHATWG , qui continue de maintenir un niveau de vie. En 2009, le groupe Applications Web a réorganisé les activités DOM au W3C. En 2013, en raison d'un manque de progrès et de la sortie imminente de HTML5 , la spécification DOM niveau 4 a été réaffectée au groupe de travail HTML pour accélérer son achèvement. Entre-temps, en 2015, le groupe Applications Web a été dissous et la gestion DOM a été transmise au groupe Plateforme Web. À partir de la publication du DOM niveau 4 en 2015, le W3C crée de nouvelles recommandations basées sur des instantanés de la norme WHATWG.

• DOM Niveau 1 fournit un modèle complet pour un document HTML ou XML entier , y compris les moyens de modifier n'importe quelle partie du document.
• DOM Level 2 a été publié fin 2000. Il a introduit la getElementByIdfonction ainsi qu'un modèle d'événement et la prise en charge des espaces de noms XML et CSS.
• DOM niveau 3, publié en avril 2004, a ajouté la prise en charge de XPath et de la gestion des événements clavier , ainsi qu'une interface pour la sérialisation des documents au format XML.
• HTML5 a été publié en octobre 2014. Une partie de HTML5 a remplacé le module HTML DOM niveau 2.
• Le DOM niveau 4 a été publié en 2015 et retiré en novembre 2020.
• Le DOM 2020-06 a été publié en septembre 2021 en tant que recommandation du W3C. Il s'agit d'un aperçu du niveau de vie du WHATWG.

Pour afficher un document tel qu'une page HTML, la plupart des navigateurs Web utilisent un modèle interne similaire au DOM. Les nœuds de chaque document sont organisés dans une structure arborescente , appelée arbre DOM , dont le nœud le plus haut est nommé « objet Document ». Lorsqu'une page HTML est affichée dans les navigateurs, le navigateur télécharge le code HTML dans la mémoire locale et l'analyse automatiquement pour afficher la page à l'écran. Cependant, le DOM n'a pas nécessairement besoin d'être représenté sous forme d'arbre, et certains navigateurs ont utilisé d'autres modèles internes.

Lorsqu'une page Web est chargée, le navigateur crée un modèle d'objet de document de la page, qui est une représentation orientée objet d'un document HTML qui agit comme une interface entre JavaScript et le document lui-même. Cela permet la création de pages Web dynamiques , car au sein d'une page, JavaScript peut :

• ajouter, modifier et supprimer des éléments et des attributs HTML
• modifier l'un des styles CSS
• réagir à tous les événements existants
• créer de nouveaux événements

Une arborescence DOM (Document Object Model) est une représentation hiérarchique d'un document HTML ou XML . Elle se compose d'un nœud racine, qui est le document lui-même, et d'une série de nœuds enfants qui représentent les éléments, les attributs et le contenu textuel du document. Chaque nœud de l'arborescence possède un nœud parent, à l'exception du nœud racine, et peut avoir plusieurs nœuds enfants.

Les éléments d'un document HTML ou XML sont représentés sous forme de nœuds dans l'arborescence DOM. Chaque nœud d'élément possède un nom de balise et des attributs, et peut contenir d'autres nœuds d'élément ou nœuds de texte en tant qu'enfants. Par exemple, un document HTML avec la structure suivante :

< html > 
< head > 
< title > Mon site Web </ title > 
</ head > 
< body > 
< h1 > Bienvenue </ h1 > 
< p > Ceci est mon site Web. </ p > 
</ body > 
</ html >

sera représenté dans l'arbre DOM comme :

- Document (racine) - html - tête - titre - "Mon site Web" - corps - h1 - "Accueillir" - p - "C'est mon site Web." 

Le contenu textuel d'un élément est représenté sous forme de nœud de texte dans l'arborescence DOM. Les nœuds de texte n'ont pas d'attributs ni de nœuds enfants et sont toujours des nœuds feuilles dans l'arborescence. Par exemple, le contenu textuel « Mon site Web » dans l'élément titre et « Bienvenue » dans l'élément h1 dans l'exemple ci-dessus sont tous deux représentés sous forme de nœuds de texte.

Les attributs d'un élément sont représentés sous forme de propriétés du nœud d'élément dans l'arborescence DOM. Par exemple, un élément avec le code HTML suivant :

< a 
href = "https://exemple.com" > Lien </ a >

sera représenté dans l'arbre DOM comme :

- un - href: "https://exemple.com" - "Lien" 

L'arborescence DOM peut être manipulée à l'aide de JavaScript ou d'autres langages de programmation. Les tâches courantes incluent la navigation dans l'arborescence, l'ajout, la suppression et la modification de nœuds, ainsi que l'obtention et la définition des propriétés des nœuds. L'API DOM fournit un ensemble de méthodes et de propriétés pour effectuer ces opérations, telles que getElementById, createElement, appendChildet innerHTML.

// Créer l'élément racine 
var root = document . createElement ( "root" );
// Créer un élément enfant 
var child = document . createElement ( "child" );
// Ajouter l'élément enfant à l'élément racine 
root . appendChild ( child );

Une autre façon de créer une structure DOM consiste à utiliser la propriété innerHTML pour insérer du code HTML sous forme de chaîne, créant ainsi les éléments et les enfants au cours du processus. Par exemple :

document . getElementById ( "root" ). innerHTML = "<enfant></enfant>" ;

Une autre méthode consiste à utiliser une bibliothèque ou un framework JavaScript tel que jQuery , AngularJS , React , Vue.js , etc. Ces bibliothèques offrent un moyen plus pratique, plus éloquent et plus efficace de créer, de manipuler et d'interagir avec le DOM.

Il est également possible de créer une structure DOM à partir de données XML ou JSON, en utilisant des méthodes JavaScript pour analyser les données et créer les nœuds en conséquence.

Créer une structure DOM ne signifie pas nécessairement qu'elle sera affichée dans la page Web, elle n'existe qu'en mémoire et doit être ajoutée au corps du document ou à un conteneur spécifique pour être rendue.

En résumé, la création d'une structure DOM implique la création de nœuds individuels et leur organisation dans une structure hiérarchique à l'aide de JavaScript ou d'autres langages de programmation, et cela peut être fait à l'aide de plusieurs méthodes en fonction du cas d'utilisation et de la préférence du développeur.

Comme le DOM prend en charge la navigation dans toutes les directions (par exemple, parent et frère précédent) et autorise des modifications arbitraires, les implémentations mettent généralement le document en mémoire tampon. Cependant, un DOM n'a pas besoin d'être originaire d'un document sérialisé, mais peut être créé sur place avec l'API DOM. Et même avant l'apparition de l'idée du DOM, il existait des implémentations de structure équivalente avec une représentation sur disque persistant et un accès rapide, par exemple le modèle de DynaText décrit dans et diverses approches de base de données.

Les navigateurs Web s'appuient sur des moteurs de mise en page pour analyser le code HTML dans un DOM. Certains moteurs de mise en page, tels que Trident/MSHTML , sont associés principalement ou exclusivement à un navigateur particulier, tel qu'Internet Explorer. D'autres, notamment Blink , WebKit et Gecko , sont partagés par un certain nombre de navigateurs, tels que Google Chrome , Opera , Safari et Firefox . Les différents moteurs de mise en page implémentent les normes DOM à divers degrés de conformité.

Implémentations DOM :

• libxml2
• MSXML
• Xerces est une collection d'implémentations DOM écrites en C++, Java et Perl
• xml.dom pour Python
• XML pour <SCRIPT> est une implémentation DOM basée sur JavaScript
• PHP.Gt DOM est une implémentation DOM côté serveur basée sur libxml2 et apporte la compatibilité DOM niveau 4 au langage de programmation PHP
• Domino est une implémentation DOM côté serveur (Node.js) basée sur dom.js de Mozilla. Domino est utilisé dans la pile MediaWiki avec Visual Editor.
• SimpleHtmlDom est un modèle d'objet de document HTML simple en C#, qui peut générer une chaîne HTML par programmation.

API qui exposent les implémentations DOM :

• JAXP (Java API for XML Processing) est une API permettant d'accéder aux fournisseurs DOM
• Lazarus ( Free Pascal IDE) contient deux variantes du DOM - avec les formats UTF-8 et ANSI

Outils d'inspection :

• DOM Inspector est un outil de développement Web