Cours de JavaScript - Le DOM: modification du contenu dans un document

version 1.24, dernière mise à jour le 7 octobre 2016.

   

Table des matières (TdM)

  1. I. Introduction
  1. II. Modification de contenu
    1. Remplacement du document entier
    2. Modification d'attributs
      1. Modification des éléments de ''stylage''
      2. Modification de la classe
      3. Modification des autres attributs
      4. Exercice : Modifications d'attributs
    3. Modification d'éléments
      1. Changement d'un élément
      2. Contenu d'un nœud
  1. III. Ajout de contenu
    1. Méthodes de création de nœuds
      1. Création ex-nihilo
      2. Affectation d'un nœud à un autre nœud
      3. Ajout local
      4. Exercice : Créer et ajouter des éléments
  1. IV. Suppression de contenu
    1. Suppression de nœuds
      1. Suppression d'un nœud quelconque
      2. Suppression d'un attribut
    2. Exercice : Suppression d'éléments

Retour au menu

Contenu du cours

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.

>Retour à la TdM

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 :

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

>Retour à la TdM

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é.

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.

>Retour à la TdM

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.

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)

>Retour à la TdM

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) ;

>Retour à la TdM

Exercice 1. Suppression d'éléments

Énoncé
Correction

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu