getElementsByClassName en javascript

Un des gros avantages avec les librairies javascript telles que prototype , jquery ou encore mootools c’est leur système de sélection d’élément dans le DOM.
Par exemple pour sélectionner tous les liens avec la class css « clickme » il suffit de faire :
[javascrip]var elements = $$(‘a.clickme’);[/javascript]
La syntaxe peut varier d’une librairie à l’autre mais dans l’esprit tout est récupérable avec de simples sélecteurs css.
Le problème étant qu’intégrer une librairie de plusieurs kilos pour une simple sélection est une mauvaise idée.
Voici donc une petite fonction getElementsbyClassName en javascript natif qui comme le selecteur $$ permet de retrouver tous les tags d’une page portant une class spécifique.

<pre>/**
* Récupère les éléments d'une classe précise
* @param string tag Nom de la balise
* @param string cssClass Nom de la class Css
* @return array
*/
function getElementByClassName(tag,cssClass){

var foundElements     = new Array();
var allElements        = document.getElementsByTagName(tag);
for(var i=0;i<allElements.length;i++)
    if(allElements[i].className == cssClass)
        foundElements.push(allElements[i]);

return foundElements;
}</pre>

Cette fonction renvoi donc un tableau des éléments retrouvés dans la page. Très simple elle ne prend cependant pas en compte les éléments avec plusieurs class css , mais c’est très facilement intégrable 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *