Modifier le document avec l'interface DOM
#1
Bilan des possibilités
Pour modifier le contenu de notre document voilà l'ensemble de nos possibilités :
- Dans ce tuto on va regarder comment modifier le contenu textuel avec la propriété
textContent. Je vais expliquer le fonctionnement detextContent. Un fonctionnement qui est peut être un peu compliqué par rapport à la façon la plus courante de l'utiliser. - Ensuite on va regarder comment modifier les attributs HTML. Là on a deux possibilités. Soit passer par les propriétés des objets JavaScript en utilisant les noms des propriétés JavaScript. Soit passer par les méthodes de la famille
setAttribute()en utilisant directement les noms des attributs HTML. - Dans le tuto suivant on verra comment insérer du contenu dans le document avec les méthodes de l'objet
Node. - Puis, dernière possibilité avec l'utilisation de
innerHTMLqui est une propriété Microsoft à la base et qui ne fait pas partie de la spec du W3C mais qui est quand même bien pratique et bien couverte par l'ensemble des navigateurs (* consulter CanIuse).
#2
Modifier le contenu d'un élément avec la propriété textContent
Comment fonctionne textContent ?
textContent vous renvoie le contenu textuel d'un élément et de ses descendants.
Dans l'exemple, on accède directement à l'adresse de l'instance de l'objet qui correspond à l'élément HTML en utilisant la méthode querySelector. A partir de maintenant on va dire qu'on accède à l'élément on ne va pas préciser à chaque fois qu'il s'agit de l'adresse, de l'instance, de l'objet du DOM, qui correspond à l'élément HTML.
Puis on prend la propriété textContent sur elt. Vous allez récupérer tout le contenu textuel de p y compris celui de strong et de em qui sont des enfants de p. Vous voyez que les balises HTML n'ont pas été récupérées.
Remplacer le contenu existant
Vous pouvez remplacer le contenu existant en affectant directement la propriété textContent avec une nouvelle chaîne de caractères. Ici il faut avoir conscience que vous supprimez les nœuds enfants strong et em dans l'arbre.
Dans l'exemple ci-dessous on accède directement à la propriété textContent sans la stocker dans une variable.
Ajouter du contenu au contenu existant
Vous pouvez aussi ajouter du texte au contenu existant. Ci-dessous vous faites en quelque sorte une opération de lecture / écriture.
Tester le code
#3
Modifier un attribut avec la propriété d'un objet
Ci-dessous on va attribuer une classe au lien. On va se servir de la propriété JavaScript className pour modifier l'attribut HTML class. Il faut remarquer ici que le nom de la propriété JavaScript n'est pas le même que le nom de l'attribut HTML. Ca ne veut pas dire que systématiquement propriété et attribut n'ont pas le même nom mais ça arrive et le cas de class et de className est probablement le plus connu.
#4
Modifier ou récupérer la valeur d'un attribut avec setAttribute() et getAttribute()
Les méthodes setAttribute() et getAttribute() font parties d'une famille de fonctionnalités que l'on appelle des setter et des getter.
Ci-dessous elt est une instance de l'objet HTMLAnchorElement qui hérite de ses méthodes en tant qu'objet petit enfant de l'objet Element. Vous pouvez consulter la spécification de l'objet Element dans cette documentation de la partie noyau de la spec du W3C.
#5
Autres méthodes
Il existe d'autres méthodes de la famille de setAttribute() et getAttribute(), des méthodes appartenant aussi à l'objet Element.
Je vous renvoie à la documentation MDN pour les méthodes :
hasAttribute()qui permet de savoir si un élément possède un attribut donné.removeAttribute()qui permet de supprimer un attribut donné.toggleAttribute()qui permet de basculer d'un état à l'autre : je mets l'attribut puis j'enlève l'attribut. Cette méthode est utilisée pour les attributsdisabledoureadonly, attributs qui ont un fonctionnement binaire.
