Informatique


L'API DOM

Aller à


Wablief?

Le DOM (Document Object Model) est une API (Application Programming Interface) permettant à JavaScript d'accéder aux éléments d'une page web.


La hiérarchie générale

Le DOM est organisé de la façon suivante:

Niveau1 Niveau2 Niveau3 Commentaire
window     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

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

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.

documentpour modéliser le document lui-même
elementpour modéliser un élément (une balise)
attrpour modéliser un attribut
textpour modéliser le texte contenu dans un élément (une balise)
Tous ces types objets dérivent d'un type commun, le type Node. Ce dernier est utilisé pour représenter n'importe quel noeud trouvé dans un document (noeuds documents, noeuds éléments, noeuds attributs, noeuds textes, noeuds commentaires...)

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 objets HTMLElement

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.


Pour mémoire

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.