Skip to main content

Le DOM : Ta porte d'entrée vers l'Intéractivité

Choisissez votre classe

Le DOM, ou Document Object Model, est l’interface qui te permet de manipuler ta page web avec JavaScript. Imagine que ta page web est comme un arbre généalogique géant, où chaque élément HTML (titres, paragraphes, images, etc.) est une branche. Le DOM te donne les outils pour grimper cet arbre, trouver les éléments que tu veux, et les modifier à ta guise. Grâce au DOM, tu peux rendre ta page web interactive, dynamique, et bien plus fun pour les utilisateurs.

Comment le DOM représente ta page web​

Quand le navigateur charge ta page web, il transforme ton fichier HTML en une structure hiérarchique appelée DOM. Chaque élément HTML devient un “nœud” dans cet arbre. Par exemple, la balise <html> est le nœud racine, qui contient <head> et <body>, qui à leur tour contiennent d’autres nœuds comme <h1>, <p>, etc.

<!DOCTYPE html>
<html>
  <head>
    <title>Ma Page Web</title>
  </head>
  <body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est un paragraphe.</p>
    <p>Ceci est un autre paragraphe.</p>
  </body>
</html>
HTML
├── HEAD
│   └── TITLE
└── BODY
    ├── H1
    └── P
        └── P
Pourquoi c’est important ?

Le DOM est la passerelle entre le HTML statique et le JavaScript dynamique. Il te permet de parcourir, sélectionner, et manipuler chaque élément de ta page web de manière fluide et flexible.

Sélectionner des Éléments dans le DOM​

Pour interagir avec les éléments HTML via JavaScript, tu dois d’abord les sélectionner. Il existe plusieurs méthodes pour cela, chacune ayant ses avantages en fonction de ce que tu veux faire.

getElementById :​

Cette méthode te permet de sélectionner un élément par son ID unique.

let titre = document.getElementById("mon-titre");

Exemple HTML :

<h1 id="mon-titre">Bienvenue</h1>

getElementsByTagName :​

Cette méthode sélectionne tous les éléments d’un certain type de balise.

let paragraphes = document.getElementsByTagName("p");

exemple HTML :

<p>Paragraphe 1</p>
<p>Paragraphe 2</p>

querySelector et querySelectorAll :​

Ces deux méthodes sont super flexibles et te permettent de sélectionner des éléments en utilisant des sélecteurs CSS.

let titre = document.querySelector(".classe"); // Sélectionne le premier élément avec cette classe
let tousLesParagraphes = document.querySelectorAll("p"); // Sélectionne tous les paragraphes
Pourquoi c’est cool ?

Ces méthodes te donnent la liberté de cibler précisément les éléments que tu veux manipuler. Que tu aies besoin de sélectionner un seul élément ou une collection entière, JavaScript a une solution adaptée.

Modifier le Contenu et les Styles des Éléments​

Une fois que tu as sélectionné un élément, tu peux le modifier en temps réel. JavaScript te permet de changer le texte, d’ajouter ou de supprimer des classes CSS, et même de modifier directement les styles.

Changer le texte avec textContent :​

Cette propriété te permet de modifier le texte à l’intérieur d’un élément.

let titre = document.getElementById("mon-titre");
titre.textContent = "Nouveau Titre";

Changer le HTML avec innerHTML :​

Si tu veux insérer du HTML directement dans un élément, utilise innerHTML.

let contenu = document.getElementById("contenu");
contenu.innerHTML = "<strong>Texte en gras</strong>";

Modifier les styles avec style :​

Tu peux changer les styles CSS directement depuis JavaScript en accédant à la propriété style.

let titre = document.getElementById("mon-titre");
titre.style.color = "blue";
titre.style.fontSize = "24px";

Ajouter ou supprimer des classes avec classList :​

classList te permet de gérer les classes CSS d’un élément de manière dynamique.

let bouton = document.querySelector(".btn");
bouton.classList.add("active"); // Ajoute une classe
bouton.classList.remove("active"); // Supprime une classe
Pourquoi c’est pratique ?

Ces outils te permettent de créer des pages web réactives où le contenu et l’apparence peuvent changer en fonction des actions de l’utilisateur. C’est ce qui donne vie à ta page web !

Manipuler les Événements : Réagir aux Actions des Utilisateurs​

Les événements en JavaScript sont des actions déclenchées par l’utilisateur, comme cliquer sur un bouton, taper du texte, ou déplacer la souris. Avec JavaScript, tu peux écouter ces événements et y réagir pour rendre ta page interactive.

Écouter un clic avec addEventListener :​

addEventListener est la méthode la plus courante pour gérer les événements. Elle te permet de spécifier quel événement tu veux écouter et quelle fonction exécuter en réponse.

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

Exemple HTML :

<button id="mon-bouton">Cliquez-moi</button>

Gérer d’autres types d’événements :​

Il existe de nombreux types d’événements que tu peux écouter : mouseover pour détecter quand la souris passe sur un élément, keydown pour capturer la frappe d’une touche, et bien plus encore.

let champTexte = document.getElementById("champ-texte");
champTexte.addEventListener("keydown", function(event) {
    console.log("Touche pressée : " + event.key);
});
Pourquoi c’est puissant ?

Les événements te permettent de rendre ta page web interactive. C’est ce qui fait que l’utilisateur peut interagir avec ta page, que ce soit pour envoyer un formulaire, naviguer dans un menu, ou déclencher des animations.

Créer et Manipuler des Éléments Dynamiquement​

Une des choses les plus cool avec JavaScript, c’est que tu peux créer de nouveaux éléments à la volée, les insérer dans le DOM, ou supprimer des éléments existants.

Créer un nouvel élément :​

Utilise createElement pour créer un nouvel élément HTML.

let nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Ceci est un nouveau paragraphe.";

Ajouter un élément au DOM :​

Une fois que tu as créé un élément, tu peux l’ajouter au DOM avec appendChild.

document.body.appendChild(nouveauParagraphe);

Supprimer un élément du DOM :​

Si tu veux retirer un élément, utilise simplement la méthode remove.

let elementASupprimer = document.getElementById("mon-paragraphe");
elementASupprimer.remove();
Pourquoi c’est génial ?

Avec la manipulation dynamique du DOM, tu peux créer des applications web très réactives où le contenu s’adapte en temps réel aux actions de l’utilisateur. C’est l’une des clés pour construire des interfaces utilisateur modernes et engageantes.

Conclusion :​

Le DOM est au cœur de l’interactivité sur le web. En apprenant à le manipuler avec JavaScript, tu ouvres la porte à un monde de possibilités où tu peux transformer des pages web statiques en expériences dynamiques et engageantes. Que tu veuilles ajouter de simples effets ou construire des applications web complètes, le DOM est ton meilleur allié. Prêt à commencer ? Le monde de l’interactivité n’attend que toi ! 🚀