Modification de la DOM

Introduction

Lorsque nous naviguons sur Internet, nous interagissons constamment avec des pages web. Que ce soit pour remplir un formulaire, cliquer sur un bouton ou afficher du contenu dynamique, toutes ces actions sont rendues possibles grâce à la manipulation de la DOM (Document Object Model).

La DOM est une représentation hiérarchique des éléments HTML d'une page web. Elle permet de structurer et d'organiser les éléments de la page de manière à ce qu'ils puissent être facilement manipulés et modifiés à l'aide de JavaScript.

Dans ce chapitre, nous allons explorer les différents aspects de la manipulation de la DOM. Nous apprendrons comment modifier le contenu des éléments de la DOM, leurs attributs, comment ajouter ou supprimer des éléments, et comment réagir aux événements déclenchés par l'utilisateur.

La manipulation de la DOM est une compétence essentielle pour tout développeur web, car elle permet de créer des pages web interactives et dynamiques. Que vous souhaitiez créer des animations, mettre à jour le contenu d'une page en temps réel ou réagir aux actions de l'utilisateur, la manipulation de la DOM est la clé pour y parvenir.

Modification du contenu des éléments

Maintenant que nous avons appris à sélectionner des éléments dans la DOM, il est temps de passer à l'étape suivante : la modification du contenu de ces éléments. JavaScript offre plusieurs méthodes et propriétés pour accomplir cette tâche.

Modification du contenu textuel

La manière la plus simple de modifier le contenu textuel d'un élément est d'utiliser la propriété textContent. Cette propriété permet de récupérer ou de définir le texte contenu à l'intérieur d'un élément.

// Récupérer le contenu textuel d'un élément
const texte = element.textContent;

// Définir le contenu textuel d'un élément
element.textContent = "Nouveau contenu";

Modification du contenu HTML

Si vous souhaitez modifier le contenu HTML d'un élément, vous pouvez utiliser la propriété innerHTML. Cette propriété permet de récupérer ou de définir le contenu HTML à l'intérieur d'un élément.

// Récupérer le contenu HTML d'un élément
const html = element.innerHTML;

// Définir le contenu HTML d'un élément
element.innerHTML = "<p>Nouveau contenu</p>";

Il est important de noter que l'utilisation de la propriété innerHTML peut être potentiellement dangereuse si vous insérez du contenu provenant de sources non fiables. Cela peut entraîner des problèmes de sécurité tels que l'injection de code malveillant. Assurez-vous de toujours valider et filtrer les données avant de les insérer dans le contenu HTML.

Modification des attributs

En plus de modifier le contenu textuel ou HTML d'un élément, vous pouvez également modifier les attributs de cet élément. JavaScript offre plusieurs méthodes pour accomplir cette tâche.

• getAttribute(attributeName) : Cette méthode permet de récupérer la valeur d'un attribut spécifié.

const valeur = element.getAttribute('nomAttribut');

• setAttribute(attributeName, value) : Cette méthode permet de définir la valeur d'un attribut spécifié.

element.setAttribute('nomAttribut', 'nouvelleValeur');

• removeAttribute(attributeName) : Cette méthode permet de supprimer un attribut spécifié.

element.removeAttribute('nomAttribut');

Exemple pratique

Imaginons que nous avons un paragraphe avec l'ID "monParagraphe" et nous voulons le modifier en remplaçant son contenu textuel par "Bonjour, monde !" et en ajoutant une classe "important" :

const paragraphe = document.getElementById('monParagraphe');
paragraphe.textContent = "Bonjour, monde !";
paragraphe.classList.add('important');

Dans cet exemple, nous utilisons la méthode getElementById pour sélectionner l'élément avec l'ID "monParagraphe". Ensuite, nous utilisons la propriété textContent pour modifier le contenu textuel et la méthode classList.add pour ajouter une classe.

La modification du contenu des éléments est une étape essentielle lors de la manipulation de la DOM. En utilisant les méthodes et propriétés appropriées, vous pouvez facilement mettre à jour le contenu des éléments pour créer des expériences web dynamiques et interactives.

Ajout et suppression d'éléments

Maintenant que nous avons appris à sélectionner et à modifier le contenu des éléments dans la DOM, il est temps d'explorer comment ajouter de nouveaux éléments ou supprimer des éléments existants.

