Modification du DOM
Modifier un élément
Modifier un élément HTML est assez simple une fois que vous avez recherché l'élément que vous souhaitez changer. Il suffit simplement de changer les bonnes propriétés de l'élément pour obtenir le résultat voulu. Le problème, c'est qu'il y a un très grand nombre de propriétés que vous pouvez changer et que certains éléments HTML ont des propriétés différentes ou spécifiques à leur type.
Dans cette page, nous allons voir les propriétés les plus courantes que vous pouvez changer sur un élément HTML.
Modifier le texte
Pour modifier le texte d'un élément HTML, la propriété à changer est innerText. Cette propriété contient le texte affiché à l'écran par l'élément. À l'aide de cette propriété, nous pouvons lire et changer le texte d'un élément. Voici un exemple:
Modifier le CSS
Pour modifier le style CSS d'un élément HTML, nous utiliserons généralement la propriété classList. Cette propriété contient une liste des classes CSS appliquées à l'élément et nous permet d'en ajouter et d'en retirer avec les méthodes add et remove. Nous pouvons aussi regarder si une classe est déjà appliquée avec la méthode contains. Voici un exemple:
Il est aussi possible de modifier directement le style CSS d'un élément avec la propriété style. Cette propriété contient toutes les propriétés CSS modifiable de l'élément et peut nous être utile dans certain cas puisqu'elle n'utilise pas de classe CSS. Cette méthode est cependant moins recommandée, pour les raisons suivantes:
- Cette méthode mélange HTML, CSS et Javascript et peut devenir difficile à maintenir.
- Les unités de mesure (comme px ou rem) doivent être ajoutées manuellement et ne sont pas garantie de ne pas être changées par le navigateur.
- Les propriétés CSS qui sont ajouté de cette manière peuvent entrer en conflit avec les classes CSS déjà appliquées à l'élément.
Voici tout de même à quoi ressemblerait l'exemple précédent avec la propriété style:
Modifier les attributs
Pour modifier les attributs d'un élément HTML, nous utiliserons généralement simplement le nom de la propriété. Par exemple, pour modifier l'attribut href d'un lien, nous utiliserons la propriété hrefen Javascript. Pareil pour la source d'une image (src), le texte alternatif d'une image (alt), la valeur d'un champ de formulaire (value), l'état d'une case à cocher (checked), etc. Voici un exemple:
Vous pouvez trouver une liste des différents attributs que vous pouvez modifier sur les pages de documentation suivantes: