Javascript getElementsByClassName

Dans JavaScript, la méthode GetElementsByClassName () est très utile pour accéder aux éléments qui correspondent à tous les noms de classe passés comme arguments. De plus, il renvoie une htmlcollection qui contient chaque élément descendant. En outre, cette méthode aide également à récupérer les éléments HTML requis, à les stocker en variables et à effectuer les fonctionnalités requises en utilisant JavaScript.

Cet article guidera sur la mise en œuvre du «getElementsByClassName ()»Méthode en JavaScript.

Qu'est-ce que JavaScript GetElementsByClassName ()?

Le "getElementsByClassName ()”La méthode renvoie les éléments ayant le nom de classe spécifié, qui est passé comme argument. Il renvoie un objet qui ressemble à un tableau de tous les éléments enfants avec les noms de classe spécifiés. De plus, il comprend la collection HTML de tous les éléments enfants.

Comment utiliser JavaScript GetElementsByClassName ()?

Dans le but d'utiliser JavaScript GetElementsByClassName () dans JavaScript, suivez la syntaxe donnée:

élément.getElementsByClassName (className)

Dans la syntaxe donnée, "nom du cours"L'argument obligatoire est-il adopté. C'est la valeur de chaîne qui fait référence aux noms de classe uniques ou multiples.

Exemple 1: récupérer un seul élément à l'aide de getElementByClassName ()
Dans l'exemple suivant, premièrement, nous créerons un div, lui attribuerons une «classe» et ajouterons du texte:

Implémentation de la classe

Maintenant, appliquez le «getElementsByClassName ()”Méthode pour accéder à Created Div en passant le nom de classe comme argument:

var x = document.getElementsByClassName ('class');

Enfin, affichez la valeur résultante sur le DOM en utilisant le «document.écrire()" méthode. Cela renverra un objet de type tableau:

document.écrire (x);

La sortie correspondante sera:

Dans la sortie ci-dessus, l'objet HTMLCollection] fait référence à l'objet de type tableau.

Exemple 2: récupérer plusieurs éléments à l'aide de getElementsByClassName ()
Dans l'exemple suivant, premièrement, nous ajouterons trois cases à cocher à l'aide de la balise, affectez-leur la même classe que «égouter»Et ajoutez le texte requis comme indiqué ci-dessous:

Python

Javascrip

Html

Maintenant, incluez une case à cocher supplémentaire avec la valeur "Tout sélectionner"Et attachez un"sur clic()»Événement pour cela pour que lorsque la case à cocher soit sélectionnée, le«vérifier()"La fonction est appelée avec l'argument"ce«Comme suit:

Tout sélectionner

Ensuite, dans le fichier JavaScript, définissez une fonction appelée «vérifier()"Avec une variable nommée"cocher"Comme argument faisant référence à"ce»Spécifié avant. Maintenant, accédez à la case à cocher à l'aide du document.getElementsByClassName () Méthode et placer la valeur de l'attribut de classe "égouter"Comme son argument. Enfin, utilisez un «pour”Boucle pour itérer chaque valeur dans une case à cocher et utiliser l'attribut« coché »pour marquer chaque valeur comme coché:

Fonction Check (Checkbox)
get = document.getElementsByClassName ('lang');
pour (var i = 0; iObtenez [je].coché = coche.vérifié;

Sortir

Nous avons compilé l'utilisation de la méthode GetElementsByClassName () en utilisant divers exemples.

Conclusion

Le "getElementsByClassName ()”La méthode renvoie les éléments ayant le nom de classe spécifié, qui est passé comme argument. Il renvoie un objet qui ressemble à un tableau de tous les éléments enfants avec les noms de classe spécifiés. Vous pouvez utiliser cette méthode pour sélectionner des éléments HTML uniques ou multiples ayant le même nom de classe. Cet article a expliqué l'utilisation de la méthode GetElementsByClassName () à l'aide de divers exemples.