JavaScript offre une variété de fonctions qui peuvent nous aider à améliorer nos sites Web. Une fonctionnalité commune que nous voyons sur différents sites Web est de masquer les éléments présents sur le site Web simplement en cliquant sur un bouton. Nous pouvons faire cette tâche de plusieurs manières en utilisant différentes fonctions JavaScript.

Dans cet article, l'utilisation de GetElementByClassName () a été explorée pour cacher les éléments d'une page Web.

Voici les points qui ont été couverts dans cet article ainsi que l'exemple de codes:

• Introduction à GetElementByClassName () Méthode de JavaScript
• Propriétés de JavaScript utilisé pour cacher des éléments
• Cacher un élément unique d'une page Web en utilisant GetElementByClassName ()
• Cacher plusieurs éléments associés à une classe spécifique
• Cacher tous les nœuds enfants d'un élément associé à une classe spécifique
• Cacher uniquement des nœuds enfants spécifiques d'un élément associé à une classe spécifique

getElementsByClassName ()

L'une des fonctions importantes et de base de JavaScript qui traite des éléments présents sur une page Web est getElementsByClassName (). Cette fonction fournit un flux HTML d'éléments associés à un nom de classe spécifié.

Syntaxe

La syntaxe de cette méthode est fournie ci-dessous:

Dans l'instruction de code ci-dessus, la syntaxe de GetElementByClassName () a été affichée.

Ici, la méthode getElementsByClassName () renvoie un élément présent sur Index 0, associé à la classe Des oiseaux dans la variable déclarée flux.

Comme l'objectif de base et la syntaxe de GetElementsByClassName () ont été expliqués ci-dessus. Essayons maintenant de masquer les éléments de page Web en utilisant cette fonction.

Quelles sont les propriétés de JavaScript qui sont utilisées pour cacher des éléments?

Avant de sauter vers la tâche, voyons les deux propriétés de style à travers lesquelles les éléments peuvent être cachés sur une page Web. Ces deux propriétés sont décrites ci-dessous:

Visibilité = «cachée»: Cette propriété est utilisée pour ne pas masquer les éléments et il ne supprime pas l'espace lié à cet élément

affiche = 'Aucun': Cette propriété est utilisée pour masquer les éléments et il supprime également l'espace lié à cet élément

Nous utiliserons les deux propriétés dans différents scénarios afin qu'il soit facile de trouver le fonctionnement et les différences pratiques de ces deux propriétés.

Comment masquer un seul élément d'une page Web à l'aide de GetElementByClassName ()?

L'extrait ci-dessous représente la création d'une page Web avec une rubrique, un peu de texte, une liste d'oiseaux et une liste d'animaux avec un bouton pour cliquer.

Html

Masquer les oiseaux de la liste

Cliquez sur le bouton pour masquer l'élément par nom de classe

Moineau
Pigeon
Lion
Cerf
Perroquet
Hibou
Loup
Cheval

L'image suivante illustre le code ci-dessus avec un peu de description.

Enregistrez le code et exécutez le fichier; Une page Web similaire apparaîtra sur l'écran de votre navigateur comme indiqué ci-dessous.

Écrivons un script pour masquer un seul élément à cette page Web. Le scénario est qu'en cliquant sur le bouton donné, seul le nom du premier oiseau doit être caché de l'écran, et le reste des noms d'oiseau et d'animaux doit rester à l'écran.
Js

functionhideElement ()
const Stream = document.getElementsByClassName ('Bird') [0];
flux.style.visibilité = «cachée»;

Un extrait avec la brève description du code ci-dessus est fourni ci-dessous.

Enregistrez le fichier et exécutez-le. Le navigateur affichera la page Web suivante. Dans l'image ci-dessous, on peut voir que lorsque le Cliquez pour se cacher le bouton est appuyé sur le moineau qui est l'objet de la classe oiseau présenter index [0] devient caché Mais l'espace lié à cet objet est toujours là:

Comment masquer plusieurs éléments d'une page Web à l'aide de GetElementByClassName ()?

Pour cacher plusieurs éléments associés à la classe oiseau, Seul le JavaScript doit être mis à jour; Le reste du code HTML pour la page Web restera le même. Mettre à jour le scénario Code avec le code ci-dessous:

functionhideElement ()
const allBirds = document.GetElementsByClassName («oiseau»);
for (const Stream of allBirds)
flux.style.affiche = 'aucun';

;

Un extrait avec la brève description du code ci-dessus est fourni ci-dessous:

Dans le code ci-dessus, on peut voir qu'au lieu d'utiliser la propriété de visibilité pour cacher les éléments, la propriété d'affichage a été utilisée à des fins susmentionnées. Enregistrez ce script de code et exécutez-le:

Dans le code ci-dessus, le clic sur le Cliquez pour se cacher Le bouton masquera tous les noms des oiseaux avec leurs espaces liés.

Comment masquer les nodes de chantier d'un élément d'une page Web associée à une classe utilisant GetElementByClassName ()?

Pour cacher les notes de noeud d'un élément d'une page Web, apportez d'abord des modifications dans le code HTML et créez des nodes de chydrode:

Masquer les oiseaux de la liste

Cliquez sur le bouton pour masquer l'élément par nom de classe

Moineau

Pigeon

Hibou

Lion

Cerf

Loup

Après avoir mis à jour le code HTML, apportez également des modifications au script. La propriété utilisée pour cacher tous les nodes de noeud d'une classe est visibilité propriété avec la valeur caché.

functionhideElement ()
const Stream = document.getElementsByClassName ('Bird') [0];
flux.style.visibilité = «cachée»;

En enregistrant et en exécutant le fichier avec les modifications ci-dessus. La page Web suivante apparaîtra à l'écran. En cliquant sur le bouton, les nodes de noeud enfants de l'oiseau de classe deviendront cachées de l'écran, mais l'espace lié à ces nombres enfants restera sur l'écran comme indiqué ci-dessous parce que la propriété de visibilité a été utilisée à la place de la propriété d'affichage.

Comment masquer des nodes d'enfants spécifiques d'un élément d'une page Web associée à une classe utilisant GetElementByClassName ()?

Pour masquer les nodes d'enfants spécifiques ayant des éléments spécifiques à l'intérieur d'une classe, apportons d'abord les modifications du code HTML et créons différentes notes d'enfants dans la classe oiseau avec différent éléments:

Corbeau

Moineau

Pigeon

Aigle

Hibou

Après la modification du code HTML, mettez également à jour le script avec le code de script suivant:

functionhideElement ()
const Stream = document.GetElementsByClassName («oiseau»);
pour (LET N EN STOUR [0].ChildNodes)
if (stream [0].NidNodes pour enfants [n].nodename === 'h1' || Stream [0].NidNodes pour enfants [n].nodename === 'h4')
Stream [0].NidNodes pour enfants [n].style.affiche = 'aucun';

Ci-dessous Snapshot fournit une brève description du code de script ci-dessus.

Lors de l'exécution du code ci-dessus, une page Web similaire apparaît à l'écran. Lorsque le bouton Click est appuyé sur tous les noeuds infilaires de classe oiseau sera caché avec leur espace occupé:

Conclusion

Pour cacher les éléments dans un javascript, deux propriétés de style peuvent être utilisées qui sont visibilité et afficher. Le getElementsByClassName () La méthode est utilisée pour récupérer l'élément dans le code JavaScript. L'article fournit différentes façons par lesquelles le getElementsByClassName () est utilisé pour masquer un seul élément, plusieurs éléments, des notes d'enfants d'une classe et des nodes de notes pour enfants spécifiques d'une classe.