Le Document Object Model (DOM) est une interface de programmation cruciale pour la manipulation des documents HTML et XML. En 2026, il reste un outil fondamental pour les d\u00e9veloppeurs web, car il permet d\u2019interagir avec le contenu d\u2019une page de mani\u00e8re dynamique. Ce guide pr\u00e9sente les principes du DOM, des exemples concrets d\u2019utilisation, ainsi que des retours d\u2019exp\u00e9rience terrain pour optimiser son utilisation.<\/p>\n
Le DOM est une repr\u00e9sentation structur\u00e9e d\u2019un document web. Chaque \u00e9l\u00e9ment HTML est converti en un objet JavaScript, permettant ainsi aux d\u00e9veloppeurs de modifier la structure, le style et le contenu d\u2019une page \u00e0 l\u2019aide de scripts. Par exemple, un \u00e9l\u00e9ment Le DOM suit une hi\u00e9rarchie arborescente o\u00f9 :<\/p>\n Imaginons une page qui affiche le nombre de visiteurs en temps r\u00e9el. Gr\u00e2ce au DOM, vous pouvez mettre \u00e0 jour ce chiffre sans recharger la page :<\/p>\n Ici, l\u2019\u00e9l\u00e9ment avec l\u2019ID Vous pouvez \u00e9galement ajouter des \u00e9l\u00e9ments au DOM :<\/p>\n Cette op\u00e9ration ajoute un paragraphe \u00e0 la fin du corps de la page.<\/p>\n Un pi\u00e8ge courant consiste \u00e0 manipuler le DOM trop fr\u00e9quemment dans une boucle. Cela peut entra\u00eener des probl\u00e8mes de performance. Par exemple :<\/p>\n Pr\u00e9f\u00e9rez cr\u00e9er tous les \u00e9l\u00e9ments dans un <div><\/code> devient un objet qui peut \u00eatre manipul\u00e9 par des m\u00e9thodes JavaScript.<\/p>\nStructure du DOM<\/h3>\n
\n
<html><\/code> est la racine.<\/li>\nExemples concrets d\u2019utilisation du DOM<\/h2>\n
Exemple 1 : Modification de contenu<\/h3>\n
document.getElementById(\"visiteurs\").innerText = \"2500\";\n<\/code><\/pre>\nvisiteurs<\/code> est mis \u00e0 jour pour afficher 2500 visiteurs.<\/p>\nExemple 2 : Ajout dynamique d\u2019\u00e9l\u00e9ments<\/h3>\n
let newElement = document.createElement(\"p\");\nnewElement.innerText = \"Bienvenue sur notre site !\";\ndocument.body.appendChild(newElement);\n<\/code><\/pre>\nMeilleures pratiques pour travailler avec le DOM<\/h2>\n
\n
documentFragment<\/code><\/strong> : Pour ajouter plusieurs \u00e9l\u00e9ments sans provoquer plusieurs reflows.<\/li>\nPi\u00e8ge \u00e0 \u00e9viter<\/h3>\n
for (let i = 0; i < 1000; i++) {\n let newDiv = document.createElement(\"div\");\n document.body.appendChild(newDiv); \/\/ Mauvaise pratique\n}\n<\/code><\/pre>\ndocumentFragment<\/code> puis ajoutez-le au DOM en une seule fois.<\/p>\nOutils et biblioth\u00e8ques utiles pour le DOM<\/h2>\n