javascript dom class | Cibler un élément DOM d'après son nom de classe

Home

Web

Javascript

Cibler un élément DOM d'après son nom de classe

Friday, 01 October 2010 15:30

There are no translations available.

En javascript, on peut cibler très facilement un élément si celui-ci a un identifiant défini (id="..."), cependant on cherche parfois à cibler un élément qui n'a pas d'identifiant mais un nom de classe.
Par définition une classe peut s'appliquer à plusieurs éléments DOM. Dans cet article, je donne une fonction qui permet de cibler le premier élément trouvé qui comporte le nom de classe recherché dans un structure DOM donnée.

Pour cibler un élément DOM par son identifiant on utilise la fonction getElementById de la manière suivante :
document.getElementById('home_diapo_flash').innerHTML="";
Cette ligne de code va transformer :
<div id="home_diapo_flash">quelque chose</div>
en :
<div id="home_diapo_flash"></div>

Si l'on cherche à faire la même chose avec :
<div class="contentheading">quelque chose</div>

Vous pouvez utiliser ma fonction getFirstElementClassName, qui va vous retourner le premier élément DOM ayant comme nom de classe le nom de classe donné dans la structure DOM donnée...

function getFirstElementClassName(classname,node){
 if(!node) node = document.getElementsByTagName("body")[0];
 var els = node.getElementsByTagName("*");

 for(var i=0; i<els.length; i++) { 
    if(els[i].className==classname) return els[i];
 }

}

Exemple d'utilisation :
var titre = getFirstElementClassName("contentheading",document.getElementById('home_content'));
titre.innerHTML="nouveau<br/>";

Ci-dessous, vous trouverez une variante de la fonction précédente qui permet de préciser quel élément (en indiquant la position) on veut modifier :
Cette fonction retourne 0 si aucun élément n'est trouvé.


function getFirstElementClassName(classname,position,node){
 if(!position) position = 0;
 if(!node) node = document.getElementsByTagName("body")[0];
 var els = node.getElementsByTagName("*");

 var cpt=0;

 for(var i=0; i<els.length; i++) {
    if(els[i].className==classname) {
      if(cpt==position) return els[i];
      else cpt++;
    }
 }

 return 0;
}