User Tools

Site Tools


frontend:dom

DOM

Présentation

Le DOM ou Document Object Model est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web. Par le DOM, la composition d'un document HTML ou XML est représentée sous forme d'un jeu d'objets (qui peuvent représenter une fenêtre, une phrase ou un style, par exemple) reliés selon une structure en arbre. À 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.

Description

Document

Le DOM concerne un document, tel qu'une page web affichée dans un navigateur. Une page web commence par une balise !DOCTYPE suivi de la balise <html> dans laquelle se trouve le reste du document. Le DOM représente le document affiché par une structure en arbre, comportant des nœuds (branches et feuilles).

Objet

En programmation, un objet est un conteneur qui comporte des propriétés et des méthodes qui sont des variables et des actions concernant ce qu'il représente. Les objets du DOM peuvent représenter une fenêtre, un document, une phrase, un style…

Modèle

Un modèle sert à représenter quelque chose, comme le plan d'une ville. Le DOM représente le document qui se trouve dans le navigateur.

Mise en Oeuvre

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. Les principales catégories d'objet d'un arbre DOM sont le document, les éléments et les attributs.

  • Le document expose des informations concernant l'ensemble du document HTML ainsi que la balise <html>.
  • Chaque 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 DOM1.
  • chaque text contient le texte qui se trouve à l'intérieur d'une balise.

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 web1. 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 DOM1.

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.

Événements

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 :

Événements page et fenêtre
onabort s'il y a une interruption de chargement
onerror en cas d'erreur pendant le chargement de la page
onload après la fin du chargement de la page
onbeforeunload 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ée
Événements souris
onclick sur un simple clic
ondblclick sur un double clic
onmousedown lorsque le bouton de la souris est enfoncé, sans forcément le relâcher
onmousemove lorsque le curseur est déplacé
onmouseout lorsque le curseur sort de l'élément
onmouseover lorsque le curseur se trouve sur l'élément
onmouseup lorsque le bouton de la souris est relâché
onscroll lorsque le scroll de la souris est utilisé
Événements clavier
onkeydown lorsqu'une touche est enfoncée
onkeypress lorsqu'une touche est pressée et relâchée
onkeyup lorsqu'une touche est relâchée
Événements formulaires
onblur à la perte du focus
onchange à 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())
frontend/dom.txt · Last modified: 2020/09/16 10:35 (external edit)