Exemple
Modifier le texte du premier élément de la liste avec class = « enfant » (index 0) dans une liste avec class = « exemple »:
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Avant de modifier le texte:
- Coffee
- Tea
Après avoir modifié le texte:
- Milk
- Tea
Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le getElementsByClassName() méthode retourne une collection d'éléments enfants d'un élément avec le nom de classe spécifié, comme un objet NodeList.
L'objet NodeList représente une collection de noeuds. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.
Astuce: Vous pouvez utiliser la longueur propriété de l'objet NodeList pour déterminer le nombre de noeuds enfants avec le nom de la classe spécifiée, vous pouvez boucle à travers tous les noeuds et extraire les informations que vous voulez.
Support du navigateur
Les chiffres du tableau indique la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntaxe
element .getElementsByClassName( classname )Les valeurs des paramètres
| Paramètre | Type | La description |
|---|---|---|
| classname | String | Champs obligatoires. Le nom de la classe des éléments enfants que vous souhaitez obtenir. Pour rechercher plusieurs noms de classe, en les séparant par des espaces, comme "child color" la "child color" l' "child color" . |
Détails techniques
| DOM Version: | Niveau de base 1 Élément objet |
|---|---|
| Valeur de retour: | Un objet NodeList, ce qui représente une collection des éléments enfant d'éléments avec le nom de la classe spécifiée. Les éléments de la collection retournés sont classés comme ils apparaissent dans le code source. |
autres exemples
Exemple
Changer la couleur de fond du second élément avec class = « enfant » à l' intérieur d'un <div> élément:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; Essayez vous - même » Exemple
Découvrez comment de nombreux éléments avec class = « enfant » il y a à l' intérieur d'un <div> élément ( en utilisant la propriété de longueur de l'objet NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;Le résultat de x sera:
3 Essayez vous - même » Exemple
Changer la couleur de fond du premier élément à la fois le "child" et "color" classe à l' intérieur d'un élément avec class = « exemple »:
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; Essayez vous - même » Exemple
Changer à l' intérieur d'une couleur d'arrière - plan de tous les éléments avec class = « enfant » <div> élément:
var x = document.getElementById("myDIV");
var y =
x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++)
{
y[i].style.backgroundColor = "red";
} Essayez vous - même » Pages associées
Tutoriel CSS: CSS Selectors
CSS Référence: CSS .class Sélecteur
HTML DOM Référence: document. getElementsByClassName()
HTML DOM Référence: className Property
HTML DOM Référence: classList Property
HTML DOM Référence: HTML DOM style objet