Tutoriel pour apprendre la programmation en JavaScript

X. TP 10 : Manipulation DOM avancée▲

Objectifs :

Inspecter la source d'un événement du DOM
Manipuler la structure du DOM en JavaScript

Plan du cours :

Utilisation de la classe Event
- Exercice : détecter « Entrée » dans un champ texte
Navigation dans le DOM
- Exercice : changer la couleur du parent au clic
Modification de la structure du DOM
- Exercice : construire une page web en JavaScript
- Exercice : supprimer le champ de recherche de Google

Dans les chapitres précédents, nous avons :

utilisé l'API fournie par le navigateur pour accéder aux éléments du DOM d'une page web/HTML ;
modifié les classes et le rendu d'éléments ;
défini une réaction aux événements déclenchés par l'utilisateur ;
et introduit les concepts de Programmation Orientée Objet, et de classes.

Dans ce chapitre, nous allons voir :

comment en savoir plus sur un événement qui a été déclenché par l'utilisateur ;
comment naviguer dans le DOM d'une page web/HTML, de nœud en nœud ;
comment en modifier la structure.

X-A. Utilisation de la classe Event▲

Reprenons un exemple de page web avec gestion d'événement click sur un élément HTML :

Sélectionnez

<button id="mon-bouton">Mon Beau Bouton</button>

Pour afficher un alert à chaque fois que l'utilisateur cliquera sur ce bouton, nous avons vu qu'il fallait affecter une fonction à la propriété onclick de l'objet JavaScript représentant ce bouton :

Sélectionnez

1.
2.
3.

document.getElementById('mon-bouton').onclick = function() {
  alert('bonjour !');
};

En effet, les propriétés d'événements (onclick, onchange, ou autres) d'un élément permettent d'indiquer au navigateur quelle fonction appeler lorsque l'événement correspondant est déclenché par l'utilisateur.

Ce que nous n'avons pas encore vu, en revanche, c'est que le navigateur passe systématiquement un paramètre lorsqu'il appelle cette fonction : une instance de la classe Event.

Affichons la valeur de ce paramètre event (objet-instance de la classe Event) dans la console, afin d'en découvrir les propriétés :

Sélectionnez

1.
2.
3.

document.getElementById('mon-bouton').onclick = function(event) {
  console.log(event);
};

La propriété la plus couramment utilisée est event.currentTarget. En effet, elle a pour valeur l'élément HTML sur lequel l'événement a été intercepté par notre fonction.

Cette propriété est particulièrement utile dans le cas où nous voulons affecter une même fonction de gestion d'événement sur plusieurs éléments, mais que cette fonction a besoin de savoir sur lequel de ces éléments l'événement a été déclenché.

Par exemple :

Sélectionnez

1.
2.
3.

<button>Mon 1er Bouton</button>
<button>Mon 2e Bouton</button>
<button>Mon 3e Bouton</button>

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

var boutons = document.getElementsByTagName('button');
for (var i = 0; i < boutons.length; i++) {
  boutons[i].onclick = function(event) {
    alert('bouton clické : ' + event.currentTarget.innerHTML);
    // => le contenu du bouton cliqué va être affiché dans l'alert
  };
}

À noter que, selon le type d'événement auquel est associée une fonction, le paramètre event peut être une instance de sous-classes contenant des propriétés et méthodes supplémentaires.

Par exemple :

