geek space web solutions

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

Vendredi, 01 Octobre 2010 15:30
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;
}
Exemple d'utilisation :
var menu = getFirstElementClassName("menu",1,document.getElementById('ligne2'));
menu.innerHTML="nouveau<br/>";
 

Ajouter un Commentaire


Code de sécurité
Rafraîchir

Sections

Éditeur de fichier XML en ligne


"XML Manager" est un éditeur sécurisé permettant d'administrer en ligne un fichier XML.
Il fournit des fonctions avancées de recadrage et de redimensionnement des images...

Sondages

Pensez-vous que le HTML5 puisse complètement remplacer Flash ?
 
Seriez-vous intéressé par un éditeur d'XML en ligne ?
 

Paypal

paypal

Code du plugin Joomla AutoSEO 1.2 par www.geek-space.fr