Ajout d'éléments

Pour ajouter de nouveaux éléments dans la DOM, nous pouvons utiliser les méthodes suivantes :

• createElement(tagName) : Cette méthode permet de créer un nouvel élément avec la balise spécifiée.

const nouvelElement = document.createElement('div');

• appendChild(element) : Cette méthode permet d'ajouter un nouvel élément en tant qu'enfant d'un autre élément existant.

const parent = document.getElementById('parentElement');
parent.appendChild(nouvelElement);

• insertBefore(newElement, referenceElement) : Cette méthode permet d'insérer un nouvel élément avant un autre élément existant.

const referenceElement = document.getElementById('referenceElement');
parent.insertBefore(nouvelElement, referenceElement);

Suppression d'éléments

Pour supprimer des éléments de la DOM, nous pouvons utiliser les méthodes suivantes :

• removeChild(element) : Cette méthode permet de supprimer un élément de la DOM en tant qu'enfant d'un autre élément existant.

const parent = document.getElementById('parentElement');
const elementASupprimer = document.getElementById('elementASupprimer');
parent.removeChild(elementASupprimer);

• remove() : Cette méthode permet de supprimer un élément de la DOM directement, sans avoir besoin de spécifier son parent.

const elementASupprimer = document.getElementById('elementASupprimer');
elementASupprimer.remove();

Exemple pratique

Imaginons que nous avons une liste non ordonnée avec l'ID "maListe" et nous voulons ajouter un nouvel élément de liste <li> avec le texte "Nouvel élément" à la fin de la liste :

const liste = document.getElementById('maListe');
const nouvelElement = document.createElement('li');
nouvelElement.textContent = "Nouvel élément";
liste.appendChild(nouvelElement);

Dans cet exemple, nous utilisons la méthode createElement pour créer un nouvel élément de liste <li> et nous définissons son contenu textuel à l'aide de la propriété textContent. Ensuite, nous utilisons la méthode appendChild pour ajouter ce nouvel élément à la fin de la liste.

La suppression d'éléments fonctionne de manière similaire. Vous pouvez utiliser les méthodes removeChild ou remove pour supprimer un élément spécifique de la DOM.

L'ajout et la suppression d'éléments sont des opérations courantes lors de la manipulation de la DOM. En utilisant les méthodes appropriées, vous pouvez facilement ajouter de nouveaux éléments ou supprimer des éléments existants pour modifier la structure et le contenu de votre page web.

Gestion des événements

Lorsque nous interagissons avec une page web, de nombreux événements peuvent se produire, tels que des clics de souris, des pressions de touches ou des mouvements de la souris. La gestion des événements dans la DOM nous permet de détecter et de réagir à ces événements en exécutant du code JavaScript spécifique.

Ajout de gestionnaires d'événements

Pour ajouter un gestionnaire d'événements à un élément dans la DOM, nous utilisons la méthode addEventListener. Cette méthode prend deux arguments : le type d'événement à écouter et la fonction de rappel qui sera exécutée lorsque l'événement se produit.

element.addEventListener('click', function() {
  // Code à exécuter lorsque l'événement click se produit
});

Dans cet exemple, nous ajoutons un gestionnaire d'événements pour l'événement "click" à l'élément spécifié. Lorsque l'utilisateur clique sur cet élément, la fonction de rappel sera exécutée.

Suppression de gestionnaires d'événements

Si vous souhaitez supprimer un gestionnaire d'événements d'un élément, vous pouvez utiliser la méthode removeEventListener. Cette méthode prend les mêmes arguments que addEventListener : le type d'événement et la fonction de rappel. Il est important de noter que la fonction de rappel doit être exactement la même que celle utilisée lors de l'ajout du gestionnaire d'événements.

element.removeEventListener('click', fonctionDeRappel);

Dans cet exemple, nous supprimons le gestionnaire d'événements "click" de l'élément spécifié en utilisant la fonction de rappel spécifiée.

Exemple pratique

Imaginons que nous avons un bouton avec l'ID "monBouton" et nous voulons afficher une alerte lorsque l'utilisateur clique dessus :

const bouton = document.getElementById('monBouton');

