API HTML DOM
Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.
L'API HTML DOM est compose des interfaces qui dfinissent les fonctionnalits de chacun des lments dans HTML, ainsi que des types et interfaces de support sur lesquels ils s'appuient.
Les domaines fonctionnels inclus dans l'API HTML DOM comprennent :
- L'accs aux lments HTML et leur contrle avec le DOM.
- L'accs aux donnes des formulaires et leur manipulation.
- L'interaction avec le contenu des images 2D et le contexte d'un
<canvas>HTML, par exemple pour dessiner par-dessus. - La gestion des mdias associs aux lments multimdias HTML (
<audio>et<video>). - Le glisser-dposer de contenu sur les pages web.
- L'accs l'historique de navigation du navigateur.
- Des interfaces de support et de connexion pour d'autres API telles que les Web Components, l'API Web Storage, les Web Workers, les WebSockets et les vnements envoys par le serveur.
Dans cet article
- Concepts et utilisation du HTML DOM
- Public cible du HTML DOM
- Interfaces de l'API HTML DOM
- Exemples
- Spcifications
- Compatibilit des navigateurs
- Voir aussi
Concepts et utilisation du HTML DOM
Dans cet article, nous nous concentrons sur les parties du HTML DOM qui impliquent l'interaction avec des lments HTML. Les discussions sur d'autres domaines, tels que Drag and Drop, WebSockets, Web Storage, etc. se trouvent dans la documentation de ces API.
Structure d'un document HTML
Le Document Object Model (DOM) est une architecture qui dcrit la structure d'un document ; chaque document est reprsent par une instance de l'interface Document. Un document, son tour, consiste en un arbre hirarchique de nuds, dans lequel un nud est un enregistrement fondamental reprsentant un seul objet au sein du document (tel qu'un lment ou un nud de texte).
Les nuds peuvent tre strictement organisationnels, fournissant un moyen de regrouper d'autres nuds ou un point partir duquel une hirarchie peut tre construite ; d'autres nuds peuvent reprsenter des composants visibles d'un document. Chaque nud est bas sur l'interface Node, qui fournit des proprits pour obtenir des informations sur le nud ainsi que des mthodes pour crer, supprimer et organiser des nuds au sein du DOM.
Les nuds n'ont pas de notion d'inclure le contenu rellement affich dans le document. Ce sont des rcipients vides. La notion fondamentale d'un nud pouvant reprsenter un contenu visuel est introduite par l'interface Element. Une instance d'objet Element reprsente un seul lment dans un document cr l'aide soit de HTML, soit d'un vocabulaire XML tel que SVG.
Par exemple, considrons un document avec deux lments, dont l'un possde deux autres lments imbriqus l'intrieur :
[Structure d'un document avec des lments l'intrieur d'un document dans une fentre]
![[Structure d'un document avec des lments l'intrieur d'un document dans une fentre]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/dom-structure.svg){kind=link}
Alors que l'interface Document est dfinie dans la spcification DOM, la spcification HTML l'enrichit significativement pour ajouter des informations spcifiques l'utilisation du DOM dans le contexte d'un navigateur web, ainsi qu' son utilisation pour reprsenter spcifiquement des documents HTML.
Parmi les lments ajouts Document par la norme HTML :
- La prise en charge de l'accs diverses informations fournies par les en-ttes HTTP lors du chargement de la page, telles que la location depuis laquelle le document a t charg, les cookies, la date de modification, le site rfrent, etc.
- L'accs des listes d'lments dans le bloc
<head>du document et dans le body, ainsi qu' des listes des images, liens, scripts, etc. contenus dans le document. - La prise en charge de l'interaction avec l'utilisateurice en examinant le focus et en excutant des commandes sur le contenu ditable.
- Des gestionnaires d'vnements pour les vnements de document dfinis par la norme HTML afin de permettre l'accs aux vnements de souris et de clavier, au glisser-dposer, au contrle des mdias, et plus encore.
- Des gestionnaires d'vnements pour des vnements pouvant tre dlivrs la fois aux lments et aux documents ; ceux-ci incluent actuellement uniquement les actions
copy,cutetpaste.
Interfaces des lments HTML
L'interface Element a t davantage adapte pour reprsenter spcifiquement les lments HTML en introduisant l'interface HTMLElement, dont hritent toutes les classes d'lments HTML plus spcifiques. Cela tend la classe Element pour ajouter des fonctionnalits gnrales spcifiques HTML aux nuds d'lment. Les proprits ajoutes par HTMLElement comprennent par exemple hidden et innerText.
Un document HTML est un arbre DOM dans lequel chacun des nuds est un lment HTML, reprsent par l'interface HTMLElement. La classe HTMLElement, son tour, implmente Node, donc chaque lment est aussi un nud (mais l'inverse n'est pas vrai). De cette manire, les fonctionnalits structurelles implmentes par l'interface Node sont galement disponibles pour les lments HTML, leur permettant d'tre imbriqus les uns dans les autres, crs et supprims, dplacs, etc.
L'interface HTMLElement est cependant gnrique, ne fournissant que les fonctionnalits communes tous les lments HTML telles que l'ID de l'lment, ses coordonnes, le HTML constituant l'lment, des informations sur la position de dfilement, etc.
Afin d'tendre les fonctionnalits de base de l'interface HTMLElement pour fournir les caractristiques ncessaires un lment spcifique, la classe HTMLElement est sous-classe pour ajouter les proprits et mthodes ncessaires. Par exemple, l'lment HTML <canvas> est reprsent par un objet de type HTMLCanvasElement. HTMLCanvasElement augmente le type HTMLElement en ajoutant des proprits telles que height et des mthodes comme getContext() pour fournir des fonctionnalits spcifiques au canvas.
L'hritage global des classes d'lments HTML ressemble ceci :
[Hirarchie des interfaces pour les lments HTML]
![[Hirarchie des interfaces pour les lments HTML]](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg){kind=link}
Ainsi, un lment hrite des proprits et mthodes de tous ses anctres. Par exemple, considrons un lment <a>, qui est reprsent dans le DOM par un objet de type HTMLAnchorElement. L'lment inclut alors les proprits et mthodes spcifiques l'ancre dcrites dans la documentation de cette classe, mais aussi celles dfinies par HTMLElement et Element, ainsi que par Node et, finalement, EventTarget.
Chaque niveau dfinit un aspect cl de l'utilit de l'lment. partir de Node, l'lment hrite des concepts entourant la capacit pour l'lment d'tre contenu par un autre lment, et de contenir d'autres lments lui-mme. D'une importance particulire est ce qui est gagn en hritant de EventTarget : la capacit de recevoir et de grer des vnements tels que des clics de souris, des vnements de lecture et de pause, etc.
Il existe des lments qui partagent des points communs et ont donc un type intermdiaire supplmentaire. Par exemple, les lments HTML <audio> et <video> prsentent tous deux des mdias audiovisuels. Les types correspondants, HTMLAudioElement et HTMLVideoElement, sont tous deux bass sur le type commun HTMLMediaElement, qui son tour est bas sur HTMLElement, et ainsi de suite. HTMLMediaElement dfinit les mthodes et proprits communes entre les lments audio et vido.
Ces interfaces spcifiques aux lments constituent la majorit de l'API HTML DOM, et sont l'objet de cet article. L'article sur le DOM fournit une introduction gnrale au DOM et ses concepts.
Public cible du HTML DOM
Les fonctionnalits exposes par le HTML DOM font partie des API les plus couramment utilises dans la bote outils d'une dveloppeureuse web. Toutes les applications web sauf les plus simples utilisent certaines fonctionnalits du HTML DOM.
Interfaces de l'API HTML DOM
La majorit des interfaces qui composent l'API HTML DOM correspondent presque un pour un des lments HTML individuels, ou un petit groupe d'lments ayant des fonctionnalits similaires. En outre, l'API HTML DOM inclut quelques interfaces et types pour prendre en charge les interfaces des lments HTML.
Interfaces des lments HTML
Ces interfaces reprsentent des lments HTML spcifiques (ou des ensembles d'lments apparents qui partagent les mmes proprits et mthodes associes).
HTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBaseElementHTMLBodyElementHTMLBRElementHTMLButtonElementHTMLCanvasElementHTMLDataElementHTMLDataListElementHTMLDetailsElementHTMLDialogElementHTMLDirectoryElementHTMLDivElementHTMLDListElementHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLImageElementHTMLInputElementHTMLLabelElementHTMLLegendElementHTMLLIElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLObjectElementHTMLOListElementHTMLOptGroupElementHTMLOptionElementHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSlotElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElement
Interfaces d'lments HTML dprcies
Interfaces d'lments HTML obsoltes
HTMLFontElementHTMLFrameElementHTMLFrameSetElement
Interfaces d'intgration aux applications web et au navigateur
Ces interfaces offrent un accs la fentre et au document du navigateur qui contiennent le HTML, ainsi qu' l'tat du navigateur, aux plugins disponibles (le cas chant) et diverses options de configuration.
Interfaces d'intgration obsoltes
Interfaces de prise en charge des formulaires
Ces interfaces fournissent la structure et les fonctionnalits requises par les lments utiliss pour crer et grer des formulaires, y compris les lments HTML <form> et <input>.
Interfaces de canvas et d'image
Ces interfaces reprsentent des objets utiliss par l'API Canvas ainsi que l'lment HTML <img> et les lments HTML <picture>.
CanvasGradientCanvasPatternCanvasRenderingContext2DImageBitmapImageBitmapRenderingContextImageDataOffscreenCanvasOffscreenCanvasRenderingContext2DPath2DTextMetrics
Interfaces multimdias
Les interfaces multimdias fournissent un accs HTML au contenu des lments multimdias : <audio> et <video>.
AudioTrackAudioTrackListMediaErrorTextTrackTextTrackCueTextTrackCueListTextTrackListTimeRangesTrackEventVideoTrackVideoTrackList
Interfaces de glisser-dposer
Ces interfaces sont utilises par l'API de glisser-dposer HTML pour reprsenter des lments individuels pouvant tre glisss (ou en cours de glissement), des groupes d'lments glisss ou pouvant tre glisss, et pour grer le processus de glisser-dposer.
Interfaces de l'historique des pages
Les interfaces de l'API History permettent d'accder aux informations sur l'historique du navigateur, ainsi que de faire avancer et reculer l'onglet courant du navigateur dans cet historique.
BeforeUnloadEventHashChangeEventHistoryLocationPageRevealEventPageSwapEventPageTransitionEventPopStateEvent
Interfaces des Web Components
Ces interfaces sont utilises par l'API Web Components pour crer et grer les lments personnaliss disponibles.
Interfaces diverses et de support
Ces types d'objets de support sont utiliss de diverses manires dans l'API HTML DOM. De plus, PromiseRejectionEvent reprsente l'vnement mis lorsqu'une JavaScript Promise est rejete.
DOMStringListDOMStringMapErrorEventHTMLAllCollectionMimeTypeMimeTypeArrayPromiseRejectionEvent
Interfaces appartenant d'autres API
Plusieurs interfaces sont techniquement dfinies dans la spcification HTML tout en faisant partie d'autres API.
Interfaces du stockage web
L'API Web Storage fournit la capacit pour les sites web de stocker des donnes temporairement ou de manire permanente sur l'appareil de l'utilisateurice pour une rutilisation ultrieure.
Interfaces des Web Workers
Ces interfaces sont utilises par l'API Web Workers la fois pour tablir la capacit des workers interagir avec une application et son contenu, et pour prendre en charge la messagerie entre fentres ou applications.
BroadcastChannelDedicatedWorkerGlobalScopeMessageChannelMessageEventMessagePortSharedWorkerSharedWorkerGlobalScopeWorkerWorkerGlobalScopeWorkerLocationWorkerNavigator
Interfaces WebSocket
Ces interfaces, dfinies par la spcification HTML, sont utilises par l'API WebSockets.
Interfaces des vnements envoys par le serveur
L'interface EventSource reprsente la source qui a envoy ou envoie des vnements envoys par le serveur.
Exemples
Dans cet exemple, l'vnement input d'un lment HTML <input> est surveill afin de mettre jour l'tat du bouton "submit" d'un formulaire selon qu'un champ donn a actuellement une valeur ou non.
JavaScript
const champNom = document.getElementById("userName");
const boutonEnvoyer = document.getElementById("sendButton");
boutonEnvoyer.disabled = true;
// [note : ceci est dsactiv car cela fait toujours charger cet article avec cet exemple focalis et droul dans la vue]
// champNom.focus();
champNom.addEventListener("input", (event) => {
const elem = event.target;
const valid = elem.value.length !== 0;
if (valid && boutonEnvoyer.disabled) {
boutonEnvoyer.disabled = false;
} else if (!valid && !boutonEnvoyer.disabled) {
boutonEnvoyer.disabled = true;
}
});
Ce code utilise la mthode getElementById() de l'interface Document pour obtenir l'objet DOM reprsentant les lments <input> dont les ID sont userName et sendButton. Avec ceux-ci, nous pouvons accder aux proprits et mthodes qui fournissent des informations sur ces lments et en donnent le contrle.
L'objet HTMLInputElement pour la proprit disabled du bouton Envoyer est dfini true, ce qui dsactive le bouton Envoyer afin qu'il ne puisse pas tre cliqu. De plus, le champ de saisie du nom d'utilisateurice est rendu actif en appelant la mthode focus() qu'il hrite de HTMLElement.
Ensuite, addEventListener() est appel pour ajouter un gestionnaire pour l'vnement input au champ de nom d'utilisateurice. Ce code examine la longueur de la valeur actuelle de l'entre ; si elle est zro, alors le bouton Envoyer est dsactiv s'il ne l'est pas dj. Sinon, le code s'assure que le bouton est activ.
Avec cela en place, le bouton Envoyer est toujours activ lorsque le champ de saisie du nom d'utilisateurice a une valeur, et dsactiv lorsqu'il est vide.
HTML
Le HTML du formulaire ressemble ceci :
<p>
Veuillez fournir les informations ci-dessous. Les lments marqus par "*"
sont requis.
</p>
<form action="" method="get">
<p>
<label for="userName" required>Votre nom :</label>
<input type="text" id="userName" /> (*)
</p>
<p>
<label for="userEmail">E-mail :</label>
<input type="email" id="userEmail" />
</p>
<input type="submit" value="Envoyer" id="sendButton" />
</form>
Rsultat
Spcifications
| Spcification |
|---|
| HTML # htmlelement |