JavaScript et le DOM | Tutoriel JavaScript W3Docs

Info

Nous avons une section complète dédiée au DOM JavaScript. Vous pouvez l'explorer pour des exemples et des explications détaillées.

Introduction à JavaScript et au DOM

JavaScript est le langage de script qui donne vie aux pages web. Le Document Object Model (DOM) est le pont qui lui permet de le faire : lorsqu'un navigateur charge un document HTML, il analyse le balisage et le transforme en un arbre d'objets vivant, en mémoire. JavaScript lit et écrit cet arbre, et le navigateur repeint instantanément la page pour refléter les changements. C'est ainsi qu'un document statique devient interactif — les boutons réagissent, le contenu se met à jour et les styles changent sans rechargement.

Cette page couvre l'essentiel : comment le DOM est structuré, comment sélectionner des éléments, comment modifier leur contenu et leurs styles, et comment répondre aux événements utilisateur. Chaque sujet renvoie à un chapitre plus approfondi pour ceux qui souhaitent en savoir davantage.

Comprendre le DOM

Le DOM est une représentation structurée, arborescente de votre document HTML. Chaque balise, attribut et morceau de texte devient un nœud — un objet que JavaScript peut lire et modifier. Comme l'arbre est vivant, modifier un nœud change immédiatement ce que voit l'utilisateur.

Il est utile de distinguer trois termes qui prêtent facilement à confusion :

DOM — le modèle objet que le navigateur construit à partir de votre HTML. Ce n'est pas le code source HTML ; c'est la version analysée et normalisée par le navigateur.
document — l'objet global qui constitue le point d'entrée vers l'arbre DOM. Toute sélection commence ici (ou à partir d'un autre élément).
Node — un point unique dans l'arbre. Les éléments (<div>, <p>), les textes et les commentaires sont tous des nœuds ; les nœuds d'élément sont ceux avec lesquels vous travaillez habituellement.

Pour un traitement plus complet des types de nœuds et de la forme de l'arbre, consultez Comprendre les nœuds DOM et Parcourir le DOM.

Naviguer dans l'arbre DOM

JavaScript fournit plusieurs méthodes pour trouver des éléments dans l'arbre afin de pouvoir agir dessus.

L'arbre ci-dessous possède une racine document, un élément <html> avec des enfants <head> et <body>, et des nœuds texte à l'intérieur des titres et des paragraphes :

<!DOCTYPE html>
<html>
  <head>
    <title>Text</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>

Essayez vous-même »

Méthodes de sélection principales

document.getElementById() — retourne l'élément unique portant cet id, ou null s'il n'existe pas.
document.getElementsByClassName() — retourne une HTMLCollection vivante des éléments portant la classe.
document.getElementsByTagName() — retourne une HTMLCollection vivante des éléments portant la balise.
document.querySelector() — retourne le premier élément correspondant à n'importe quel sélecteur CSS, ou null.
document.querySelectorAll() — retourne une NodeList statique de tous les éléments correspondants.

Laquelle utiliser ? Dans le code moderne, querySelector et querySelectorAll couvrent presque tous les cas, car ils acceptent la syntaxe complète des sélecteurs CSS (#id, .class, div > p, [type="text"]). Recourez à getElementById uniquement lorsque vous souhaitez la recherche la plus rapide possible par un id connu.

Deux distinctions comptent en pratique :

Vivant vs. statique. Une HTMLCollection vivante (issue de getElementsBy*) se met à jour automatiquement quand le DOM change ; une NodeList statique (issue de querySelectorAll) est un instantané pris au moment de l'appel.
Itération. Une NodeList supporte directement forEach ; une HTMLCollection ne le fait pas, il faut donc la convertir d'abord avec Array.from(collection).

Pour en savoir plus, consultez Sélectionner des éléments DOM.

Manipuler des éléments DOM

Une fois que vous avez une référence à un élément, vous pouvez modifier son contenu, ses attributs et son apparence — et la page se met à jour instantanément.

Opérations courantes

Modifier le contenu : utilisez element.innerHTML ou element.textContent.
Modifier les styles : accédez à la propriété element.style.
Créer des éléments : utilisez document.createElement().
Ajouter des éléments : utilisez parentElement.appendChild(newElement).
Supprimer des éléments : utilisez parentElement.removeChild(existingElement).

Avertissement

innerHTML analyse sa chaîne comme du HTML, donc insérer une entrée non fiable ouvre une faille XSS. Utilisez textContent chaque fois que vous insérez du texte brut — c'est à la fois plus sûr et plus rapide.

Consultez Manipulation du DOM et Travailler avec les styles dans le DOM pour une couverture plus approfondie.

Gestion des événements en JavaScript

Un événement est quelque chose qui se produit dans la page — un clic, une pression de touche, la soumission d'un formulaire, le chargement complet de la page. JavaScript peut enregistrer un écouteur qui exécute une fonction chaque fois qu'un événement donné se déclenche sur un élément donné.

Syntaxe de l'écouteur d'événements

element.addEventListener('event', functionToCall);

Le premier argument est le nom de l'événement (sans le préfixe on — c'est 'click', pas 'onclick'). Le second est le gestionnaire, la fonction que le navigateur appelle lorsque l'événement se produit.

