document.getElementsByClassName

Résumé

Renvoie un ensemble d'éléments portant le nom de classe donné. La recherche se fait dans le document complet, y compris le nœud racine.

Syntaxe

éléments = document.getElementsByClassName(nom);

• éléments est une liste de nœuds (NodeList) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.
• nom est une chaîne représentant le nom de la classe des éléments à trouver.

Exemples

Trouve tous les éléments ayant la classe « test » :

 document.getElementsByClassName('test')

Trouve tous les éléments ayant les classes « rouge » et « test » :

 document.getElementsByClassName('rouge test')

Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :

 document.getElementById('main').getElementsByClassName('test')

Si l'on va plus loin en ajoutant les compléments de tableaux de JavaScript 1.6, on peut obtenir des résultats très intéressants.

Trouve tous les éléments DIV qui ont la classe « test » :

 Array.filter( document.getElementsByClassName('test'), function(elem){
   return elem.nodeName == 'DIV';
 });

Trouve tous les éléments qui ont la classe « test » tout comme leur élément parent :

 var test = document.getElementsByClassName('test');
 Array.filter( test, function(elem){
   return Array.indexOf( test, elem.parentNode ) > -1;
 });

XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

Spécification

WHATWG Web Applications 1.0 : getElementsByClassName