JavaScript bietet eine Vielzahl von Funktionen, mit denen wir unsere Websites verbessern können. Eine gemeinsame Funktion, die wir auf verschiedenen Websites sehen, besteht darin, Elemente zu verbergen, die auf der Website vorhanden sind, indem Sie auf eine Schaltfläche klicken. Wir können diese Aufgabe auf verschiedene Weise mit verschiedenen JavaScript -Funktionen erledigen.

In diesem Artikel wurde die Verwendung von GetelementByClassName () untersucht, um die Elemente einer Webseite zu verbergen.

Im Folgenden finden Sie die Punkte, die in diesem Artikel zusammen mit den Beispielcodes behandelt wurden:

• Einführung in GetElementByClassName () Methode von JavaScript
• Eigenschaften von JavaScript zum Verbergen von Elementen
• Ein einzelnes Element einer Webseite mithilfe von GetElementByClassName () -Methode verbergen
• Verstecken Sie mehrere Elemente, die einer bestimmten Klasse zugeordnet sind
• Alle Kinderknoten eines Elements verstecken, das einer bestimmten Klasse zugeordnet ist
• Nur bestimmte untergeordnete Knoten eines Elements verstecken, das einer bestimmten Klasse zugeordnet ist

GetElements byclassName ()

Eine der wichtigen und grundlegenden Funktionen von JavaScript, die sich mit den auf einer Webseite vorhandenen Elementen befassen, ist GetElements byclassName (). Diese Funktion liefert einen HTML -Strom von Elementen, die einem bestimmten Klassennamen zugeordnet sind.

Syntax

Die Syntax dieser Methode ist unten bereitgestellt:

In der obigen Code -Anweisung wurde die Syntax der GetElementByClassName () -Methode gezeigt.

Hier gibt die Methode GetElements byclassName () ein vorhandenes Element zurück, auf dem Index 0, mit der Klasse verbunden Vögel in der deklarierten Variablen Strom.

Als grundlegender Zweck und Syntax von GetElements byclassName () wurde oben erklärt. Versuchen wir nun, Webseitenelemente mit dieser Funktion zu verbergen.

Was sind die Eigenschaften von JavaScript, mit denen Elemente verbergt werden??

Lassen Sie uns die beiden Styling -Eigenschaften sehen, durch die die Elemente auf einer Webseite versteckt werden können. Diese beiden Eigenschaften werden nachstehend beschrieben:

Sichtbarkeit = 'versteckt': Diese Eigenschaft wird verwendet, um nur die Elemente zu verbergen und entzieht den mit diesem Element verbundenen Raum nicht

display = 'keine' ': Diese Eigenschaft wird verwendet, um die Elemente zu verbergen, und es entfernt auch den mit diesem Element verknüpften Raum

Wir werden beide Eigenschaften in verschiedenen Szenarien verwenden, damit es leicht ist, die Funktionen und praktische Unterschiede dieser beiden Eigenschaften herauszufinden.

So verbergen Sie ein einzelnes Element einer Webseite mit GetElementByClassName () -Methode?

Der unten angegebene Ausschnitt zeigt die Erstellung einer Webseite mit einer Überschrift, etwas Text, einer Liste von Vögeln und einer Liste von Tieren sowie einer Schaltfläche zum Klicken.

Html

Vögel aus der Liste verstecken

Klicken Sie auf die Schaltfläche, um das Element nach Klassennamen auszublenden

Spatz
Taube
Löwe
Reh
Papagei
Eule
Wolf
Pferd

Das folgende Bild zeigt den obigen Code mit ein wenig Beschreibung.

Speichern Sie den Code und führen Sie die Datei aus. Eine ähnliche Webseite wird auf Ihrem Browser -Bildschirm angezeigt, wie unten gezeigt.

Schreiben wir ein Skript, um ein einzelnes Element auf dieser Webseite auszublenden. Das Szenario ist, dass beim Klicken auf die angegebene Schaltfläche nur der erste Vogel Name vor dem Bildschirm versteckt sein sollte und der Rest des Vogel- und Tiernamens auf dem Bildschirm bleiben sollte.
JS

functionHideElement ()
const stream = dokument.GetElementsByClassName ('Bird') [0];
Strom.Stil.Sichtbarkeit = 'versteckt';

Ein Ausschnitt mit der kurzen Beschreibung des obigen Code ist unten bereitgestellt.