le paramètre event d'une fonction liée à l'événement mousemouse (appelée à chaque mouvement de la souris) est une instance de la classe MouseEvent qui possède les propriétés clientX et clientY, afin de connaitre la position de la souris sur l'écran ;
le paramètre event d'une fonction liée à l'événement keydown (appelée quand l'utilisateur tape un caractère dans un champ) est une instance de la classe KeyboardEvent qui possède les propriétés key et keyCode, permettant de connaitre quelle touche a été tapée par l'utilisateur.

Par ailleurs, la classe Event et ses sous-classes définissent une méthode preventDefault() qui permet d'annuler le traitement habituel d'un événement qui a été intercepté par une fonction. Cette méthode est par exemple utile pour empêcher l'ouverture d'un hyperlien <a>, la soumission d'un formulaire, ou l'ajout de caractères dans un champ.

X-A-1. Exercice : détecter « Entrée » dans un champ texte▲

Créer une page HTML simple contenant un champ <input> dont la valeur est effacée quand l'utilisateur presse la touche « Entrée ».

Cacher/Afficher le codeSélectionnez

<input id="champ">

Cacher/Afficher le codeSélectionnez

var champ = document.getElementById('champ');
champ.onkeydown = function(event) {
  if (event.keyCode === 13) {
    champ.value = '';
  }
};
// il était aussi possible d'utiliser onchange

Solution : jsfiddle

X-B. Navigation dans le DOM▲

Toute page HTML est structurée sous forme hiérarchique (arbre) : chaque élément HTML a un élément parent, et peut avoir plusieurs éléments enfants.

Reprenons par exemple notre page web ne contenant qu'un bouton :

Sélectionnez

1.
2.
3.

<body>
  <button id="mon-bouton">Mon Beau Bouton</button>
</body>

Dans cette page, l'élément <button> a l'élément <body> comme parent, et un nœud texte (le contenu textuel de l'élément) comme enfant. On peut aussi dire que <button> est un nœud enfant de <body>.

Ici, le seul enfant de notre élément <button> est un nœud textuel, mais il serait possible que ce même élément ait d'autres éléments comme enfants.

Supposons que notre bouton soit référencé par la variable element :

Sélectionnez

var element = document.getElementById('mon-bouton');

Comme tout élément HTML représenté en JavaScript (et donc instance de la classe Element), notre variable element possède trois propriétés utiles pour nous aider à naviguer dans ses nœuds parent et enfants :

parentNode est le nœud/élément HTML parent de l'élément ;
children est un tableau d'éléments, enfants directs de l'élément ;
childNodes est un tableau de nœuds HTML (éléments et/ou nœuds textuels), enfants directs de l'élément.

Dans notre exemple :

element.parentNode est l'équivalent de document.body (l'élément <body> de notre page) ;
element.children est un tableau vide, car il n'y a pas d'élément à l'intérieur du bouton ;
element.childNotes est un tableau qui ne contient que le nœud textuel ayant pour valeur « Mon Beau Bouton ».

X-B-1. Exercice : Changer la couleur du parent au clic▲

Soit la page HTML suivante :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<div style="padding : 10px;">
  <button>Mon 1er Bouton</button>
</div>
<div style="padding : 10px;">
  <button>Mon 2e Bouton</button>
</div>
<div style="padding : 10px;">
  <button>Mon 3e Bouton</button>
</div>

Écrire le code JavaScript permettant de colorier le fond du <div> parent en jaune lorsqu'un bouton est cliqué par l'utilisateur.

Pour cela, utiliser une boucle for, une seule fonction onclick, son paramètre event, les propriétés parentNode et style.

Solution : jsfiddle

Cacher/Afficher le codeSélectionnez

<div style="padding: 10px;">
  <button>Mon 1er Bouton</button>
</div>
<div style="padding: 10px;">
  <button>Mon 2ème Bouton</button>
</div>
<div style="padding: 10px;">
  <button>Mon 3ème Bouton</button>
</div>

Cacher/Afficher le codeSélectionnez

var boutons = document.getElementsByTagName('button');
for (var i = 0; i< boutons.length; i++) {
  boutons[i].onclick = function(event) {
  	var divParent = event.currentTarget.parentNode;
    divParent.style.background = 'yellow';
  };
}

X-C. Modification de la structure du DOM▲

À ce stade, nous savons accéder à des éléments du DOM, modifier leur contenu et rendu, et accéder à leurs parent et enfants.

Dans cette partie, nous allons voir comment créer, rattacher et supprimer des nœuds du DOM.

X-C-1. Créer et rattacher un nœud dans le DOM▲

Pour ajouter un élément HTML dans le DOM d'une page web, le navigateur fournit les méthodes suivantes :

document.createElement(nom) pour créer un élément ;
document.createTextNode(texte) pour créer un nœud textuel ;
conteneur.appendChild(element) pour ajouter un élément comme enfant d'un autre élément.

Donc, pour ajouter un bouton au <body> d'une page HTML, il faudra exécuter les instructions JavaScript suivantes :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.

// 1. créer l'élément
var bouton = document.createElement('button');
// 2. créer le contenu du bouton (nœud textuel)
var texteDuBouton = document.createTextNode('Mon beau bouton');
// 3. ajouter le contenu au bouton
bouton.appendChild(texteDuBouton);
// 4. ajouter le bouton au body de la page
document.body.appendChild(bouton);

X-C-2. Supprimer un nœud du DOM▲

Le retrait d'un nœud du DOM est l'opération inverse de celle d'ajout (appendChild()) : elle consiste à appeler la méthode conteneur.removeChild(noeud), où conteneur est le nœud parent duquel on souhaite retirer noeud.

Ainsi, pour supprimer le bouton que nous avons ajouté à la page de l'exemple précédent, il faudra exécuter :

Sélectionnez

document.body.removeChild(bouton);

… ou, de manière plus générale :

Sélectionnez

bouton.parentNode.removeChild(bouton);

X-C-3. Exercice : construire une page web en JavaScript▲

En partant d'une page HTML vierge, développer le code JavaScript permettant d'ajouter à la page :

un champ <input> et un bouton qui vide la valeur du champ quand on clique dessus.

Pour cela, utiliser : createElement(), createTextNode(), appendChild(), document.body, onclick, et value.

Solution : jsfiddle

Cacher/Afficher le codeSélectionnez

var champ = document.createElement('input');
var bouton = document.createElement('button');
bouton.appendChild(document.createTextNode('effacer'));
document.body.appendChild(champ);
document.body.appendChild(bouton);
bouton.onclick = function() {
  champ.value = '';
};

X-C-4. Exercice : supprimer le champ de recherche de Google▲

En utilisant l'inspecteur et la console de Chrome Dev Tools depuis la page google.com, trouver l'instruction JavaScript permettant de supprimer le champ de recherche.

Solution : jsfiddle

Cacher/Afficher le codeSélectionnez

<!--
Marche à suivre:
1. Aller sur google.com
2. Faire un clic droit sur le champ de recherche
3. Cliquer sur "inspecter"
4. Dans l'inspecteur repérer un élément parent contenant tout le bloc de recherche et ayant un id
5. Tapez le code JavaScript suivant dans la console:
-->

Cacher/Afficher le codeSélectionnez

var champ = document.getElementById('sfdiv');
// remplacer l'id si besoin
champ.parentNode.removeChild(champ);

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Adrien Joly. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.