DOM : modification du contenu

I. Introduction

Nous avons vu dans le précédent chapitre d'introduction au Document Object Model comment il était possible d'accéder à des nœuds particuliers dans un document HTML. Nous allons voir maintenant comment il est possible d'en modifier le contenu, d'en ajouter ou de supprimer des éléments.

Dans toute la suite, on considérera que l'on a déjà sélectionné un élément elt.

II. Modification de contenu

1. Remplacement du document entier

Nous n'allons pas revenir dans ce cours sur le fonctionnement des méthodes write() et writeln() appliquées à l'objet document. Ces méthodes remplacent le contenu total du document courant par leur argument. Mais elles posent énormément de problèmes quant au temps de chargement, à l'intégration des éléments HTML ainsi générés dans l'arbre du DOM de la page mais aussi sur les performances quand un script est intégré de la sorte. En conséquence, ces méthodes sont à éviter dans la mesure du possible.

2. Modification d'attributs

a. Modification des éléments de ''stylage''

On peut directement accéder aux attributs id et class d'un élément donné à l'aide des propriétés correspondantes id et className. Il est donc possible de modifier la manière dont un élément est affiché, simplement en changeant son identifiant ou bien sa classe, en rapport avec une feuille de style CSS.

De plus, ainsi que nous l'avons déjà pratiqué, il est possible d'avoir accès séparément à toutes les propriétés de feuille de style pour l'élément sélectionné en faisant appel à la collection style. Par exemple, elt.style.fontSize='1.2em' ajuste la taille de la police de l'élement sélectionné à 120% de sa taille par défaut. On rappelle que dans le cas des propriétés dont le nom en CSS comporte un trait d'union, JavaScript demande l'utilisation d'une majuscule (comme par exemple la propriété précédente).

b. Modification de la classe

S'il est en théorie possible de modifier la propriété className pour changer les classes appliquées à un éléments, il est plus efficace de recourir à la propriété classList. Cet objet possède quatre méthodes. Supposons par exemple identifié un élément elt :

• elt.classList.remove('machin'); retire la classe machin si elle était appliquée à l'élément ;
• elt.classList.add('truc'); ajoute la classe truc à l'élément ;
• elt.classList.toggle('bidule'); retire la classe bidule si elle était appliquée à l'élément, et l'ajoute si elle n'était pas présente ;
• elt.classList.contains('chose'); renvoie un booléen permettant de savoir si la classe chose est appliquée à l'élément.

c. Modification des autres attributs

L'attribut lang est accessible directement grâce à la propriété… lang.

L'attribut tabIndex est lui aussi modifiable directement par la propriété du même nom.

Plus généralement, on peut faire appel à la méthode setAttribute(). Par exemple, elt.setAttribute("align", "center") permet de modifier l'attribut align de l'élément courant de telle manière que ce dernier soit centré.

Exercice 1. Modifications d'attributs

Énoncé

Correction

3. Modification d'éléments

a. Changement d'un élément

On peut remplacer un élément par un autre par la méthode replaceChild, sous réserve de l'avoir créé au préalable. On l'appelle comme suit : elt.replaceChild(newChild, oldChild) (voir plus loin pour l'étape préalable de création d'un nœud).

b. Contenu d'un nœud

Deux propriétés permettent de modifier le contenu d'un élément déterminé. Nous avons déjà rencontré innerHTML. elt.innerHTML="Ceci est un texte <b>en gras</b>." affecte cette chaîne de caractères à l'élément.

Cependant, recourir à cette propriété n'est pas recommandé.

• Elle complique la maintenance du code
• De plus, il arrive que les navigateurs changent le balisage appliqué alors à un document ; il en résulte un DOM différent de ce qui était attendu. Dans de rares cas, le contenu ajouté par cette méthode peut même être complètement absent du DOM. Se reporter à cette ressource en anglais pour plus de renseignements et un moyen de contourner cet inconvénient.

Pour modifier le contenu textuel d'un nœud de type élément, on peut utiliser la propriété textContent, qui fonctionne de manière similaire à innerHTML mais ne permet pas d'intégrer du code HTML.

On peut également avoir accès à la valeur d'un nœud de type texte avec la propriété nodeValue. Cette propriété renvoie des résultats différents selon le nœud auquel elle est appliquée :

Type de nœud Valeur retournée par nodeValue

attribut Valeur de l'attribut (obsolète, propriété remplacée par value)

Section CDATA Contenu de la section

document null

element null

