Jérémie [Medialibs]
Bonjour,

Il peut être parfois utile de récupérer un élément DOM par le nom de sa classe CSS. Nativement, la méthode getElementsByClassName n'est pas implémentée. Quel dommage...

Heureusement, on peut facilement mettre en place une fonction permettant de combler cette lacune. EN voici le code :

function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|s)" + className + "(s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i ];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}


Ainsi, pour rechercher un span possédant une classe "title", il suffira d'appeler la fonction :

var spans=getElementsByClassName('title','span');


Si vous souhaitez obtenir tous les éléments portant une classe "test", il suffit de ne pas renseigné le second argument :

var spans=getElementsByClassName('test');


Enfin, si vous connaissez l'élément parent, vous pouvez le passer en troisième argument afin d'accélérer le traitement :

var parent=document.getElementById('parent');
var spans=getElementsByClassName('title','span',parent);


Attention : Veuillez noter le "s" à Elements. En effet, le résultat de cette fonction sera une collection d'objet DOM. Ainsi, il faudra le traiter comme un tableau. Si seul le premier élément nous intéresse, nous utiliserons :

var parent=document.getElementById('parent');
var spans=getElementsByClassName('title','span',parent);
alert(spans[0].innerHTML);


A bientôt

Jérémie

Directeur du Labo R&D
Medialibs