Manipulation du DOM

Le DOM (Document Object Model) est une interface de programmation pour les documents HTML et XML. Il représente la page de sorte que les programmes puissent changer la structure, le style et le contenu du document. La manipulation du DOM est une compétence essentielle pour tout développeur front-end, car elle permet de créer des pages web dynamiques et interactives.

Sélection d'éléments

Pour manipuler des éléments dans le DOM, vous devez d'abord les sélectionner. JavaScript offre plusieurs méthodes pour sélectionner des éléments :

• document.getElementById : Sélectionne un élément par son identifiant unique.

  let element = document.getElementById('monId');
  

   

• document.querySelector : Sélectionne le premier élément qui correspond à un sélecteur CSS spécifié.

  let element = document.querySelector('.maClasse');
  

• document.querySelectorAll : Sélectionne tous les éléments qui correspondent à un sélecteur CSS spécifié et retourne une NodeList.

  let elements = document.querySelectorAll('div');
  

   

Modification du contenu et des styles des éléments

Une fois que vous avez sélectionné un élément, vous pouvez modifier son contenu et ses styles :

• Modification du contenu : Vous pouvez changer le contenu texte ou HTML d'un élément en utilisant les propriétés textContent ou innerHTML.

  let element = document.getElementById('monId');
  element.textContent = 'Nouveau texte'; // Change le texte
  element.innerHTML = '<strong>Nouveau HTML</strong>'; // Change le HTML
  

   

• Modification des styles : Vous pouvez modifier les styles CSS d'un élément en utilisant la propriété style.

  let element = document.getElementById('monId');
  element.style.color = 'blue'; // Change la couleur du texte
  element.style.backgroundColor = '#f0f0f0'; // Change la couleur de fond
  

   

Gestion des événements

Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez, comme un clic de souris ou une soumission de formulaire. JavaScript permet de gérer ces événements pour rendre les pages web interactives.

• addEventListener : Cette méthode est utilisée pour attacher un gestionnaire d'événements à un élément spécifique. Vous pouvez écouter divers types d'événements, comme click, submit, mouseover, etc.

  let bouton = document.getElementById('monBouton');
  bouton.addEventListener('click', function() {
      alert('Bouton cliqué !');
  });
  

• Événements courants :

  • click : Se produit lorsque l'utilisateur clique sur un élément.

    element.addEventListener('click', function() {
        console.log('Élément cliqué !');
    });
    

  • submit : Se produit lorsque l'utilisateur soumet un formulaire.

    let formulaire = document.getElementById('monFormulaire');
    formulaire.addEventListener('submit', function(event) {
        event.preventDefault(); // Empêche la soumission par défaut du formulaire
        console.log('Formulaire soumis !');
    });
    

  • mouseover : Se produit lorsque le pointeur de la souris est déplacé sur un élément.

    element.addEventListener('mouseover', function() {
        console.log('Souris sur l\'élément !');
    });
    

En utilisant ces techniques de manipulation du DOM, vous pouvez créer des pages web dynamiques qui répondent aux actions de l'utilisateur et offrent une expérience utilisateur riche et interactive. La manipulation du DOM est une compétence fondamentale pour le développement front-end, et maîtriser ces concepts vous permettra de créer des applications web plus avancées et réactives.