Événements clés

Événements de clic : déclenchés par les clics de l'utilisateur.
Événements de chargement : déclenchés quand les ressources sont chargées.
Événements de saisie : se produisent quand les utilisateurs interagissent avec des champs de formulaire.

Exemple de gestion d'événement

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>
</body>
</html>

Essayez vous-même »

Pour un aperçu plus large du modèle d'événements — la propagation, l'objet événement et la suppression des écouteurs — lisez Introduction aux événements du navigateur et Gestion des événements dans le DOM.

Manipulations DOM avancées

Au-delà des modifications basiques, JavaScript prend en charge des opérations plus complexes comme le clonage de nœuds, la gestion des formulaires et la bascule des classes CSS.

Techniques

Cloner des nœuds — element.cloneNode(true) copie un élément et ses descendants (false copie uniquement l'élément lui-même).
Gestion des formulaires — lire input.value, réagir à submit, et valider avant l'envoi.
Manipuler les classes CSS — element.classList.add(), .remove() et .toggle() sont plus propres que d'écraser className.

L'API classList est la façon idiomatique d'activer et désactiver des styles. Cet extrait exécutable montre la logique que suit toggle :

// classList.toggle removes a class if present, adds it if absent.
// Here we model that behaviour with a plain Set to show the result.
const classes = new Set(['box']);

function toggle(name) {
  if (classes.has(name)) {
    classes.delete(name);
  } else {
    classes.add(name);
  }
  return classes.has(name);
}

console.log(toggle('active')); // true  (added)
console.log(toggle('active')); // false (removed)
console.log([...classes]);     // [ 'box' ]

JavaScript et DOM : bonnes pratiques

Pour utiliser le DOM efficacement, gardez ces points à l'esprit :

Minimisez les accès au DOM. Lire et écrire dans le DOM est bien plus lent que travailler avec des valeurs JavaScript. Mettez en cache les références et groupez vos modifications plutôt que de toucher au DOM dans une boucle serrée.
Utilisez la délégation d'événements. Plutôt qu'un écouteur par enfant, attachez un seul écouteur au parent et inspectez event.target. Cela gère gratuitement les enfants ajoutés dynamiquement et consomme moins de mémoire.
Comprenez le reflow et le repaint. Un reflow recalcule la mise en page ; un repaint redessine les pixels. Les deux sont coûteux, donc regroupez les écritures de styles et préférez DocumentFragment pour les insertions en masse. Consultez Optimisation des performances DOM.

Exemple de délégation d'événements

Plutôt que de lier un gestionnaire à chaque <li>, liez-en un seul à la liste et lisez l'élément sur lequel l'utilisateur a cliqué :

document.getElementById('list').addEventListener('click', function (event) {
  // event.target is the actual element the user clicked.
  if (event.target.tagName === 'LI') {
    console.log('You clicked:', event.target.textContent);
  }
});

JavaScript et DOM : exemples de code

Modifier le contenu

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="content">Original Content</div>
    <script>
        document.getElementById('content').innerHTML = 'Updated Content';
    </script>
</body>
</html>

Essayez vous-même »

Ajouter de nouveaux éléments

<!DOCTYPE html>
<html>
<head>
    <title>Add Elements</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'New Paragraph';
        document.getElementById('container').appendChild(newElement);
    </script>
</body>
</html>

Essayez vous-même »

N'oubliez pas que maîtriser JavaScript et le DOM est un apprentissage continu. Continuez à expérimenter, à construire et à affiner vos compétences pour devenir un développeur JavaScript accompli.

Practice

Pratique

Quel est le rôle de JavaScript avec le Document Object Model (DOM) ?

JavaScript est utilisé pour appliquer des styles CSS au DOM.JavaScript peut manipuler le DOM pour ajouter, modifier ou supprimer des éléments et attributs HTML.JavaScript est utilisé pour stocker et récupérer des données dans le DOM.JavaScript peut modifier tous les éléments HTML de la page via le DOM.JavaScript est utilisé pour gérer les événements sur les éléments HTML.JavaScript ne peut pas modifier le contenu des éléments HTML.