document.getElementsByClassName

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler getElementsByClassName () sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.

Syntaxe

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

elements est une HTMLCollection des éléments trouvés.
names est une chaîne représentant le nom de la classe des éléments à trouver.
getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.

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");

Nous pouvons également utiliser les méthodes de Array.prototype sur toute HTMLCollection en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':

var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);

XXX writeme == Notes == Une méthode semblable existe pour Element

Obtenir la classe des éléments test

C'est la méthode d'opération la plus couramment utilisée.

html



  
    
    Document
  
  
    
      hello word1
      hello word2
      hello word3
      hello word4

Compatibilité des navigateurs

Spécification

W3C: getElementsByClassName