Cours 3.7. Document Object Model (DOM)

Cours 3.6 Sommaire Cours 3.8

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>).

Tester l'exemple en ligne

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.

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 :

<h1> est un enfant de la balise <body>
<body> est un parent de la balise <h1>

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 :

let déclare une variable locale ;
element est le nom de la variable qui contiendra l'objet ;
document est la racine du DOM ;
getElementById est une fonction qui recherche la balise du document par son ID ;
monIdentifiant est l'identifiant de la balise que l'on souhaite récupérer.

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>

Tester l'exemple en ligne

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>

Tester l'exemple en ligne

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é :

Faire l'exercice en ligne

Solution

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 :

Faire l'exercice en ligne

Solution

Quiz

Qu'est-ce que le DOM ?

Un document créé avec Microsoft Word

Une représentation du document HTML

Document Object Model

Document Of Markup

Vérifier

Que fait le code ci-dessous ?

<h1>Titre</h1>
<script>
  document.getElementById('titre').innerText = 'Nouveau titre';
</script>

Il efface le titre de la page.

Il remplace le titre.

Il ne modifie par la page.

Il génére une erreur dans la console.

Vérifier Bravo ! L'identifiant titre n'existe pas dans le DOM.

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

<html>
  <head>

  </head>
  <body>
    <h1>Hiérarchie</h1>
  </body>
</html>

La balise <h1> est un enfant de la balise <body>

La balise <body> est un enfant de la balise <h1>

La balise <html> est un parent de la balise <head>

La balise <h1> est un descendant de la balise <html>

Vérifier

Cours 3.6 Sommaire Cours 3.8

Voir aussi

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