Aller au contenu

Le Document Object Model

Le Document Object Model (DOM) est la représentation des données d'objets incluant la structure et le contenu d'un document web. Il offre une interface de programmation pour les documents HTML à partir de laquelle le développeur peut accéder à la structure, au style et au contenu d'une page web.

Chaque élément d'une page est représenté comme un noeud qui possède des propriétés et des fonctions (méthodes). Chaque noeud est un objet (d'où le nom object model). Le DOM permet l'accès à ces objets afin de pouvoir les manipuler à l'aide d'un langage comme le JavaScript.

Introduction au DOM

On représente le DOM comme une hiérarchie d'objets parents-enfants, qui suit la hiérarchie du contenu HTML d'une page. On peut donc en faire une représentation visuelle sous forme d'arbre :

DOM

Le DOM donne accès à différents objets, pas seulement le document lui-même, mais aussi à la fenêtre du navigateur (window).

Pour avoir une idée des objets (noeuds) accessibles sur une page web, on peut les faire afficher dans les outils de développeur du navigateur :

  1. Ouvrir les outils de développeur à l'aide la touche F12
  2. Ouvrir les préférences à l'aide du bouton représentant trois petits points

  3. Activer le panneau du DOM en cochant la case associée

    DOM

  4. Cliquer sur le nouveau panneau nommé DOM

    DOM

Pour faire appel aux éléments du DOM dans notre code JavaScript, on devra faire appel à l'élément parent d'abord et descendre la hiérarchie jusqu'à l'atteinte de notre objet.

L'objet document

Le document représente la page web ou le fichier ouvert dans le navigateur.

Ainsi, si index.html est la page visible dans le navigateur, alors l'objet document représente ce fichier et toutes ses informations, ainsi que son code.

On peut alors accéder au code et aux balises de différentes façons, comme :

  • document.getElementById(id) : trouve la balise qui a l'id donné
  • document.getElementsByTagName(balise) : trouve toutes les balises du type donné
  • document.createElement(balise) : crée une nouvelle balise du type donné

Il existe plusieurs autres utilités à l'objet document.

Nous en verrons quelques unes pendant le cours.

Les éléments (balises)

En HTML, une balise se nomme un élément.

Cette notion est importante, car en Javascript, on travaille avec les éléments et non des balises.

Ce sont des éléments du document ouvert dans le navigateur.

Ainsi, on peut accéder, modifier, créer, etc. des éléments de la page par JavaScript.

Exemples :

  • element.innerHTML
  • element.innerText
  • element.style
  • element.setAttribute()
  • element.getAttribute()
  • etc.

Exemple :

let paragrapheImportant; //Création d'une variable

//Trouver l'élément de la page qui a l'identifiant idParagrapheImportant
paragrapheImportant = document.getElementById("idParagrapheImportant"); 

//Modifier le contenu texte du paragraphe
paragrapheImportant.innerText = "Ce texte apparaîtra dans la balise de paragraphe ayant l'identifiant idParagrapheImportant";