Les attributs d'une balise

Avant de continuer la manipulation d'un document XHTML à l'aide du DOM, il est utile de définir les méthodes et les propriétés du DOM associées aux attributs d'une balise XHTML.

attributes

C'est la méthode par défaut pour accéder aux attributs. attributes permet de récupérer un tableau ou array des noms et des valeurs de chaque balise qui sont spécifiés dans un document donné.

Si attributes est à première vue utile, son utilisation doit être faite en tenant compte de son implémentation diffèrente dans Internet Explorer. attributes dans IE nous renoie la liste complète de tous les attributs suceptibles d'être utilisés par une balise. Néanmoins pour utilisér attributes dans IE et dans les autres navigateurs une astuce a été trouvée...

les expressions suivantes indiquent pour node
node.attributes.length  -> le nombre total 
                            d'attributs assignés 
                           sauf pour IE
node.attributes[i].name -> le nom de son attribut i+1
node.attributes[i].value -> la valeur de son attribut i+1
node.attributes[i].specified -> si l'attribut i+1 a été 
                                spécifié par l'utilisateur
                                ou non

Pour contourner la spécificité d'IE, on va utiliser la propriété specified de attributes. Au lieu d'écrire le script suivant :

function example7(nodeId){
  var node = document.getElementById(nodeId);
  alert(node.attributes.length); 
}
ceci fonctionne par tout SAUF dans IE

qui nous donne un résultat différent pour IE d'un côté et les autres navigateurs de l'autre. On aura :

function example7bis(nodeId){
  var node = document.getElementById(nodeId);
	var nodeAttributesLength = 0;
  for(var i = 0; i <node.attributes.length; i++){
	 if(node.attributes[i].specified) {
	   nodeAttributesLength++;
   }
	} 
	alert(nodeAttributesLength);
}
ceci fonctionne par tout SAUF dans IE

qui nous donne un résultat identique quelque soit le navigateur.

Comme l'on est généralement plus intéressé par un attribut à la fois, le DOM met à notre disposition 3 méthodes complémentaires pour accéder et modifier un attribut quelconque d'une balise.

getAttribute

getAttribute permet de récupérer un attribut spécifique d'un node de type balise. Si cette attribut n'existe pas, il retourne null.

node.getAttribute(attributeName);

setAttribute

La méthode setAttribute permet de modifier un attribut spécifique d'un node de type balise. Si cette attribut n'existe pas, il le crée.

node.setAttribute(attributeName,attributeValue);

removeAttribute

Enfin, la méthode removeAttribute permet de retirer un attribut spécifique d'un balise.

node.removeAttribute(attributeName);

Ainsi nous avons 3 méthodes complémentaires pour pouvoir jongler avec les attributs des balises en XHTML.

Exemples

A l'aide de la fonction décrite ci-dessous nous pouvons altérer un noeud et en 3 étapes assigner, changer et enlever un attribut class à celui-ci.

function example8(nodeId){
  var node = document.getElementById(nodeId);
  if(!node.getAttribute("class")) {
    node.setAttribute("class","part");
  }
  else if(node.getAttribute("class") == "part") {
    node.setAttribute("class","toto");
  }
  else if(node.getAttribute("class") == "toto"){ 
    node.removeAttribute("class");
  }
}
// pour une meilleur visibilité les commandes alert on été 
   supprimées