Le DOM (Document Object Model)
Qu'est-ce que le DOM
Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il permet aux développeurs de manipuler les éléments d'un document, comme les ajouter, supprimer ou modifier leur contenu ou leur style.
Voici un exemple de code pour sélectionner un élément de la page et changer sa couleur de fond :
// Sélectionne l'élément avec l'id "titre"
var titre = document.getElementById('titre')
// Change la couleur de fond de l'élément en rouge
titre.style.backgroundColor = 'red'
Il est également possible de sélectionner des éléments en utilisant d'autres méthodes telles que getElementsByTagName ou querySelectorAll. Par exemple :
// Sélectionne tous les éléments de la page ayant la classe "lien"
var liens = document.getElementsByClassName('lien')
// Sélectionne le premier élément de la page ayant la classe "lien"
var premierLien = document.querySelector('.lien')
Le DOM permet également de créer de nouveaux éléments et de les ajouter à la page. Voici un exemple de code pour créer un nouvel élément <p> et l'ajouter à la page :
// Crée un nouvel élément <p>
var paragraphe = document.createElement('p')
// Ajoute du contenu à l'élément
paragraphe.innerHTML = 'Voici un nouveau paragraphe ajouté à la page.'
// Ajoute l'élément à la page
document.body.appendChild(paragraphe)
En utilisant le DOM, les développeurs peuvent créer des pages web interactives et dynamiques. C'est un élément clé de la programmation côté client.
En conclusion, le DOM est un outil essentiel pour les développeurs de JavaScript, car il leur permet de manipuler les éléments d'une page web et de créer des pages interactives et dynamiques.
