La manipulation du DOM (Document Object Model) est l'une des principales caractéristiques de Javascript dans le développement de sites web. Le DOM est une représentation en mémoire du document HTML, qui permet à JavaScript d'accéder et de modifier dynamiquement les éléments de la page.
Pour manipuler le DOM avec Javascript, vous devez d'abord sélectionner l'élément HTML souhaité. Cela peut être fait de plusieurs manières, par exemple via l'ID d'élément, la classe CSS ou le type de balise. Une fois l'élément sélectionné, il est possible d'accéder à ses propriétés et méthodes pour effectuer la manipulation souhaitée.
Par exemple, pour modifier le contenu d'un élément HTML, vous pouvez utiliser la propriété innerHTML. Voir exemple ci-dessous :
// Sélectionne l'élément avec l'ID "title"
var titre = document.getElementById("titre");
// Changer le contenu de l'élément
titulo.innerHTML = "Nouveau titre" ;
En plus de modifier le contenu des éléments, vous pouvez également modifier leurs propriétés, telles que le style CSS. Pour ce faire, vous pouvez utiliser la propriété style, qui vous permet d'accéder et de modifier les propriétés de style de l'élément. Voir exemple ci-dessous :
// Sélectionne l'élément avec l'ID "paragraphe"
var paragraphe = document.getElementById("paragraphe");
// Change la couleur du texte du paragraphe en rouge
paragraphe.style.color = "rouge" ;
Une autre façon de manipuler le DOM avec Javascript consiste à créer et à supprimer des éléments HTML. Pour cela, vous pouvez utiliser respectivement les méthodes createElement et removeChild. Voir exemple ci-dessous :
// Crée un nouvel élément "div"
var newDiv = document.createElement("div");
// Ajoute le nouvel élément à la fin du corps
document.body.appendChild(newDiv);
// Supprime l'élément avec l'ID "paragraphe"
var paragraphe = document.getElementById("paragraphe");
document.body.removeChild(paragraphe);
Enfin, il est important de se rappeler que la manipulation du DOM avec Javascript peut être une tâche complexe et nécessite une bonne connaissance de la structure HTML et du fonctionnement de Javascript. Il est recommandé d'utiliser des bibliothèques telles que jQuery, qui facilitent la manipulation du DOM et offrent une syntaxe plus simple et plus intuitive.
