Gestion des éléments HTML avec JavaScript
Page 13 | Écouter en audio
La manipulation d'éléments HTML avec JavaScript est l'une des compétences les plus importantes pour un développeur Web. En effet, JavaScript est un langage de programmation qui permet de créer de l'interactivité et du dynamisme dans une page Web, et la manipulation d'éléments HTML est l'un des principaux moyens d'y parvenir.
Pour manipuler des éléments HTML avec JavaScript, il est nécessaire d'avoir une connaissance de base de la structure HTML. Chaque élément HTML est représenté par une balise, qui est un code entre crochets (< et >). Par exemple, le <p> représente un paragraphe, tandis que le <img> représente une image.
Pour manipuler un élément HTML avec JavaScript, vous devez d'abord l'identifier. Cela peut être fait de plusieurs manières, mais la plus courante consiste à utiliser la méthode getElementById(). Cette méthode reçoit en paramètre l'ID de l'élément à manipuler et renvoie une référence à cet élément. Par exemple :
<div id="maDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Bonjour le monde !" ;
</script>
Dans cet exemple, la méthode getElementById() est utilisée pour obtenir une référence à la <div> avec l'identifiant "myDiv". Ensuite, la propriété innerHTML de cet élément est remplacée par "Hello world!", ce qui rend le texte "Hello world!" être affiché à l'intérieur de la div.
En plus de la méthode getElementById(), il existe d'autres méthodes qui peuvent être utilisées pour identifier les éléments HTML, telles que getElementsByTagName() et getElementsByClassName(). Le premier renvoie une liste d'éléments qui ont une balise donnée, tandis que le second renvoie une liste d'éléments qui ont une classe donnée.
Une fois que vous avez identifié un élément HTML, vous pouvez le manipuler de plusieurs façons à l'aide de JavaScript. Certaines des propriétés les plus courantes pouvant être modifiées sont :
- innerHTML : définit ou renvoie le contenu HTML d'un élément
- value : définit ou renvoie la valeur d'un élément de formulaire
- src : définit ou renvoie l'URL d'une image
- href : définit ou renvoie l'URL d'un lien
- style : définit ou renvoie les propriétés de style d'un élément
Par exemple, pour modifier la valeur d'un champ de formulaire, il suffit d'utiliser le code suivant :
<type d'entrée="texte" id="monChamp">
<script>
var monChamp = document.getElementById("monChamp");
meuField.value = "Nouvelle valeur" ;
</script>
Dans cet exemple, la méthode getElementById() est utilisée pour obtenir une référence à l'élément de formulaire avec l'ID "myField". Ensuite, la propriété value de cet élément est remplacée par "Nouvelle valeur", ce qui entraîne la modification de la valeur du champ de formulaire.
En plus de modifier les propriétés d'un élément HTML, il est également possible d'ajouter ou de supprimer des éléments de la page à l'aide de JavaScript. Pour ajouter un nouvel élément HTML, créez simplement un nouvel élément à l'aide de la méthode createElement() et ajoutez-le à la page à l'aide de la méthode appendChild(). Par exemple :
<div id="maDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "Nouveau paragraphe" ;
myDiv.appendChild(nouveauParagraphe);
</script>
Dans cet exemple, la méthode createElement() est utilisée pour créer un nouvel élément <p> avec le contenu "Nouveau paragraphe". Ensuite, la méthode appendChild() est utilisée pour ajouter ce nouvel élément à la <div> avec l'identifiant "myDiv".
Enfin, pour supprimer un élément HTML de la page, utilisez simplement la méthode removeChild(). Cette méthode reçoit en paramètre l'élément à supprimer et le supprime de la page. Par exemple :
<div id="maDiv">
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
<script>
var myDiv = document.getElementById("myDiv");
var paragraphe2 = myDiv.getElementsByTagName("p")[1] ;
myDiv.removeChild(paragraph2);
</script>
Dans cet exemple, la méthode getElementsByTagName() est utilisée pour obtenir une liste de tous les <p> à l'intérieur de la <div> avec l'identifiant "myDiv". Ensuite, le deuxième élément de cette liste (qui correspond au paragraphe avec le texte "Paragraphe 2") est supprimé à l'aide de la méthode removeChild().
En bref, manipuler des éléments HTML avec JavaScript est une compétence essentielle pour tout développeur Web. Avec lui, vous pouvez créer des pages dynamiques et interactives qui offrent une expérience utilisateur plus riche.
Répondez maintenant à l’exercice sur le contenu :
_Quelle est la méthode la plus courante pour identifier les éléments HTML avec JavaScript ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Vous avez raté! Essayer à nouveau.
Page suivante de lebook gratuit :
14Événements en HTML
3 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 !
