Latest web development tutorials

méthode HTML DOM getElementsByClassName ()

Document Object Reference Document Object

Exemples

Obtenez tous les éléments par nom de classe:

var x = document.getElementsByClassName ( "exemple" );

Essayez »

Définitions et utilisation

méthode getElementsByClassName () retourne tous les éléments du document précisent le nom de classe de la collection, comme objet NodeList.

objet NodeList représente un ordre de la liste des noeuds. NodeList objet que nous pouvons accéder à la liste des noeuds (numéro d'index à partir de 0) dans la liste des noeuds du numéro d'index de noeud.

Astuce: Vous pouvez utiliser l'objet NodeList longueur de la propriété afin de déterminer le nombre d'éléments par nom de classe, et les divers éléments du cycle pour obtenir les éléments dont vous avez besoin.


support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la méthode.

manière
getElementsByClassName () 4.0 9.0 3.0 3.1 9.5

grammaire

document.getElementsByClassName (classname)

Paramètres

Paramètres type description
classname chaîne Must. classes d'éléments dont vous avez besoin pour obtenir le nom.

les noms de classes multiples séparés par des espaces, tels que "démo d'essai".

description technique

Version DOM: Niveau de base 1 Document Object
Retours: objet NodeList qui représente l'élément spécifie le nom de la classe de la collection. L'ordre des éléments de la collection de son genre dans l'ordre d'apparition dans le code.

Exemples

D'autres exemples

Exemples

Obtient le «exemple» et «couleur» du nom de la classe de tous les éléments:

var x = document.getElementsByClassName( "example color" );

Essayez »

Exemples

Combien de style class = "exemple" éléments (en utilisant la propriété de longueur de la NodeList) pour afficher le document sont:

var x = document.getElementsByClassName( "example" ).length;

Essayez »

Exemples

Changer la couleur de toutes les classes de styles = "exemple" éléments de fond:

var x = document.getElementsByClassName( "example" );
var i;
for (i = 0 ; i < x.length; i++) {
    x[i].style.backgroundColor = "red" ;
}

Essayez »

Pages associées

CSS tutorial: sélecteurs CSS

CSS Référence: sélecteurs CSS .class

Manuel HTML DOM Référence: Element .getElementsByClassName ()

HTML DOM Référence: attribut className

Manuel HTML DOM Référence: HTML attributs DOM classList

Manuel HTML DOM Référence: HTML DOM style Object


Document Object Reference Document Object