Le Document Object Model (DOM) est une interface de programmation qui permet de connecter des scripts au contenu d'une page Web. Il représente la structure d'une page Web et peut être manipulé avec JavaScript pour modifier le contenu et la mise en page de la page. Ce chapitre de notre e-book couvrira la manipulation des éléments DOM et HTML avec JavaScript.
Pour commencer, le DOM est une représentation arborescente de la page Web. Chaque élément, attribut et texte de la page est représenté par un objet dans le DOM. Ces objets sont organisés dans une arborescence, avec l'objet 'document' en haut. Cet objet représente la page Web dans son ensemble et constitue le point de départ pour accéder à n'importe quelle partie de la page.
Les objets du DOM ont des propriétés et des méthodes que vous pouvez utiliser pour les manipuler. Par exemple, l'objet « document » possède une méthode « getElementById » que vous pouvez utiliser pour obtenir un élément de page par son ID. Une fois que vous avez une référence à un élément, vous pouvez utiliser ses propriétés et méthodes pour modifier son contenu, son style, etc.
Par exemple, supposons que nous ayons un élément de paragraphe sur notre page avec l'identifiant « myPara ». Nous pouvons obtenir une référence à cet élément et modifier son contenu comme suit :
var para = document.getElementById('myPara');
para.textContent = 'Nouveau contenu !';
Ici, nous utilisons la méthode « getElementById » pour obtenir une référence à l'élément de paragraphe, puis nous utilisons la propriété « textContent » pour modifier le contenu du paragraphe. Notez que le contenu de la page est immédiatement mis à jour pour refléter le changement.
En plus de modifier le contenu d'un élément, vous pouvez modifier son style. Chaque élément possède une propriété « style » que vous pouvez utiliser pour modifier le style CSS de l'élément. Par exemple, vous pouvez changer la couleur du texte de notre paragraphe comme suit :
para.style.color = 'rouge';
Ici, nous utilisons la propriété 'style' pour accéder au style de l'élément, puis nous utilisons la propriété 'color' pour changer la couleur du texte. Encore une fois, la page est mise à jour immédiatement pour refléter le changement.
Vous pouvez également utiliser JavaScript pour ajouter et supprimer des éléments de la page. Chaque élément possède les méthodes « appendChild » et « RemoveChild » que vous pouvez utiliser pour ajouter ou supprimer des éléments. Par exemple, vous pouvez ajouter un nouvel élément de paragraphe à la page comme suit :
var newPara = document.createElement('p');
newPara.textContent = 'Un nouveau paragraphe !';
document.body.appendChild(newPara);
Ici, nous utilisons la méthode 'createElement' pour créer un nouvel élément de paragraphe, puis nous utilisons la méthode 'appendChild' pour ajouter le nouveau paragraphe au corps de la page. Encore une fois, la page est mise à jour immédiatement pour refléter le changement.
En bref, le DOM est une puissante interface de programmation qui vous permet de manipuler le contenu et la mise en page d'une page Web avec JavaScript. En apprenant à utiliser le DOM, vous ferez un grand pas en avant pour devenir un développeur front-end efficace.
Dans le chapitre suivant, nous explorerons le DOM plus en profondeur et apprendrons comment utiliser les événements pour rendre nos pages Web plus interactives. Restez à l'écoute !
