Design numérique

Javascript / Interagir : arbre HTML et événements

Javascript, dans son utilisation côté client, est un langage qui permet d’interagir avec une page HTML et de modifier le DOM (l’arbre HTML).

L'objet document

Parmi les objets prédéfinis dans le langage Javascript côté client, on trouve l'objet document. Celui-ci est particulièrement important, car il sert d'interface avec l'arbre HTML, et permet de manipuler des éléments du DOM. Grâce à une série de méthodes prédéfinies spécifiques à l'objet document, il devient possible de sélectionner des éléments HTML (traduit sous forme d'objet Javascript également) et de les modifier. Il devient également possible d'attacher une interaction du visiteur à un élément, afin de déclencher un morceau de programme à la suite de cette interaction. Ces interactions sont appelées événements.

Sélectionner des éléments HTML: l'objet Element

Plusieurs méthodes de l'objet document permettent de sélectionner des éléments du DOM. Nous allons commencer par la plus simple, qui permet de sélectionner un élément HTML à partir de son id. Ce morceau de code HTML crée un élément DIV, auquel est attaché un id unique à la page greetings.

<div id="greetings">Hello!</div>

Dans une feuille Javascript attachée à la page HTML contenant ce morceau de code, il devient possible de sélectionner cet élément HTML grâce à la méthode getElementById de l'objet document. La méthode exige un argument de type string : la valeur de l'attribut id de l'élément cible.

var greetings = document.getElementById("greetings");

console.log(greetings);

// Output: [object Element] <div id="greetings">Hello</div>

La méthode getElementById retourne un objet Javascript dit de type Element. Cette appellation est logique, car cet objet est généré à partir d'un élément HTML. Lorsque j'imprime la variable ainsi crée dans la console, je peux accéder à toutes les prorpiétés de cet objet de type Element en cliquant sur la valeur retournée (et il y en a beaucoup).

La fonction document.getElementById("greetings") sélectionne l'élément qui comporte l'attribut id égal à "greetings", ce qui signifie qu'il est indépendant du type de balises.

<h1 id="greetings">Hello!</h1>

Que la balise soit H1 ou DIV ne change rien pour ce sélecteur. Nous verrons ensuite d'autres sélecteurs qui utilisent des attributs différents pour accéder aux éléments HTML.

Attention ! Les valeurs des attributs id doivent être utilisées de manière unique dans une page web. S'il se trouvaient deux id identiques dans une même page du fait d'une erreur, seul le premier élément (dans l'ordre du code) serait sélectionné. La méthode getElementById sélectionne des éléments uniques, et pas des tableaux ou des listes d'éléments, comme d'autres méthodes que nous verrons ensuite.

Modifier une propriété

Comme dit précédemment, il est possible de modifier dynamiquement des propriétés. Nous allons prendre l'exemple de la propriété innerHTML, qui permet d'accéder au contenu d'une balise.

var greetings = document.getElementById("greetings");

console.log(greetings.innerHTML);

// Output: "Hello!"

Attention ! Ma variable est nommée greetings, comme l'id. Néanmoins, il n'y a aucun lien de causalité, et ma variable aurait put être nommée tout à fait autrement. Si j'imprime la propriété innerHTML de la variable greetings, j'obtiens sa valeur, à savoir la chaîne de caractères "Hello!", qui est contenue dans ma balise. Il m'est également possible de modifier la valeur de cette propriété, en utilisant simplement l'opérateur égal. 

var greetings = document.getElementById("greetings");

greetings.innerHTML = "Bonjour !";

Cette opération modifie le code HTML dynamiquement, en changeant la chaîne de caractère contenue dans la balise avec l'attribut id égal à "greetings".

Le code Javascript s'exécute par défaut au moment du chargement du script, qu'il soit inline ou dans un fichier externe. De ce fait, notre changement de texte s'exécute au chargement de la page, ce qui fait que l'utilisateur ne perçoit pas le changement, qui est simultané au chargement de la page.

Pour que ce changement fasse suite à une action de l'utilisateur, nous allons introduire un nouveau concept programmatique : les événements.

Interagir avec l'utilisateur : les événements

Les événements sont des actions potentiellement exécutées par l'utilisateur. Celles-ci peuvent être attachées à un élément HTML particulier, grâce à une méthode appelée addEventListener (littéralement  ajoute un écouteur d'événement). Cette méthode permet d'exécuter un morceau de programme Javascript, sous forme d'une fonction, anonyme ou pas, à la suite d'une action exécutée par l'utilisateur sur l'élément cible. Elle necessite deux arguments :

Reprenons notre morceau de programme précédent, qui met à jour le contenu d'une balise :

var greetings = document.getElementById("greetings");

greetings.innerHTML = "Bonjour !";

Dans notre code HTML, nous allons ajouter un nouvel élément button, qui va nous servir de déclencheur : 

<div id="greetings">Hello!</div>
<button id="trigger">Update</button>

Auquel nous allons pouvoir lier l’événement click.

var greetings = document.getElementById("greetings");
var trigger = document.getElementById("trigger");

trigger.addEventListener("click", function(){

    greetings.innerHTML = "Bonjour !";
});

TADA ! Et donc, si on clique sur le bouton muni de l'id trigger, le contenu de la balise HTML avec l'id "greetings" est modifié :)

Dans cet exemple, la fonction utilisée est dite anonyme, c'est-à-dire qu'elle n'a pas de nom (logique), et donc, qu'elle n'est pas réutilisable ailleurs dans le code. Il est égélement possible d'attacher des fonctions nominatives à des événements, qui pourraient potentiellement $etre utilisée ailleurs dans le code (par exemple, attachée à d'autres événements).

function changeGreetings(){

    var greetings = document.getElementById("greetings");

    greetings.innerHTML = "Bonjour !";

}

 var trigger = document.getElementById("trigger");

 trigger.addEventListener("click", changeGreetings);

Exemples

Deux exemples d'utilisation de ce script sont disponibles :