function afficherAlerte() {
  alert("Bouton cliqué !");
}

bouton.addEventListener('click', afficherAlerte);

Dans cet exemple, nous définissons une fonction afficherAlerte qui affiche une alerte avec le message "Bouton cliqué !". Ensuite, nous ajoutons un gestionnaire d'événements "click" au bouton en utilisant la méthode addEventListener et en spécifiant la fonction afficherAlerte comme fonction de rappel.

La gestion des événements est essentielle pour rendre une page web interactive et réactive aux actions de l'utilisateur. En utilisant les gestionnaires d'événements, vous pouvez créer des fonctionnalités interactives telles que des boutons cliquables, des formulaires réactifs et bien plus encore.

Animation et transition

L'animation et la transition sont des techniques puissantes pour ajouter du mouvement et des effets visuels à votre page web. La manipulation de la DOM permet de créer des animations et des transitions fluides en modifiant les propriétés des éléments HTML au fil du temps.

Utilisation des styles CSS pour l'animation et la transition

Pour créer des animations et des transitions, nous utilisons les propriétés CSS spécifiques. Ces propriétés permettent de définir les changements de style qui se produiront progressivement sur les éléments.

• transition : Cette propriété permet de définir la durée, le délai et la fonction de transition pour une ou plusieurs propriétés CSS. Par exemple, vous pouvez définir une transition de 2 secondes pour la propriété opacity :

.element {
  transition: opacity 2s;
}

• animation : Cette propriété permet de définir une animation en spécifiant les étapes clés et les propriétés CSS à animer. Par exemple, vous pouvez créer une animation qui fait tourner un élément de 0 à 360 degrés :

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element {
  animation: rotation 2s infinite;
}

Dans cet exemple, nous définissons une animation nommée "rotation" avec deux étapes clés : "from" (de 0 degré) et "to" (à 360 degrés). Ensuite, nous appliquons cette animation à l'élément avec la classe "element" pendant 2 secondes et en boucle infinie.

Utilisation de JavaScript pour contrôler les animations

JavaScript permet également de contrôler les animations en modifiant les propriétés CSS des éléments de manière dynamique. Vous pouvez utiliser les méthodes suivantes pour manipuler les styles CSS :

• element.style.property = value : Cette méthode permet de modifier une propriété CSS spécifique de l'élément.

const element = document.getElementById('monElement');
element.style.opacity = 0.5;

• element.classList.add(className) : Cette méthode permet d'ajouter une classe CSS à l'élément.

const element = document.getElementById('monElement');
element.classList.add('nouvelleClasse');

• element.classList.remove(className) : Cette méthode permet de supprimer une classe CSS de l'élément.

const element = document.getElementById('monElement');
element.classList.remove('ancienneClasse');

En utilisant ces méthodes, vous pouvez modifier les propriétés CSS des éléments pour créer des animations personnalisées et réactives.

Exemple pratique

Imaginons que nous avons un bouton avec l'ID "monBouton" et nous voulons créer une animation qui fait changer la couleur du bouton de rouge à bleu lorsque l'utilisateur clique dessus :

const bouton = document.getElementById('monBouton');

function changerCouleur() {
  bouton.style.backgroundColor = "blue";
}

bouton.addEventListener('click', changerCouleur);

Dans cet exemple, nous définissons une fonction changerCouleur qui modifie la propriété backgroundColor du bouton pour la changer en bleu. Ensuite, nous ajoutons un gestionnaire d'événements "click" au bouton pour appeler cette fonction lorsque l'utilisateur clique dessus.

L'animation et la transition permettent d'ajouter du dynamisme et de l'interactivité à votre page web. En combinant la manipulation de la DOM avec les propriétés CSS d'animation et de transition, vous pouvez créer des effets visuels impressionnants et rendre votre site web plus attrayant pour les utilisateurs.

Exemples pratiques

Maintenant que nous avons exploré les concepts de base de la manipulation de la DOM, il est temps de passer à des exemples pratiques d'utilisation de ces concepts pour créer des fonctionnalités interactives dans une page web.

Exemple 1 : Validation d'un formulaire

Supposons que nous ayons un formulaire avec des champs de saisie et un bouton de soumission. Nous voulons ajouter une fonctionnalité qui valide les champs avant de permettre à l'utilisateur de soumettre le formulaire.

