Chaque fois que vous chargez une page web dans votre navigateur, un monde invisible mais essentiel s’active en arrière-plan. Ce monde, c’est le DOM, ou Document Object Model. Souvent méconnu du grand public mais fondamental pour les développeurs web, le DOM permet de manipuler dynamiquement le contenu, la structure et le style d’un site web. Que vous interagiez avec un formulaire, que vous cliquiez sur un bouton ou que vous regardiez un menu déroulant s’animer, vous utilisez les possibilités offertes par le DOM sans même vous en rendre compte.
- Le rôle du dom dans le fonctionnement des pages web
- Les principaux types de nœuds et les interactions possibles
- Le nœud document : La racine de l’arbre DOM
- Les nœuds élément : Les composants HTML
- Les nœuds texte : Le contenu lisible par l’utilisateur
- Les nœuds attribut : Les propriétés des balises
- Les nœuds commentaire : Informations invisibles pour l’utilisateur
- Les interactions possibles avec le DOM
- Les bonnes pratiques de manipulation du DOM
Le rôle du dom dans le fonctionnement des pages web
Le Document Object Model (DOM) joue un rôle central dans la manière dont les pages web sont construites, comprises et manipulées par les navigateurs modernes. Ce modèle est apparu en réponse à un besoin croissant de rendre les documents web dynamiques et interactifs. À ses débuts, le Web était essentiellement statique : les pages HTML étaient servies telles quelles au navigateur, sans interaction possible autre qu’un clic pour passer à une autre page. L’évolution vers une navigation plus fluide et interactive a commencé à la fin des années 1990. C’est dans ce contexte qu’est né le DOM, standardisé pour la première fois par le World Wide Web Consortium (W3C) sous la forme de recommandations officielles. Le DOM de niveau 1 a été publié en octobre 1998, suivi par le DOM de niveau 2 en 2000, qui a introduit la gestion des événements, des styles CSS et des espaces de noms XML. Le DOM de niveau 3, apparu en 2004, a complété la prise en charge des documents avec davantage de méthodes pour manipuler le texte, les types de données et les arbres de nœuds.
Mais avant la normalisation, chaque navigateur avait sa propre manière d’interagir avec les éléments HTML. Cela créait des incompatibilités, forçant les développeurs à écrire des scripts spécifiques pour chaque navigateur. Le DOM a été conçu pour répondre à ce problème en fournissant une API unifiée et indépendante de la plateforme ou du navigateur utilisé. Techniquement, le DOM est une représentation orientée objet de la structure logique d’un document HTML ou XML. Il ne s’agit pas du code HTML lui-même, mais d’un modèle structuré en mémoire que le navigateur construit lorsqu’il interprète une page. Ce modèle repose sur une organisation hiérarchique en forme d’arbre, appelée « arbre DOM », où chaque balise HTML devient un objet ou un « nœud ».
La structure de l’arbre commence par un objet racine, le plus souvent appelé document. À partir de ce nœud racine, des branches se développent vers d’autres objets représentant les balises <html>, <head>, <body>, etc. Ces objets sont accessibles et manipulables à l’aide de langages de script, notamment JavaScript.
document
└── html
├── head
│ └── title
└── body
├── h1
├── p
└── button
Dans ce schéma, chaque nœud représente un élément de la page. Ces nœuds peuvent contenir d’autres nœuds (appelés enfants), ce qui crée une relation hiérarchique. Le DOM permet d’accéder à ces nœuds, de les modifier, de les déplacer, ou même de les supprimer. Cela permet par exemple :
- de modifier dynamiquement un texte après le chargement initial de la page ;
- d’ajouter de nouveaux éléments HTML à la volée ;
- de répondre à une action utilisateur comme un clic, un survol ou une saisie clavier ;
- de manipuler les styles CSS appliqués à des éléments sans recharger la page.
Le DOM joue donc un rôle de médiateur entre le contenu HTML initial et l’interaction dynamique fournie par JavaScript. Il offre une manière structurée de contrôler le comportement visuel et fonctionnel d’un site web. Au fil des années, l’usage du DOM s’est renforcé avec l’arrivée de bibliothèques comme jQuery (2006), qui ont simplifié sa manipulation, puis avec les frameworks modernes comme React, Vue ou Angular. Ces technologies ne modifient plus directement le DOM, mais utilisent des représentations appelées « DOM virtuel » (Virtual DOM) pour optimiser les performances.
Les principaux types de nœuds et les interactions possibles
Le DOM, en tant que modèle d’objet représentant un document HTML ou XML, repose sur une hiérarchie de nœuds interconnectés. Chaque nœud incarne une partie spécifique du document. Contrairement à une simple lecture linéaire du code HTML, le DOM structure le contenu en mémoire pour permettre aux langages de programmation, notamment JavaScript, d’y accéder, de le modifier ou de le supprimer de manière dynamique. Comprendre les différents types de nœuds est fondamental pour exploiter tout le potentiel du DOM dans le développement web.
Le nœud document : La racine de l’arbre DOM
Le nœud document constitue le sommet absolu de l’arborescence DOM. Il est automatiquement créé par le navigateur lorsqu’un document HTML ou XML est chargé, et il est accessible à tout moment dans le code JavaScript via la variable globale document. Ce nœud représente l’intégralité de la page et fournit les interfaces nécessaires pour explorer, manipuler et générer dynamiquement les contenus de la structure DOM.
Il ne correspond pas à une balise HTML visible (comme <html> ou <body>), mais il contient toutes les informations essentielles sur le document, y compris des propriétés sur l’encodage, l’URL, le titre, et bien entendu, les nœuds enfants.
Le nœud document agit comme un point d’ancrage pour toutes les opérations DOM. Il expose de nombreuses méthodes et propriétés permettant :
- de récupérer des éléments spécifiques (par identifiant, classe, nom, sélecteur CSS, etc.) ;
- de créer de nouveaux nœuds (éléments, commentaires, fragments, textes) ;
- d’interroger des métadonnées (titre du document, encodage, URL actuelle) ;
- d’interagir avec le cycle de vie du document (état de chargement, focus, cookies, etc.).
Voici un tableau présentant quelques-unes des méthodes les plus couramment utilisées de l’objet document, accompagnées de leur description :
| Méthode | Description |
|---|---|
getElementById(id) |
Retourne l’élément avec l’attribut id correspondant. Très rapide et utile pour les sélections uniques. |
getElementsByClassName(class) |
Retourne une collection d’éléments ayant une certaine classe. Renvoie un HTMLCollection. |
getElementsByTagName(tag) |
Sélectionne tous les éléments avec une balise HTML spécifique, comme 'p' ou 'div'. |
querySelector(selector) |
Sélectionne le premier élément correspondant à un sélecteur CSS. Très flexible. |
querySelectorAll(selector) |
Retourne tous les éléments correspondant à un sélecteur CSS, sous forme de NodeList. |
createElement(tag) |
Crée un nouvel élément HTML sans l’ajouter au DOM immédiatement. |
createTextNode(text) |
Crée un nœud texte contenant la chaîne spécifiée. Utile pour insérer du texte pur. |
createComment(text) |
Génère un nœud de type commentaire que l’on peut insérer dans l’arborescence DOM. |
documentElement |
Retourne l’élément racine du document (souvent <html>). |
body |
Retourne l’élément <body> du document, utile pour y injecter dynamiquement du contenu. |
Ces méthodes sont au cœur de la manipulation DOM et sont utilisées aussi bien dans des scripts simples (ajouter un paragraphe, modifier un lien) que dans des frameworks avancés. Sans le nœud document, aucune interaction structurée avec le contenu HTML ne serait possible.
Un exemple pratique simple : ajouter un paragraphe au corps du document en JavaScript :
const paragraphe = document.createElement('p');
paragraphe.textContent = 'Texte ajouté dynamiquement via le DOM';
document.body.appendChild(paragraphe);Ce petit script illustre le rôle fondamental du nœud document : créer, manipuler et insérer des éléments dans la page. Il est donc à la base de toutes les interactions dynamiques sur le web.
Les nœuds élément : Les composants HTML
Les nœuds élément (ou Element) sont les unités fondamentales de toute page HTML dans le modèle DOM. Ils correspondent directement aux balises HTML du document source. Lors du chargement de la page, le navigateur analyse le HTML et crée pour chaque balise un objet JavaScript de type Element, avec toutes les propriétés, attributs et relations hiérarchiques correspondantes.
Par exemple, le code suivant :
<h1>Bienvenue</h1>
<div class="contenu"></div>produit deux objets DOM :
- un élément
<h1>contenant un nœud texte avec la valeur « Bienvenue » ; - un élément
<div>avec l’attributclass="contenu".
Chaque nœud élément peut contenir d’autres nœuds : des éléments enfants, des textes, ou des commentaires. Cela forme une hiérarchie arborescente où les éléments sont à la fois des conteneurs et des composants manipulables.
Ces nœuds sont les plus fréquemment utilisés dans les manipulations DOM. Les développeurs web interagissent avec eux pour modifier la structure et le contenu d’une page, ou encore pour réagir aux actions des utilisateurs (clics, survols, saisies clavier…). Voici quelques opérations typiques :
- changer dynamiquement le contenu textuel ou HTML avec
textContentouinnerHTML; - appliquer des styles CSS directement avec
element.style; - ajouter ou supprimer des classes CSS avec
classList; - gérer des événements avec
addEventListener(); - naviguer dans l’arborescence DOM via les propriétés
parentElement,children,nextElementSibling, etc.
Voici un tableau présentant les propriétés et méthodes principales disponibles sur les objets Element :
| Propriété / Méthode | Description |
|---|---|
innerHTML |
Permet de lire ou modifier le contenu HTML de l’élément, y compris les balises imbriquées. |
textContent |
Lit ou modifie uniquement le texte brut de l’élément (sans balises HTML). |
style |
Accès aux propriétés de style CSS en ligne. Exemple : element.style.color = 'blue'. |
classList |
Objet utilitaire pour ajouter, supprimer ou basculer des classes CSS. |
setAttribute(name, value) |
Ajoute ou modifie un attribut HTML (ex : href, data-id). |
getAttribute(name) |
Récupère la valeur d’un attribut donné. |
removeAttribute(name) |
Supprime un attribut de l’élément. |
addEventListener(type, callback) |
Attache un gestionnaire d’événement à l’élément (ex : clic, focus, souris, clavier). |
children |
Retourne une collection HTML des éléments enfants directs. |
parentElement |
Fournit une référence à l’élément parent dans l’arborescence DOM. |
appendChild(node) |
Ajoute un nœud enfant à la fin de l’élément. |
removeChild(node) |
Supprime un nœud enfant existant. |
replaceChild(newNode, oldNode) |
Remplace un nœud enfant par un autre. |
querySelector() |
Permet de chercher un descendant correspondant à un sélecteur CSS dans cet élément. |
Ces nombreuses propriétés rendent les nœuds élément extrêmement puissants dans le cadre du développement interactif. Ils permettent de manipuler aussi bien le contenu que l’apparence ou la structure de la page, sans recharger le navigateur ni renvoyer une nouvelle requête.
Voici un exemple simple d’ajout dynamique d’un bouton à l’intérieur d’un conteneur :
const bouton = document.createElement('button');
bouton.textContent = 'Cliquez ici';
bouton.classList.add('btn', 'btn-primary');
document.querySelector('.contenu').appendChild(bouton);Ce script crée un bouton, lui ajoute du texte, lui applique deux classes CSS, puis l’insère dans un élément de classe contenu. Ce genre d’opération illustre le rôle central des nœuds élément dans les interfaces utilisateur modernes.
Les nœuds texte : Le contenu lisible par l’utilisateur
Les nœuds texte (ou Text) représentent le contenu textuel entre les balises HTML. Par exemple, dans :
<p>Bonjour tout le monde</p>la chaîne "Bonjour tout le monde" est un nœud texte, enfant du nœud <p>. Il est possible de le manipuler directement via les propriétés textContent ou nodeValue.
Les nœuds texte sont cruciaux pour la gestion dynamique du contenu : mise à jour d’un message utilisateur, insertion d’un texte en réponse à une action, ou traduction automatique d’un paragraphe.
Les nœuds attribut : Les propriétés des balises
Les nœuds attribut représentent les propriétés associées aux balises HTML. Ils servent à enrichir les éléments d’informations complémentaires qui influencent leur comportement, leur apparence ou leur relation avec d’autres parties du document ou des scripts. Un attribut est toujours composé d’un nom (comme href, alt, id, type) et d’une valeur. Dans le code HTML, cela se traduit par des syntaxes comme :
<a href="https://exemple.com" target="_blank">Lien</a>Dans le DOM, ces attributs sont accessibles via des méthodes spécifiques. Même si les attributs ne sont plus considérés comme des nœuds à part entière dans les versions modernes du DOM (ils ne sont plus intégrés directement dans l’arborescence comme les nœuds élément ou texte), ils demeurent manipulables via l’objet Element qui les contient.
Ces manipulations sont particulièrement fréquentes dans des cas comme :
- les formulaires (désactiver un bouton, vérifier un champ requis, lire des
data-attributes) ; - la navigation (ajouter dynamiquement une URL, changer la cible d’un lien) ;
- la personnalisation (modifier des classes CSS, ajouter un identifiant unique, injecter des données).
Voici quelques exemples de manipulations classiques :
element.getAttribute('class'): lit la valeur de la classe CSS appliquée ;element.setAttribute('data-id', '123'): ajoute ou modifie un attribut personnalisé ;element.removeAttribute('disabled'): supprime un attribut spécifique, ici pour rendre un bouton à nouveau cliquable.
Le tableau suivant résume les principales méthodes et propriétés utilisées pour interagir avec les attributs dans le DOM :
| Méthode / Propriété | Description |
|---|---|
getAttribute(name) |
Retourne la valeur d’un attribut spécifié. Renvoie null s’il n’existe pas. |
setAttribute(name, value) |
Ajoute un nouvel attribut à l’élément ou met à jour sa valeur. |
removeAttribute(name) |
Supprime l’attribut de l’élément s’il est présent. |
hasAttribute(name) |
Retourne true si l’attribut existe sur l’élément, false sinon. |
attributes |
Retourne une collection nommée (NamedNodeMap) contenant tous les attributs de l’élément. |
dataset |
Accès direct aux attributs data-* sous forme d’objet. Ex : element.dataset.id. |
Les attributs peuvent aussi être liés à des propriétés DOM internes. Par exemple, element.id accède directement à l’attribut id sans utiliser getAttribute. Toutefois, il est préférable de ne pas mélanger propriétés DOM et attributs HTML quand il y a ambiguïté (notamment avec les formulaires et les éléments input).
Exemple pratique : modifier dynamiquement un lien pour y insérer une URL personnalisée et ouvrir dans un nouvel onglet :
const lien = document.querySelector('a');
lien.setAttribute('href', 'https://www.exemple.com');
lien.setAttribute('target', '_blank');
lien.textContent = 'Visitez notre site';Dans cet exemple, le lien initial est entièrement modifié côté client sans recharger la page, illustrant ainsi la souplesse offerte par la gestion des attributs via le DOM.
Les nœuds commentaire : Informations invisibles pour l’utilisateur
Les nœuds commentaire (Comment) correspondent aux commentaires HTML que les développeurs insèrent dans le code source pour y ajouter des notes, des rappels ou des indications, sans que ces éléments ne soient rendus visibles dans l’interface du navigateur. Ils sont déclarés à l’aide de la syntaxe suivante :
<!-- Ceci est un commentaire HTML -->Ces commentaires n’ont aucun impact sur le rendu visuel de la page, mais ils font partie intégrante du DOM. Le navigateur les conserve dans l’arbre DOM et leur attribue un type spécifique : Node.COMMENT_NODE, soit une valeur numérique de 8. Cela signifie qu’ils peuvent être localisés, lus, modifiés ou supprimés dynamiquement via JavaScript.
Dans la pratique, les nœuds commentaire sont rarement utilisés dans les scripts classiques. Cependant, ils peuvent s’avérer utiles dans certains contextes :
- outils d’analyse HTML (linting, parsing de modèles, moteurs de documentation automatique) ;
- systèmes de template serveur ou client où des instructions sont parfois masquées sous forme de commentaires ;
- traitements automatisés comme la génération de contenu conditionnel ou la conversion d’un HTML annoté ;
- tests ou débogage, pour observer la présence ou l’emplacement de sections de code désactivées.
Voici un exemple de script qui détecte tous les nœuds commentaire dans un document :
const commentaires = [];
const iterator = document.createNodeIterator(
document,
NodeFilter.SHOW_COMMENT,
null,
false
);
let node;
while ((node = iterator.nextNode())) {
commentaires.push(node);
}
console.log(commentaires);Ce script utilise un NodeIterator pour parcourir l’arborescence DOM à la recherche exclusive de nœuds de type commentaire. Tous les commentaires sont ensuite stockés dans un tableau JavaScript, ce qui permet de les analyser ou de les modifier.
Voici un tableau récapitulatif des propriétés et méthodes courantes associées aux nœuds de type Comment :
| Propriété / Méthode | Description |
|---|---|
nodeType |
Retourne la valeur 8, identifiant un nœud de type commentaire (Node.COMMENT_NODE). |
nodeValue |
Contient le texte du commentaire. Peut être lu ou modifié directement. |
textContent |
Équivalent à nodeValue pour ce type de nœud ; retourne le contenu du commentaire. |
parentNode |
Retourne l’élément parent dans l’arbre DOM auquel le commentaire est rattaché. |
remove() |
Supprime le commentaire de l’arbre DOM, s’il est attaché à un parent. |
cloneNode() |
Crée une copie du nœud commentaire, qui peut être insérée ailleurs. |
Un exemple d’utilisation concrète pour modifier un commentaire existant :
// Supposons qu’on ait déjà récupéré un commentaire avec nodeIterator
commentaire.nodeValue = 'Nouveau contenu du commentaire';Et pour créer un commentaire à insérer dans la page :
const monCommentaire = document.createComment('Section générée dynamiquement');
document.body.appendChild(monCommentaire);Les interactions possibles avec le DOM
Une fois les types de nœuds bien identifiés, toute la puissance du DOM se révèle dans sa capacité à manipuler dynamiquement les éléments d’une page web. Ces interactions permettent aux développeurs de rendre un site plus réactif, vivant et interactif, sans recharger la page. Grâce au DOM, JavaScript peut modifier la structure, le contenu, le style et même le comportement des éléments HTML en temps réel.
Ces manipulations sont omniprésentes dans les interfaces modernes, qu’il s’agisse de formulaires interactifs, d’animations conditionnelles, de filtres de recherche instantanés ou de contenus personnalisés affichés à la volée. Les actions les plus fréquentes consistent à :
- sélectionner un ou plusieurs éléments dans l’arborescence ;
- modifier le texte ou le contenu HTML d’un élément ;
- appliquer ou retirer des styles CSS ;
- ajouter, supprimer ou interagir avec des classes CSS ;
- gérer des événements utilisateur (clics, survols, saisies) ;
- créer, déplacer ou supprimer des éléments HTML dynamiquement.
Voici un tableau récapitulatif des principales actions possibles sur le DOM, avec leur syntaxe et une description :
| Action | Exemple / Description |
|---|---|
| Sélection par ID | document.getElementById('monId') — Sélectionne l’élément avec l’attribut id spécifié. |
| Sélection par classe ou balise | document.querySelector('.maClasse') — Récupère le premier élément correspondant au sélecteur CSS. |
| Modifier le texte | element.textContent = 'Texte mis à jour' — Remplace le contenu textuel d’un élément. |
| Insérer du HTML | element.innerHTML = '<strong>Important</strong>' — Injecte du HTML brut dans un élément. |
| Changer le style | element.style.backgroundColor = 'red' — Applique un style en ligne directement via JavaScript. |
| Ajouter une classe CSS | element.classList.add('visible') — Ajoute une classe au tableau des classes CSS de l’élément. |
| Supprimer une classe | element.classList.remove('hidden') — Retire une classe existante. |
| Basculer une classe | element.classList.toggle('actif') — Ajoute la classe si elle n’existe pas, sinon la retire. |
| Attacher un événement | element.addEventListener('click', maFonction) — Exécute une fonction lors d’une interaction utilisateur. |
| Créer un élément | document.createElement('div') — Génère un nouvel élément HTML vide, à insérer ensuite dans la page. |
| Insérer un élément | parent.appendChild(enfant) — Ajoute un élément enfant à la fin d’un parent existant. |
| Supprimer un élément | element.remove() — Supprime un élément du DOM (méthode moderne). |
Ces actions sont à la base de nombreuses fonctionnalités interactives du web moderne. Voici quelques exemples d’usages concrets :
- Menus déroulants : en ajoutant ou retirant une classe CSS (
open), on contrôle l’affichage d’un menu. - Formulaires dynamiques : les champs apparaissent ou disparaissent en fonction de la sélection de l’utilisateur.
- Notifications : des messages temporaires peuvent être créés, stylés et supprimés automatiquement.
- Filtres de recherche : les résultats sont mis à jour en temps réel selon la saisie dans un champ texte.
- Carrousels : les éléments sont créés, affichés et animés via une combinaison de DOM et de CSS.
Voici un exemple simple d’interaction complète :
// Création d’un nouveau paragraphe
const paragraphe = document.createElement('p');
paragraphe.textContent = 'Contenu ajouté dynamiquement';
paragraphe.classList.add('notification');
// Ajout au DOM
document.body.appendChild(paragraphe);
// Suppression automatique après 3 secondes
setTimeout(() => {
paragraphe.remove();
}, 3000);Dans cet exemple, le DOM est utilisé pour créer, styliser, afficher puis supprimer un élément HTML, sans recharger la page. C’est ce genre de manipulation qui permet de rendre une application web fluide, intuitive et agréable à utiliser.
Les bonnes pratiques de manipulation du DOM
Manipuler le DOM de manière performante et durable est un enjeu important dans le développement web moderne. Une mauvaise gestion peut entraîner des ralentissements, des bugs visuels, voire des comportements inattendus, en particulier dans les applications complexes ou dynamiques. Adopter des bonnes pratiques permet non seulement de préserver les performances, mais aussi de produire un code plus propre, plus lisible et plus facile à maintenir à long terme.
Voici quelques recommandations clés à suivre lorsqu’on interagit avec le DOM :
- Minimiser les accès directs au DOM : chaque lecture ou écriture dans le DOM est coûteuse en temps de traitement. Il est conseillé de stocker temporairement les éléments dans des variables, d’effectuer les modifications en mémoire, puis de les injecter ou de les réécrire en une seule opération.
- Utiliser des sélecteurs CSS modernes :
querySelectoretquerySelectorAllpermettent d’écrire des sélecteurs plus puissants et plus concis que les méthodes plus anciennes commegetElementByIdougetElementsByClassName. - Pratiquer la délégation d’événements : au lieu d’ajouter un gestionnaire d’événement à chaque élément créé dynamiquement, on l’attache à un conteneur parent et on teste la cible dans le gestionnaire. Cela réduit la consommation mémoire et évite la duplication de code.
- Éviter les modifications de style directes : appliquer plusieurs styles en ligne via
element.stylepeut entraîner du code difficile à maintenir. Il est préférable d’utiliser des classes CSS bien définies et de les activer viaclassList. - Réduire le nombre de reflows et de repaints : lorsqu’un changement structurel ou visuel affecte un élément, le navigateur peut recalculer toute la mise en page (reflow) ou redessiner l’interface (repaint). En regroupant les modifications, on évite les recalculs superflus.
- Préférer les fragments DOM pour les insertions multiples : le
DocumentFragmentpermet de construire une structure en mémoire et de l’injecter ensuite d’un seul coup dans le DOM, ce qui améliore considérablement les performances.
Le tableau suivant résume ces bonnes pratiques, accompagnées de leurs bénéfices :
| Bonne pratique | Avantage |
|---|---|
| Stocker les sélections DOM dans des variables | Évite les appels répétés au moteur DOM, améliore la lisibilité et les performances |
Utiliser querySelector() ou querySelectorAll() |
Sélection plus souple, compatible avec toute la syntaxe CSS |
| Déléguer les événements | Meilleure gestion des éléments dynamiques, réduction du nombre de gestionnaires en mémoire |
| Gérer les styles via des classes CSS | Code plus propre, séparation claire entre logique et présentation |
Utiliser un DocumentFragment pour les insertions groupées |
Améliore les performances, limite les reflows/repaints successifs |
| Limiter les lectures/écritures DOM imbriquées | Réduit les blocages de rendu causés par les recalculs de mise en page |
| Ne pas modifier les nœuds visibles à chaque frappe | Évite les lenteurs dans les champs de formulaire ou de recherche |
Voici un exemple illustrant une mauvaise pratique et sa version optimisée :
// Moins efficace
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = 'Élément ' + i;
document.body.appendChild(div); // Injection directe à chaque itération
}
// Bonne pratique avec DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = 'Élément ' + i;
fragment.appendChild(div);
}
document.body.appendChild(fragment); // Une seule insertion dans le DOMDans cet exemple, la seconde méthode permet de réduire les opérations de recalcul et optimise considérablement les performances, notamment sur des pages contenant beaucoup d’éléments dynamiques.
Adopter ces bonnes pratiques favorise la rapidité, la maintenabilité et la fiabilité de vos projets web, tout en assurant une expérience fluide pour les utilisateurs, même sur des appareils peu puissants ou avec des connexions lentes.
0 commentaires