Articles
Introduction à TypeScript
Classes utilisées pour la manipulation du DOM/la gestion des événements en TypeScript

Classes utilisées pour la manipulation du DOM/la gestion des événements en TypeScript

Dans cet article, nous expliquerons les classes utilisées pour la manipulation du DOM/la gestion des événements en TypeScript.

Vous pouvez découvrir la classe Document, les classes Element et NodeList, ainsi que diverses classes liées aux événements à travers des exemples de code.

YouTube Video

Classes utilisées pour la manipulation du DOM/la gestion des événements en TypeScript

Pour la manipulation du DOM et la gestion des événements en TypeScript, les interfaces du Document Object Model (DOM) sont principalement utilisées. Dans la manipulation du DOM et la gestion des événements, les classes et interfaces standard de JavaScript sont utilisées, mais en TypeScript, des informations de type leur sont ajoutées, permettant une utilisation plus sûre.

Ce qui suit décrit les classes et interfaces couramment utilisées dans la manipulation du DOM et la gestion des événements.

Classes/Interfaces principales utilisées pour la manipulation du DOM

Document

Document est un objet représentant des documents HTML ou XML. Utilisé pour accéder à l'arbre DOM ou rechercher des éléments.

Exemple de code 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Méthodes principales
  • getElementById récupère un élément avec l'attribut id spécifié.
  • querySelector récupère un élément à l'aide d'un sélecteur CSS.
  • createElement crée un nouvel élément HTML.
Explication du code
  • Ce code récupère un élément avec un attribut id en utilisant getElementById et modifie son texte. Il obtient également un élément bouton en utilisant querySelector et ajoute un écouteur d'événements de clic. Au clic, il crée un nouvel élément div avec createElement et l'ajoute au contenu principal. Des génériques et des assertions de type sont utilisés pour assurer la sécurité des types lors des opérations sur le DOM.

Element

Element est une interface qui représente des éléments HTML individuels dans le DOM. Elle est le plus couramment utilisée lors de la manipulation du DOM.

Exemple de code 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Propriétés et méthodes principales
  • La propriété innerHTML permet de définir ou d'obtenir le contenu HTML d'un élément.
  • La propriété textContent permet de définir ou d'obtenir le contenu textuel d'un élément.
  • classList est une propriété permettant de manipuler les classes, vous permettant d’ajouter, de supprimer et de basculer des classes.
  • La méthode setAttribute définit un attribut sur un élément.
Explication du code
  • Ce code montre un exemple de définition du contenu avec innerHTML et textContent pour des éléments récupérés avec querySelector, d'ajout de classes avec classList, et de définition d'attributs personnalisés avec setAttribute. Les opérations sont effectuées de manière sûre pour les types grâce aux génériques.

NodeList et HTMLCollection

NodeList et HTMLCollection représentent des collections contenant plusieurs éléments DOM. Par exemple, querySelectorAll renvoie un NodeList, et getElementsByClassName renvoie un HTMLCollection.

Exemple de code 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Ce code montre comment manipuler directement un NodeList avec forEach, et convertir une HTMLCollection en tableau pour l'itération.

Classes/Interfaces principales utilisées pour la gestion des événements

Event

Event est la classe de base pour tous les événements qui se produisent dans le DOM. Divers événements tels que les clics, les entrées et les chargements de pages étendent la classe Event.

Exemple de code 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Propriétés et méthodes principales
  • La propriété target représente l'élément (EventTarget) sur lequel l'événement s'est produit.
  • type représente le type d'événement qui s'est produit, comme click ou input.
  • La méthode preventDefault annule l'action par défaut de l'événement.
Explication du code
  • Ce code montre comment ajouter un écouteur d'événement submit à un formulaire. target fait référence à l'élément formulaire où l'événement s'est produit, et type indique le type d'événement (dans ce cas, "submit"). En appelant la méthode preventDefault, vous pouvez désactiver les comportements par défaut de soumission du formulaire tels que la navigation ou le rechargement de la page. À la place, un processus personnalisé (l’enregistrement d’une sortie) est exécuté ici.

MouseEvent

MouseEvent représente les événements liés aux opérations de la souris. Les événements de la souris comme click et mousemove utilisent cette classe.

Exemple de code 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Ce code est un exemple d'utilisation de MouseEvent pour afficher les coordonnées de la souris.
Propriétés principales
  • clientX est la coordonnée X du pointeur de la souris sur la page.
  • clientY est la coordonnée Y du pointeur de la souris sur la page.
  • button indique quel bouton de la souris a été pressé. 0 est le bouton gauche, 1 est le bouton du milieu et 2 est le bouton droit.

KeyboardEvent

KeyboardEvent représente les événements liés aux opérations du clavier. Les événements keydown et keyup appartiennent à cette catégorie.

Exemple de code 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Propriétés principales
  • key est le nom de la touche pressée, comme Enter ou a.
  • code est le code correspondant à une touche du clavier.
  • altKey, ctrlKey et shiftKey sont des propriétés qui indiquent si la touche Alt, Ctrl ou Shift a été pressée.
Explication du code
  • Ce code utilise KeyboardEvent pour enregistrer le nom de la touche enfoncée (key), son code de touche correspondant (code), ainsi que si des touches modificatrices (altKey, ctrlKey, shiftKey) ont été pressées. Il effectue également une action spéciale lorsque la touche Enter est enfoncée.

FocusEvent

FocusEvent concerne les événements de gain ou de perte de focus. Les événements focus et blur appartiennent à cette catégorie.

Exemple de code 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Ce code est un exemple d'utilisation de FocusEvent pour détecter et afficher lorsqu'un champ de saisie obtient ou perd le focus.

Typage en TypeScript

Lors de l'utilisation de TypeScript, la vérification des types dans la manipulation du DOM et la gestion des événements est améliorée. Voici des exemples de manipulation du DOM et de gestion des événements type-safe en TypeScript.

Écouteurs d'événements typés

Lors de l'ajout d'écouteurs d'événements, spécifier le type de l'événement permet une vérification des types et empêche l'accès à des propriétés incorrectes.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Ce code est un exemple d'utilisation d'un écouteur d'événement typé pour gérer les événements de saisie et obtenir de manière sécurisée la valeur actuelle d'un champ de saisie.

Gestion générique des événements

En utilisant des génériques en TypeScript, vous pouvez effectuer une gestion générique des événements prenant en charge différents types d'événements.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Ce code est un exemple de gestionnaire d'événements générique utilisant des générics, qui affiche le type d'événement et le nom de la balise de l'élément cible.

Résumé

En TypeScript, les types sont appliqués aux API DOM standard lors de la manipulation du DOM et de la gestion des événements, améliorant ainsi la sécurité et la lisibilité du code. En utilisant des classes comme Document et Element, ainsi que des classes liées aux événements comme Event, MouseEvent et KeyboardEvent, un développement type-safe est possible. De plus, utiliser querySelector<T>() ou HTMLCollectionOf<T> permet de manipuler le DOM en toute sécurité typée.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Manipulation du DOM en TypeScriptShadow DOM dans TypeScript