DOM
D
Definition complete
Le DOM (Document Object Model) est la représentation arborescente structurée d'un document HTML ou XML, permettant aux scripts (JavaScript) d'accéder et de manipuler dynamiquement le contenu, la structure et le style d'une page web.
Structure du DOM :
- Document : nœud racine représentant la page entière
- Éléments : balises HTML (div, p, a, img...)
- Attributs : propriétés des éléments (class, id, href...)
- Texte : contenu textuel des éléments
Opérations DOM courantes :
- Sélection : document.querySelector('.classe'), getElementById
- Modification : element.textContent, innerHTML, style
- Création : createElement, appendChild
- Événements : addEventListener pour les interactions
Performance : les manipulations DOM sont coûteuses. Les frameworks modernes (React, Vue) utilisent un Virtual DOM pour optimiser les mises à jour en minimisant les accès au DOM réel.
Exemples pratiques
- Sélection : document.querySelectorAll('article.post') sélectionne tous les articles
- Modification : element.classList.add('active') ajoute une classe CSS
- Événement : button.addEventListener('click', handleClick) attache un gestionnaire
A quoi sert DOM ?
- Manipulation du contenu : modification dynamique des elements de la page
- Gestion des evenements : reactions aux interactions utilisateur
- Validation de formulaires : verification cote client avant envoi
- Animations et transitions : effets visuels interactifs
- Integration d'API : mise a jour du contenu sans rechargement
DOM en pratique chez 123web
Chez 123web, nous développons des interfaces interactives performantes, avec des manipulations DOM optimisées ou l'utilisation de frameworks modernes pour une expérience utilisateur fluide.