Articles
Introduction à TypeScript
Manipulation du DOM en TypeScript

Manipulation du DOM en TypeScript

Cet article explique la manipulation du DOM en TypeScript.

Vous apprendrez à manipuler les éléments du DOM, et à ajouter ou supprimer des éléments de l’arbre DOM à travers des exemples de code.

YouTube Video

Manipulation du DOM en TypeScript

La manipulation du DOM en TypeScript se fait de manière similaire à JavaScript, mais TypeScript offre une vérification de type, rendant les opérations plus sûres. Le DOM (Document Object Model) est un modèle d’objet utilisé pour manipuler les documents HTML et XML de façon programmée. Il permet d’accéder aux pages affichées dans le navigateur, d’ajouter ou de supprimer des éléments, ou de modifier des styles.

Présentons les méthodes de base pour manipuler le DOM en utilisant TypeScript.

Obtenir des éléments du DOM

Utilisez l’objet document pour obtenir des éléments HTML. Les méthodes suivantes sont couramment utilisées :.

  1. document.getElementById document.getElementById obtient l'élément avec l'attribut ID spécifié.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById récupère l'élément avec l'ID spécifié et vous permet d'accéder à son contenu s'il existe.`.
  1. document.querySelector document.querySelector récupère le premier élément qui correspond au sélecteur CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector récupère le premier élément correspondant au sélecteur CSS spécifié et vous permet d'accéder à son contenu s'il existe.`.
  1. document.querySelectorAll document.querySelectorAll récupère tous les éléments correspondant au sélecteur CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll récupère tous les éléments correspondant au sélecteur CSS spécifié et vous permet d'accéder à leur contenu par itération.`.

Assertion de type d’élément

En TypeScript, préciser explicitement le type d’un élément permet d’utiliser des méthodes et des propriétés plus spécifiques.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Le mot-clé as est un opérateur d'assertion de type en TypeScript, utilisé pour indiquer explicitement au compilateur de traiter une valeur comme un type spécifique.
  • En TypeScript, vous pouvez utiliser des assertions de type pour traiter l'élément récupéré comme un type spécifique et accéder aux propriétés ou méthodes propres à ce type.

Manipuler le DOM

La manipulation du DOM s’effectue via les propriétés des éléments. Cela vous permet de contrôler de manière flexible les modifications de texte ou d’attributs, d’appliquer des styles et de mettre à jour le contenu affiché.

  1. Modifier le texte d’un élément

    Vous pouvez modifier le texte ou le HTML d’un élément en utilisant ses propriétés textContent ou innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Vous pouvez utiliser textContent ou innerHTML d'un élément pour changer son texte affiché ou son contenu HTML.

  1. Modifier le style d’un élément

    Vous pouvez modifier les styles en ligne en utilisant la propriété style de l’élément.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Ce code récupère un élément spécifique, change sa couleur de texte en bleu et définit la taille de la police à 20px.

  1. Modifier les attributs d’un élément

    Si vous souhaitez modifier les attributs d’un élément, utilisez setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Ce code modifie l'attribut href du premier élément lien de la page en https://example.com.

  1. Manipuler les classes d’un élément

    Pour ajouter ou supprimer des classes à un élément, utilisez la propriété classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Ce code ajoute la classe active et retire la classe inactive d'un élément spécifique.

Ajouter et supprimer des éléments du DOM

Vous pouvez également ajouter de nouveaux éléments ou supprimer ceux existants. Cela permet de modifier dynamiquement la structure de la page en réponse aux actions de l’utilisateur ou à l’état de l’application.

  1. Créer et ajouter de nouveaux éléments

    Utilisez document.createElement pour créer un nouvel élément et l’ajouter au DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Ce code crée un nouvel élément <div>, définit son texte, et l'ajoute au <body> de la page.

  1. Supprimer des éléments

    Pour supprimer un élément, utilisez les méthodes removeChild ou remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Ce code montre comment supprimer un élément enfant spécifique de son parent et comment supprimer directement l'élément lui-même.

Ajouter des événements

En TypeScript, vous pouvez ajouter des écouteurs d’événements aux éléments afin d’effectuer des actions selon les interactions de l’utilisateur.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Ce code ajoute un écouteur d'événement qui affiche un message dans la console lorsque le bouton est cliqué.
  • En utilisant addEventListener, vous pouvez écouter et gérer divers événements, tels que les clics, les mouvements de souris, et la saisie clavier.

Points à noter pour la manipulation du DOM en TypeScript

Lorsque vous manipulez le DOM avec TypeScript, prêter attention aux définitions de type des éléments et aux vérifications de null peut aider à prévenir les erreurs et vous permettre d’écrire un code robuste.

  1. Vérification de nullité

    Parce qu’un élément du DOM peut ne pas exister, il est recommandé d’effectuer une vérification de nullité avant de manipuler les éléments en TypeScript.

  2. Assertion de type explicite

    Lorsque vous agissez sur un élément spécifique (par exemple un HTMLInputElement), il est courant d’utiliser une assertion (as) pour spécifier le type et exploiter des propriétés spécifiques telles que value.

En gardant cela à l’esprit, la manipulation du DOM avec TypeScript permet d’écrire un code plus sûr et plus prévisible en combinant la flexibilité de JavaScript et la sécurité de typage de TypeScript.

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

L'objet window dans TypeScriptClasses utilisées pour la manipulation du DOM/la gestion des événements en TypeScript