Le DOM (Document Object Model) est une API (Application Programming Interface) permettant à JavaScript d'accéder aux éléments d'une page web.
Une page web est un arbre de balises imbriquées les unes dans ls autres, chaque balise est un noeud. Le DOM modélise cet arbre.
Le DOM est organisé de la façon suivante:
Niveau1 | Niveau2 | Niveau3 | Commentaire |
---|---|---|---|
window | C'est l'objet qui représente tout le navigateur, il permet le gestion de la fenêtre d'affichage | ||
navigator | Informations sur le browser utilisé | ||
frames(parent, self, top) | Désignation de la sous-fenêtre | ||
location | Informations sur l'emplacement de la page | ||
history | Accès à l'historique (pages précédemment visités) | ||
document | all | Le DOM, l'ensemble des éléments qui composent la page | |
images | Référence des images présentes dans la page | ||
forms | Référence des formulaires présents dans la page | ||
links | Référence des liens présents dans la page | ||
anchors | Référence des ancrages présents dans la page | ||
applets | Référence des applets présents dans la page |
l'objet window permet d'accéder à des propriétés et des méthodes permettant de gérer la fenêtre qui contient le document.
Chaque élément forme un noeud (node) dans le document.
l'objet document est représenté par le Document Object Model, une arborescence de l'ensemble des éléments HTML du document.
Chaque élément forme un noeud (node) dans le document.
Le Document Object Model ou DOM est une interface de programmation (API application programming interface) pour les documents HTML.
Il est constitué d'un ensemble d'objets permettant d'interfacer le document HTML: Document, Element, Attr, Text, etc.
L'objet racine du DOM est l'objet document.
document | pour modéliser le document lui-même |
element | pour modéliser un élément (une balise) |
attr | pour modéliser un attribut |
text | pour modéliser le texte contenu dans un élément (une balise) |
Le DOM est créé par le browser lorsque le document HTML est chargé,
Les noeuds sont liés les uns aux autres via des relations de type parent/enfants, on peut parler d'arborescence car un noeud (balise, attribut ou texte) ne peut avoir qu'1 et un seul parent et 0 ou n enfants.
Les enfants d'un même noeud (balise, attribut ou texte) sont considérés comme des frères.
Tout dans une page HTML sera considéré comme un noeud (node en anglais) : le document HTML lui même, les éléments HTML, les attributs HTML et le texte ou images à l’intérieur des éléments.
Les méthodes permettant de cibler des éléments dans le DOM renvoient des objets de type element.
Chaque élément HTML possède un constructeur associé à sa balise: un élément DIV est de type HTMLDivElement, une image est de type HTMLImageElement.
Démo
<h2>Héritage des prototypes d'une balise HTML</h2>
<div id=main>Une bien belle balise div</div>
<script>
var plouc=document.getElementById("main");
function herit(monobj){
var proto=Object.getPrototypeOf(monobj);
var heritage=[];
while(proto !== null){
heritage[heritage.length]=proto.constructor.name;
proto=Object.getPrototypeOf(proto);
}
return heritage;
}
console.log(herit(plouc));
console.log(herit(document));
</script>
Dans la console on a bien la hiérarchie de notre balise div:
De la même manière le document est un objet document de type HTMLDocument qui hérite de Object, EventTarget et Node.