texte Contenu du nœud texte

Table 1. Valeur retournée par nodeValue pour chaque type de nœud.

III. Ajout de contenu

1. Méthodes de création de nœuds

a. Création ex-nihilo

Deux méthodes appliquées à l'objet document et une méthode appliquée à un objet déjà existant permettent de créer des nœuds à partir de rien. Le résultat de ces méthodes est un nœud n'ayant aucun parent. Il est donc nécessaire, ce que nous verrons par la suite, d'affecter ce nœud à un nœud déjà existant.

• createElement permet de créer un… élément. Par exemple, preface=document.createElement("div") crée un élément div.
• createTextNode permet de créer un… nœud de type texte. Par exemple, dublabla=document.createTextNode("un peu de blabla") crée un contenu "un peu de blabla".
• cloneNode(deep) permet de créer une copie de l'élément courant. Le booléen deep permet de paramétrer le niveau de profondeur de la copie. Quand deep vaut false, seuls le nom de la balise et ses attributs sont copiés. Quand deep vaut true, le contenu de l'élément est lui aussi copié. Par exemple, parag=document.getElementById("monpar"); parag2=parag.cloneNode(true) crée une copie de l'élément d'identifiant monpar, texte inclus compris.

b. Affectation d'un nœud à un autre nœud

La méthode standard est la méthode appendChild() appliquée à un élément donné. Supposons par exemple créés les éléments para1 et spanauteur. On peut affecter spanauteur à para1 en exécutant para1.appendChild(spanauteur);

On peut aussi directement créer un attribut et l'attacher à un élément existant par la méthode setAttribute() (la méthode createAttribute de l'object document est maintenant obsolète). Ainsi, liste=document.getElementById("maliste");liste.setAttribute("type","circle"); permet d'affecter à l'élément liste l'attribut type avec la valeur circle.

c. Ajout local

Enfin, étant donné un nœud créé au préalable avec createElement, on peut l'affecter en amont d'un autre élément. Par exemple,

div1=document. getElementById("parentDiv") ;

p2=document. getElementById("enfantP") ;

p1=document. createElement("p") ;

div1 insertBefore(p1,p2) ;

… repère d'abord dans le document le div d'identifiant parentDiv, puis l'élément p d'identifiant enfantP, crée un élément p supplémentaire, puis l'insère avant le précédent.

Exercice 1. Créer et ajouter des éléments

Énoncé

Correction (Ajout d'un élément de liste)

Correction (Ajout d'un bouton)

d. Plus de souplesse avec insertAdjacentHTML

Utilisable depuis 2018 en production, la méthode insertAdjacentHTML offre encore plus de souplesse et permet d'insérer du code HTML, interprété par le navigateur (et donc incorporé au Document Object Model). Cette méthode prend deux arguments´:

• position, une chaîne de caractères spécifiant l'endroit où insérer le code, et pouvant prendre les valeurs beforebegin, afterbegin, beforeend et afterend´:

<!-- beforebegin --> 

<div> 

  <!-- afterbegin --> 

  <p>(…)</p> 

  <!-- beforeend --> 

</div> 

<!-- afterend --> 

• text, une chaîne de caractères destinée à être interprétée et insérée dans le DOM.

Par exemple, document.getElementById("id1").insertAdjacentHTML("afterbegin", "<p>Texte à insérer</p>") donnera…

<!-- beforebegin --> 

<div id="id1"> 

  <p>Texte à insérer</p> 

  <!-- afterbegin --> 

  <p>(…)</p> 

  <!-- beforeend --> 

</div> 

<!-- afterend --> 

IV. Suppression de contenu

1. Suppression de nœuds

a. Suppression d'un nœud quelconque

Il est possible de supprimer un enfant quelconque grâce à la méthode removeChild. Par exemple

elt=document. getElementById("div1") ;

elt_inclus=document. getElementById("para1") ;

elt_rejete=elt. removeChild(elt_inclus) ;

b. Suppression d'un attribut

Un attribut peut être supprimé de deux manières différentes :

1. soit en utilisant directement son nom, par la méthode removeAttribute. Par exemple, elt.removeAttribute("align") supprime l'attribut align de l'élément.
2. soit en supprimant le nœud attribut correspondant avec la méthode removeAttributeNode. Par exemple

elt=document. getElementById("top") ;

attr_align=elt .getAttributeNode("align") ;

elt .removeAttributeNode(attr_align) ;

Exercice 1. Suppression d'éléments

Énoncé

Correction