Voici comment nous pouvons procéder :

1. Sélectionnez les éléments du formulaire à l'aide des méthodes de sélection de la DOM.

const formulaire = document.getElementById('monFormulaire');
const champNom = document.getElementById('champNom');
const champEmail = document.getElementById('champEmail');
const boutonSoumettre = document.getElementById('boutonSoumettre');

1. Ajoutez un gestionnaire d'événements "submit" au formulaire pour écouter l'événement de soumission.

formulaire.addEventListener('submit', function(event) {
  event.preventDefault(); // Empêche le comportement par défaut du formulaire

  // Vérifiez si les champs sont valides
  if (champNom.value === '' || champEmail.value === '') {
    alert('Veuillez remplir tous les champs');
  } else {
    // Soumettez le formulaire
    formulaire.submit();
  }
});

Dans cet exemple, nous utilisons la méthode addEventListener pour ajouter un gestionnaire d'événements "submit" au formulaire. Lorsque l'utilisateur tente de soumettre le formulaire, la fonction de rappel est exécutée. Nous vérifions si les champs de saisie sont vides et affichons une alerte si c'est le cas. Sinon, nous soumettons le formulaire en appelant la méthode submit().

Exemple 2 : Affichage dynamique des éléments

Supposons que nous ayons une liste d'articles et nous voulons afficher les détails d'un article lorsque l'utilisateur clique sur son titre. Voici comment nous pouvons procéder :

1. Sélectionnez les éléments de la liste et les détails de l'article à l'aide des méthodes de sélection de la DOM.

const listeArticles = document.getElementById('listeArticles');
const detailsArticle = document.getElementById('detailsArticle');

1. Ajoutez un gestionnaire d'événements "click" à chaque titre d'article pour écouter l'événement de clic.

const titresArticles = listeArticles.getElementsByClassName('titreArticle');

for (let i = 0; i < titresArticles.length; i++) {
  const titreArticle = titresArticles[i];
  
  titreArticle.addEventListener('click', function() {
    const contenuArticle = this.dataset.contenu;
    detailsArticle.textContent = contenuArticle;
  });
}

Dans cet exemple, nous utilisons la méthode getElementsByClassName pour sélectionner tous les titres d'article dans la liste. Ensuite, nous utilisons une boucle pour ajouter un gestionnaire d'événements "click" à chaque titre d'article. Lorsque l'utilisateur clique sur un titre d'article, la fonction de rappel est exécutée. Nous utilisons la propriété dataset pour récupérer le contenu de l'article à partir de l'attribut data-contenu et nous l'affichons dans les détails de l'article.

Ces exemples pratiques illustrent comment la manipulation de la DOM peut être utilisée pour créer des fonctionnalités interactives dans une page web. Que ce soit pour la validation de formulaires, l'affichage dynamique des éléments ou d'autres fonctionnalités, la manipulation de la DOM est un outil puissant pour rendre votre site web plus interactif et réactif aux actions de l'utilisateur.

Sources

• Introduction to the DOM - MDN Web Docs : Cette ressource de MDN Web Docs fournit une introduction complète à la DOM (Document Object Model). Elle explique les concepts de base de la DOM et comment interagir avec les éléments HTML à l'aide de JavaScript. (Site : MDN Web Docs)

• DOM Manipulation - W3Schools : Ce tutoriel de W3Schools couvre en détail la manipulation de la DOM avec JavaScript. Il explique comment sélectionner des éléments, modifier leur contenu, ajouter ou supprimer des éléments, et gérer les événements. (Site : W3Schools)

• DOM Events - MDN Web Docs : Cette ressource de MDN Web Docs fournit une documentation complète sur les événements DOM. Elle explique les différents types d'événements, comment les écouter et y réagir avec JavaScript, et fournit des exemples pratiques. (Site : MDN Web Docs)

• JavaScript and the DOM - MDN Web Docs : Ce guide de MDN Web Docs explique comment utiliser JavaScript pour manipuler la DOM. Il couvre les concepts de base, les méthodes de sélection d'éléments, la modification du contenu et des attributs, l'ajout et la suppression d'éléments, et la gestion des événements. (Site : MDN Web Docs)