Manipuler des éléments HTML avec Javascript

Manipulation d'éléments HTML avec Javascript

Javascript est un langage de programmation largement utilisé dans le développement de sites Web, et l'une de ses fonctions principales est la manipulation d'éléments HTML. Avec cet outil, vous pouvez modifier le contenu, le style et le comportement des éléments de la page, rendant l'expérience utilisateur plus dynamique et interactive.

Sélectionner des éléments HTML

Avant de manipuler un élément HTML, il est nécessaire de le sélectionner. Il existe plusieurs façons de procéder, mais les plus courantes sont :

• getElementById : sélectionne un élément par son ID ;
• getElementsByClassName : sélectionne un ou plusieurs éléments par leur classe ;
• getElementsByTagName : sélectionne un ou plusieurs éléments par leur nom de balise ;
• querySelector : sélectionne le premier élément qui correspond à un sélecteur CSS ;
• querySelectorAll : sélectionne tous les éléments qui correspondent à un sélecteur CSS.

Par exemple, pour sélectionner un élément avec l'ID "title", nous pouvons utiliser le code suivant :

var titre = document.getElementById("titre");

Ainsi, la variable "title" stockera une référence à l'élément HTML avec l'id "title".

Modification du contenu des éléments HTML

L'un des moyens les plus courants de manipuler des éléments HTML consiste à modifier leur contenu. Pour cela, nous pouvons utiliser la propriété "innerHTML", qui permet d'accéder et de modifier le HTML interne de l'élément.

Par exemple, pour changer le texte d'un élément avec l'ID "message", nous pouvons utiliser le code suivant :

var message = document.getElementById("message"); message.innerHTML = "Texte du nouveau message" ;

Ensuite, le texte à l'intérieur de l'élément sera remplacé par la nouvelle valeur.

Style des éléments HTML

Une autre façon de manipuler les éléments HTML est de changer leur style. Pour cela, nous pouvons utiliser la propriété "style", qui permet d'accéder et de modifier les styles CSS de l'élément.

Par exemple, pour changer la couleur de fond d'un élément avec l'ID "box", nous pouvons utiliser le code suivant :

var boîte = document.getElementById("boîte"); box.style.backgroundColor = "rouge" ;

Cela changera la couleur de fond de la boîte en rouge.

Ajouter et supprimer des classes d'éléments HTML

Une manière plus avancée de manipuler des éléments HTML consiste à ajouter et à supprimer des classes. Les classes sont utilisées en CSS pour appliquer des styles à un ou plusieurs éléments, et peuvent être ajoutées ou supprimées dynamiquement avec Javascript.

Pour ajouter une classe à un élément avec l'ID "bouton", nous pouvons utiliser le code suivant :

var bouton = document.getElementById("bouton"); bouton.classList.add("actif");

Cela ajoutera la classe "active" à l'élément, lui permettant d'être stylisé avec CSS.

Pour supprimer une classe d'un élément avec l'ID "bouton", nous pouvons utiliser le code suivant :

var bouton = document.getElementById("bouton"); bouton.classList.remove("actif");

Ainsi, la classe "active" sera supprimée de l'élément.

Conclusion

La manipulation d'éléments HTML avec Javascript est l'une des principales techniques utilisées dans le développement de sites Web. Avec lui, il est possible de créer des pages plus dynamiques et interactives, améliorant ainsi l'expérience utilisateur. Les principales formes de manipulation sont la sélection d'éléments, la modification du contenu et du style, ainsi que l'ajout et la suppression de classes. Avec ces outils, vous pouvez créer des sites Web plus modernes et plus efficaces.

Répondez maintenant à l’exercice sur le contenu :

_Quelle est la propriété utilisée pour modifier le contenu interne d'un élément HTML ?

1

innerHTML

2

style

3

classList

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Page suivante de lebook gratuit :

13Interaction avec les API en Javascript

2 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !