Cours de manipulation du DOM et DHTML Le DOM: modification du contenu dans un document G. Chagnon Le DOM donne la possibilité de modifier, ajouter et supprimer du contenu dans un document. dhtml, dom, javascript 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. 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 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 createAttribute(). Ainsi, attr_alignement=document.createAttribute("align"); attr_alignement.nodeValue="center";para1.setAttributeNode(attr_alignement); permet d'affecter à l'élément para1 l'attribut align avec la valeur center. 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, ="parentDiv" ="enfantP" ="p" 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 ="div1" ="para1" = 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 ="top" ="align"