Définition et exemple d'utilisation de la méthode : getElementById

getElementById

getElementById parcourt le document xhtml à la recherche d'un node unique possédant l'attribut id (*) avec une valeur spécifique. Si ce node n'existe pas il renvoie false. De part les propriétés de id dans le XML, getElementById ne peut renvoyer qu'un et un seule node et cette méthode n'est accessible que par document. Exemple :

node = document.getElementById(which);

Une traduction écrite de l'exemple ci-dessus serait : Parcourir l'entiereté du document et assigner à node les propriétés et les méthodes associées au node unique possédant la valeur which pour son attribut id.

Exemple

Veuillez trouver ci-dessous le script de example1() la fonction javascript utilisée :

function example1(which){
  var node  = document.getElementById(which);
	var msg  = "node.nodeName  -> "+ node.nodeName + "\n";
	    msg += "node.nodeType  -> "+ node.nodeType + "\n";
	    msg += "node.nodeValue -> "+ node.nodeValue + "\n";
	    msg += "node.value     -> "+ node.value + "\n"; 
  // node.value est une propriété du javascript et non du DOM
  alert(msg);
}
  1. Pour ceux qui ont encore des doutes, remarquez la différence entre la valeur de node.nodeValue du DOM et celle de node.value du javascript.
  2. Dans les 2 cas node.nodeValue renvoie null. Cela découle de la définition des node par DOM. Ainsi comme nous l'avons vu en introduction à ce chapitre, le texte du tag <a> est considéré comme un node de type #text. Nous avons donc accéder au node parent du texte c'est-à-dire à la balise <a> ET NON à son child #text. Nous verrons plus loin comment accéder au texte de la balise <a>.
  3. Pour ce qui est de la balise <input> quelque soit la méthode utilisée nodeValue renverra toujours null et cela tient à la définition même de cette balise (*).

Notes de bas de page

l'attribut id :
Cet attribut est spécial car s'il existe pour une balise, il doit posséder une valeur unique pour l'entiereté du document xhtml. Veuillez vous rapporter à un tutorial sur le xml pour plus d'information.
balise <input> :
Cette balise comme la balise <br> ou la balise <img> ne contient pas de texte. Veuillez vous rapporter à un tutorial sur le XHTML pour plus d'informations.