Dépôt | github.com/whatwg/dom |
---|---|
Type |
Modèle Interface de programmation |
Licence | Creative Commons Attribution 4.0 International (d) |
Site web | dom.spec.whatwg.org |
Le Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web[1]. Par le DOM, la composition d'un document HTML ou XML est représentée sous forme d'un jeu d'objets – lesquels peuvent représenter une fenêtre, une phrase ou un style, par exemple – reliés selon une structure en arbre[1]. À l'aide du DOM, un script peut modifier le document présent dans le navigateur en ajoutant ou en supprimant des nœuds de l'arbre[1].
Document Object Model (DOM) signifie « modèle d'objets de document »[2].
!DOCTYPE
suivi de la balise <html>
dans laquelle se trouve le reste du document[2]. Le DOM représente le document affiché par une structure en arbre, comportant des nœuds (branches et feuilles)[2].À l'origine, le DOM (niveau 0, legacy) était un ensemble d'objets mis à disposition par Netscape Navigator, dont la version 4 parut en . Internet Explorer 4 suivit en octobre la même année. Ces deux navigateurs intégraient le support du DHTML[2], lequel requérait des extensions alors offertes par le DOM rudimentaire d'alors. Le document pouvait désormais être manipulé à travers le DOM ; cependant le même document n'était pas représenté de la même manière par les deux navigateurs. Ce problème a progressivement disparu avec l'adoption du DOM normalisé par le W3C[2]. Le DOM (niveau 4) est aujourd'hui incorporé dans la norme HTML5[1].
La spécification du W3C stipule les objets ainsi que les méthodes et les propriétés qu'un navigateur web doit impérativement mettre à disposition[1].
Les principales catégories d'objet d'un arbre DOM sont le document, les éléments et les attributs[1] :
document
expose les informations concernant l'ensemble du document HTML ainsi que la balise <html>
[1] .element
expose une balise d'un document HTML ou XML, et comporte une propriété attributes
qui expose les attributs de la balise. Chaque élément comporte des méthodes permettant d'accéder aux éléments parent, enfant et frères de l'arbre DOM[1] .text
contient le texte qui se trouve à l'intérieur d'une balise[1] .Chaque navigateur met en œuvre le DOM dans son langage de programmation. La spécification du DOM est alignée avec le langage JavaScript, reconnu par tous les navigateurs web[1]. N'importe quelle partie d'une page web peut ainsi être modifiée par programmation, et le programme fonctionnera sur n'importe quel navigateur web conforme à la norme DOM[1].
Techniquement le DOM permet de lire et modifier n'importe quel document utilisant des balises, avec n'importe quel langage de programmation qui offre une interface de programmation DOM[2].
DOM permet de représenter la structure d'un document et de ses éléments sous forme d'un arbre. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.
DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.
La capture d'un événement consiste à exécuter une action (par exemple un programme en JavaScript) lorsque l'événement surveillé se produit dans le document. Les événements capturables du DOM sont[5] :
onabort
— s'il y a une interruption de chargementonerror
— en cas d'erreur pendant le chargement de la pageonload
— après la fin du chargement de la pageonbeforeunload
— se produit juste avant de décharger la page en cours (par changement de page, en quittant)onunload
— se produit lors du déchargement de la page (par changement de page, en quittant)onresize
— quand la fenêtre est redimensionnéeonclick
— sur un simple clicondblclick
— sur un double cliconmousedown
— lorsque le bouton de la souris est enfoncé, sans forcément le relâcheronmousemove
— lorsque le curseur est déplacéonmouseout
— lorsque le curseur sort de l'élémentonmouseover
— lorsque le curseur se trouve sur l'élémentonmouseup
— lorsque le bouton de la souris est relâchéonscroll
— lorsque le scroll de la souris est utiliséonkeydown
— lorsqu'une touche est enfoncéeonkeypress
— lorsqu'une touche est pressée et relâchéeonkeyup
— lorsqu'une touche est relâchéeonblur
— à la perte du focusonchange
— à la perte du focus, si la valeur a changéonfocus
— lorsque l'élément obtient le focus (ou devient actif)onreset
— lors de la remise à zéro du formulaire via un bouton ou une fonction reset()
onselect
— quand du texte est sélectionnéonsubmit
— quand le formulaire est validé via un bouton ou une fonction submit()