geek space web solutions

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

Add comment


Security code
Refresh

Sections


Last articles

Send array from Flash / As3 ... Module Joomla SeCatordion - ... Résoudre l'erreur : "Error i... Gérer les polices avec la bi... Bot Pokemon GO NodeJS Script... MassLoader et LoaderMax - Gé... Modifier la page d'erreur 40... Cube 3D avec images - Paperv... Afficher les Polices référen... Customiser le bouton Retour ...

Sondages

Do you think HTML5 can completely replace Flash ?
 
Would you be interested in an online XML editor ?
 

Paypal

paypal

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