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

Comment corriger une erreur ... Lancer une application au dé... Automatiser vos META avec le... Customiser le bouton Retour ... Javascript et Flash avec Ext... Installer le driver USB pour... Scythe Mugen 2 Cooler test... Construire un nouveau projet... ExpressJS Server... firstElementChild / firstChi...

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