Cours 3.7. Document Object Model (DOM)

Dans le cours précédent, nous avons étudié les évenements dans les attributs des balises HTML. Vous comprendrez assez facilement que cette méthode présente toutefois quelques limitations. Par exemple, vous ne pourrez pas modifier un autre élément que celui qui déclenche l'événement car this se réfère forcément à l'élément courant.

Dans ce cours, nous allons étudier une autre méthode qui vous permet de modifier n'importe quel élément de la page. Dans l'exemple ci-dessous, le bouton permet de modifier le titre, bien qu'il s'aggisse de deux balises HTML distinctes (<h1> et <botton>).

DOM

Pour interagir avec n'importe quelle balise du HTML, il est d'abord nécessaire de comprendre comment est structuré le document (Document Object Model ou DOM). Le DOM est une représentation du document HTML avec laquelle le JavaScript peut interagir.

Représentation graphique du DOM

Le DOM est une représentation hiérarchique du HTML. La hiérarchie est liée à la structure du HTML où les balises sont imbriquées les unes dans les autres. Dans l'exemple ci-dessus, la balise <h1> se trouve dans la balise <body>. On dit que :

Modifier un élément du DOM

Il est possible de modifier n'importe quel élément du DOM en JavaScript. Pour cela, il faut commencer par récupérer l'objet JavaScript associé à la balise que l'on souhaite modifier. Voici un exemple qui permet de récupérer l'objet associé à la balise ayant pour identifiant id="monIdentifiant". On rappelle que les identifiants doivent être uniques (deux balises ne doivent jamais avoir le même identifiant).

<div id="monIdentifiant">Bla bla </div>

<script>
  let element = document.getElementById('monIdentifiant');
</script>

Analysons ce code :

Il est ensuite possible de modifier l'élément directement. Comme nous l'avons déjà fait au cours précédent. Par exemple :

// Modifie le texte intérieur de la balise element
element.innerText = 'Nouveau contenu';

Exemple

L'exemple ci-dessous ajoute le texte du titre dans la balise <h1> de la page :

<!-- Titre vide -->
<h1 id="titre"></h1>

<script>
  let element = document.getElementById('titre');
  element.innerText = "Titre modifié !"
</script>

L'exemple ci-dessus vous parait peut-être inutile ! Il est en effet plus simple de mettre le titre directement dans la balise <h1> du HTML. Toutefois, l'exemple ci-dessous devrait vous permettre de comprendre pourquoi ce mécanisme est important. Cet exemple permet de modifier le titre lorsque l'on clique sur le bouton qui sont deux balises différentes :

<h1 id="title">Document Object Model</h1>

<button onclick="document.getElementById('title').innerText = 'Nouveau titre';">
    Cliquez pour modifier le titre
</button>

Exercices

Exercice 1

Modifier le code ci-dessous afin que le texte du paragraphe soit remplacé par Chuck Norris est trop fort lorsque l'on clique sur le boutton :

<p>
    Chuck Norris est <span style="font-weight: bold;" id="qualificatif">un ringard</span>.
</p>

<button>
    Je ne veux pas mourrir si jeune.
</button>

Voici le résultat escompté :

Exercice 2

Modifier le code ci-dessous afin que la réponse soit affichée ou effacée selon le bouton cliqué :

<h1>À quoi sert Microsoft Edge ?</h1>

<!-- Ajouter des événements qui affiche ou masque la réponse -->
<button>Afficher la réponse</button>
<button>Masquer la réponse</button>

<!-- La réponse est "À télécharger Google Chrome" -->
<p id="reponse"></p>

Voici le résultat attendu :

Quiz

Qu'est-ce que le DOM ?

Vérifier Bravo ! Le DOM (Document Object Model) est une représentation du document HTML. Essaie encore ...

Que fait le code ci-dessous ?

<h1>Titre</h1>
<script>
  document.getElementById('titre').innerText = 'Nouveau titre';
</script>
Vérifier Bravo ! L'identifiant titre n'existe pas dans le DOM. Essaie encore ...

Considérons le code HTML ci-dessous, quelles propositions sont vraies ?

<html>
  <head>

  </head>
  <body>
    <h1>Hiérarchie</h1>
  </body>
</html>
Vérifier Bravo ! Les balises qui se trouvent encapsulés dans d'autres balises en sont les descendants. Essaie encore ...

Voir aussi


Dernière mise à jour : 07/10/2022