close

Modifier le document avec l'interface DOM

#1 Bilan des possibilités open

Pour modifier le contenu de notre document, voilà l'ensemble de nos possibilités :

Bilan des possibilités pour modifier le contenu du document
  1. Dans ce tuto, on va regarder comment modifier le contenu textuel avec la propriété textContent. Je vais expliquer le fonctionnement de textContent. Un fonctionnement qui est peut-être un peu compliqué par rapport à la façon la plus courante de l'utiliser.
  2. 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.
  3. Dans le tuto suivant, on verra comment insérer du contenu dans le document avec les méthodes de l'objet Node.
  4. Puis, on verra une dernière possibilité avec l'utilisation de innerHTML qui à la base est une propriété Microsoft. Cette propriété ne fait pas partie de la spec du W3C, mais elle 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 open

Comment fonctionne textContent ?

textContent vous renvoie le contenu textuel d'un élément et de ses descendants.

Dans l'exemple ci-dessous, 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, et 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. On récupère 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.

Tester le code

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.

Tester le code

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 open

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.

Tester le code

#4 Modifier ou récupérer la valeur d'un attribut avec setAttribute() et getAttribute() open

Les méthodes setAttribute() et getAttribute() font partie 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.

Tester le code

#5 Autres méthodes open

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 :

  1. hasAttribute() qui permet de savoir si un élément possède un attribut donné.
  2. removeAttribute() qui permet de supprimer un attribut donné.
  3. 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 attributs disabled ou readonly, attributs qui ont un fonctionnement binaire.