Speichern Sie die Datei und führen Sie sie aus. Der Browser zeigt die folgende Webseite an. Im folgenden Bild ist zu sehen, dass wenn die Klicken Sie hier, um sich auszublenden Die Taste wird gedrückt, die Spatz Welches ist das Objekt der Klasse Vogel derzeit Index [0] wird versteckt Aber der mit diesem Objekt verbundene Raum ist immer noch da:

So verbergen Sie mehrere Elemente einer Webseite mit GetElementByClassName () -Methode?

Mehrere Elemente zu verbergen, die mit der Klasse verbunden sind Vogel, Das JavaScript muss nur aktualisiert werden. Der Rest des HTML -Codes für die Webseite bleibt gleich. Aktualisieren Sie die Skript Code mit dem unten angegebenen Code:

functionHideElement ()
const allbirds = dokument.GetElements ByclassName ('Bird');
für (const Stream of AllBirds)
Strom.Stil.display = 'keine';

;

Ein Ausschnitt mit der kurzen Beschreibung des oben genannten Code ist unten angegeben:

Im obigen Code ist ersichtlich, dass anstatt die Sichtbarkeitseigenschaft zum Verstecken der Elemente zu verwenden, die Anzeigeeigenschaft für den oben genannten Zweck verwendet wurde. Speichern Sie dieses Codeskript und führen Sie es aus:

Im obigen Code klicken Sie im obigen Code auf die Klicken Sie hier, um sich auszublenden Button verbergt alle Namen der Vögel zusammen mit ihren verknüpften Räumen.

So verbergen Sie Childnodes eines Elements einer Webseite, die einer Klasse mit GetElementByClassName () -Methode zugeordnet ist?

Um die Childnodes eines Elements einer Webseite zu verbergen, nehmen Sie zunächst Änderungen im HTML -Code vor und erstellen Sie einige Childnodes:

Vögel aus der Liste verstecken

Klicken Sie auf die Schaltfläche, um das Element nach Klassennamen auszublenden

Spatz

Taube

Eule

Löwe

Reh

Wolf

Nehmen Sie nach dem Aktualisieren des HTML -Codes auch Änderungen im Skript vor. Die Eigenschaft, die verwendet wird, um alle Kinder einer Klasse zu verbergen Sichtweite Eigenschaft mit dem Wert versteckt.

functionHideElement ()
const stream = dokument.GetElementsByClassName ('Bird') [0];
Strom.Stil.Sichtbarkeit = 'versteckt';

Beim Speichern und Ausführen der Datei mit den oben genannten Änderungen. Die folgende Webseite wird auf dem Bildschirm angezeigt. Wenn Sie auf die Schaltfläche klicken, werden die Childnodes des Klassenvogels vor dem Bildschirm aus verborgen.

So verbergen Sie bestimmte Kindernoten eines Elements einer Webseite, die mit einer Klasse zugeordnet ist, indem Sie GetElementByClassName () -Methode haben?

Um die spezifischen Childnodes mit bestimmten Elementen in einer Klasse zu verbergen, nehmen wir zunächst Änderungen im HTML Vogel mit unterschiedlichen Elemente:

Krähe

Spatz

Taube

Adler

Eule

Aktualisieren Sie nach der Änderung im HTML -Code auch das Skript mit dem folgenden Skriptcode:

functionHideElement ()
const stream = dokument.GetElements ByclassName ('Bird');
für (lass n im Stream [0].Childnodes)
if (Stream [0].Childnodes [n].nodhename === 'H1' || Stream [0].Childnodes [n].nodhename === 'H4')
Stream [0].Childnodes [n].Stil.display = 'keine';

Nachfolgend Snapshot enthält eine kurze Beschreibung des oben genannten Skriptcode.

Bei der Ausführung des oben genannten Code wird eine ähnliche Webseite auf dem Bildschirm angezeigt. Wenn die Klick -Taste gedrückt wird, wird alle gedrückt Kinder der Klasse Vogel wird zusammen mit ihrem besetzten Raum versteckt sein:

Abschluss

Um die Elemente in einem JavaScript zu verbergen, können zwei Styling -Eigenschaften verwendet werden, die sind Sichtweite Und Anzeige. Der GetElements byclassName () Die Methode wird verwendet, um das Element im JavaScript -Code abzurufen. Der Artikel bietet verschiedene Möglichkeiten, auf die die GetElements byclassName () wird verwendet, um ein einzelnes Element, mehrere Elemente, Childnoden einer Klasse und bestimmte Kinder einer Klasse zu verbergen.