DHTML DOM:Modification de contenu
Un article de WikiTuto.
Sommaire |
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. ).
Modification de contenu
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.
Modification d'attributs
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='12px' ajuste la taille de la police de l'élement sélectionné à 12 pixels. 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).
Modification des autres attributs
L'attribut lang est accessible directement grâce à la propriété... lang. Par exemple, le morceau de code suivant permet de rediriger automatiquement le navigateur vers une page donnée en fonction de la langue de l'élément.
if(document.lang= "en" ) {
document.location = "english_link.html" ;
}
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
Modification d'éléments
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).
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ère à l'élément.
On peut également avoir accès à la valeur d'un nœud, 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 |
| Section CDATA | Contenu de la section |
| document | null |
| element | null |
| texte | Contenu du nœud texte |
Table 1.
Voir aussi
- Modification de contenu
- Ajout de contenu
- Suppression de contenu
