open

Modifier le document avec l'interface DOM

#1 Bilan des possibilités open

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

Bilan des possibilités pour modifier le 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. 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, dernière possibilité avec l'utilisation de innerHTML() qui est une méthode Microsoft à la base et qui ne fait pas partie de la spéc 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 open

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.

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 supprimer les nœuds enfants strong et em dans l'arbre.

Dons 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 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 ces 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 spéc 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.