]>
HTML
. Nous allons voir maintenant comment il est possible d'en elt
.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.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
.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).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.lang
est accessible directement grâce à la propriété… lang
.tabIndex
est lui aussi modifiable directement par la propriété du même nom.setAttribute()
. Par exemple, elt.setAttribute("title", "Nouvelle infobulle")
permet de modifier l'attribut title
de l'élément courant de telle manière qu'au survol apparaisse le texte « Nouvelle infobulle ».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 innerHTML
. elt.innerHTML="Ceci est un texte <b>en gras</b>."
affecte cette chaîne de caractères à l'élément.textContent
, qui fonctionne de manière similaire à innerHTML
mais ne permet pas d'intégrer du code HTML
.nodeValue
. Cette propriété renvoie des résultats différents selon le nœud auquel elle est appliquée :nodeValue
value
)null
null
nodeValue
pour chaque type de nœud.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'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.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);
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
.createElement
, on peut l'affecter en amont d'un autre élément. Par exemple,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.insertAdjacentHTML
offre encore plus de souplesse et permet d'insérer du code HTML, interprété par le navigateur (et donc incorporé au 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
´:text
, une chaîne de caractères destinée à être interprétée et insérée dans le DOM.document.getElementById("id1").insertAdjacentHTML("afterbegin", "Texte à insérer
removeChild
. Par exempleremoveAttribute
. Par exemple, elt.removeAttribute("align")
supprime l'attribut align
de l'élément.removeAttributeNode
. Par exemple