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>
).
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>
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';
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>
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é :
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 :
Qu'est-ce que le DOM ?
Que fait le code ci-dessous ?
<h1>Titre</h1>
<script>
document.getElementById('titre').innerText = 'Nouveau titre';
</script>
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>
<body>
est un enfant de la balise <h1>
<html>
est un parent de la balise <head>
<h1>
est un descendant de la balise <html>