version 1.23, dernière mise à jour le 26 juin 2013.
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
.
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.
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).
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é.
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).
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.
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 |
---|---|
attribut |
Valeur de l'attribut (obsolète, propriété remplacée par |
Section CDATA |
Contenu de la section |
document |
|
element |
|
texte |
Contenu du nœud texte |
Table 1. Valeur retournée par nodeValue
pour chaque type de nœud.
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.
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
.
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") ;
div1insertBefore(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.
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) ;
Un attribut peut être supprimé de deux manières différentes :
soit en utilisant directement son nom, par la méthode removeAttribute
. Par exemple, elt.removeAttribute("align")
supprime l'attribut align
de l'élément.
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) ;
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.