Trouver la liste des événements DOM d’une balise HTML

Introduction

Le binding d’événement d’Angular repose sur la syntaxe suivante :

<balise [proprieteDOM]="expression">

Les propriétés DOM disponibles dépendent de la balise dans laquelle on écrit le binding. Par exemple, on peut binder à “src” dans une image (<img [src]="expression">), on peut binder à “href” dans un lien (<a [href]="expression">)…

Mais comment connaître la liste de toutes les propriétés DOM disponibles sur une balise donnée ?

IMPORTANT. Le DOM est un standard implémenté par les navigateurs et ne dépend pas d’Angular. Angular permet de modifier les propriétés du DOM, mais il n’est pas responsable de l’existence de ces propriétés.

Via les Developer Tools du navigateur

NB. Les instructions qui suivent portent sur Google Chrome, mais tous les navigateurs devraient avoir une fonctionnalité équivalente.

Faites un clic droit sur la balise qui vous intéresse et choisissez “Inspecter” dans le menu déroulant qui apparaît. Le volet “Éléments” des Developer Tools doit s’ouvrir, et le marqueur == $0 doit être visible à côté de la balise que vous avez sélectionnée.

SCREENSHOT

Puis, ouvrez le volet “Propriétés” tout à droite des Developer Tools. Dépliez le premier élément (ici, p) pour voir la liste de ses propriétés et leurs valeurs. Les autres éléments du volet “Propriétés” sont les ancêtres de p (on voit que p hérite de HTMLParagraphElement, qui hérite de HTMLElement…).

Vous pouvez également basculer sur la console JavaScript du navigateur pour manipuler ces propriétés en live. Après vous être assuré que la balise qui vous intéresse est toujours sélectionnée dans le volet “Éléments”, vous pouvez y accéder dans la console via la variable $0, et lire ou écrire ses différentes propriétés ($0.innerHTML, $0.id…).

console.log($0.innerHTML);      // lecture
$0.innerHTML = "<p>Hello</p>";  // écriture

Pour découvrir toutes les propriétés existantes, utilisez l’autocomplétion en commençant juste à taper $0.

SCREENSHOT

Via la documentation

Une autre manière de trouver la liste des propriétés DOM d’une balise donnée est de regarder la documentation du DOM.

Le site MDN est une bonne ressource :

Cela dit, passer par la documentation est moins pratique que les Developer Tools, car :

  • Il faut connaître le nom de l’interface DOM recherchée (la balise <p> correspond à l’interface HTMLParagraphElement).
  • Toutes les balises HTML ont des propriétés DOM héritées d’une interface parente HTMLElement (propriétés lang, id…) et la documentation de cette interface se trouve sur une autre page. Il faut donc manuellement “fusionner” les propriétés de l’interface en cours et de son parent pour être sûr de ne rien rater…

Pour ces raisons, je vous recommande de passer par les Developer Tools de votre navigateur, qui en plus vous laisse manipuler en live les propriétés DOM.