Modifier un noeud texte à l'aide du DOM

Modifier un noeud texte

J'ai choisi de commencer par cette méthode car vous la connaissez déjà. Rappelez-vous, nous avons vu au début de ce tutorial les propriétés de base d'un noeud. Parmi ces propriétés figure nodeValue. La particularité de nodeValue est que vous pouvez l'utiliser pour assigner une valeur à votre noeud si bien sur vous avez affaire à un noeud texte. Donc en fonction de la place de nodeValue, à droite ou à gauche du signe = vous récupérez la valeur de nodeValue ou vous assignez une valeur à nodeValue.

soit un noeud node dont le firstChild est de type #text
val = document.getElementById("node").firstChild.nodeValue; 
traduction : j'assigne à val la valeur de firstChild
document.getElementById("node").firstChild.nodeValue = val; 
traduction : j'assigne à firstChild la valeur de val

Exemples

Regardez le texte entre parenthèses, "il va subir" un petit changement.

Comme vous le constatez cela est très facile. Comme je suis d'habitude très fainéant, j'ai mis au point un petit script en javascript qui me permet d'incrémenter le numéro de mes balises <h2> dans ce document comme dans l'entiereté de ce tutorial. Je sais qu'il existe un méthode CSS pour le faire, mais je la maitrise assez mal et de plus elle ne fonctionne pas sur tous les navigateurs...tandis que le DOM...en voici la source pour vous donner des idées d'utilisation.

function headerContent(){
  var content = document.getElementById("content");
  var h2List  = content.getElementsByTagName("h2");
  var j = 1;
  if(h2List.length > 1){
    for(var i = 0; i < h2List.length; i++){
      h2List.item(i).firstChild.nodeValue = j + ". "+ h2List.item(i).firstChild.nodeValue;
      j++;
    }
  }
}
window.onload = headerContent;