JavaScript zapewnia różnorodne funkcje, które mogą pomóc nam ulepszyć nasze strony internetowe. Wspólną funkcją, którą widzimy na różnych stronach internetowych, jest ukrywanie elementów obecnych na stronie internetowej, klikając przycisk. Możemy wykonać to zadanie na wiele sposobów za pomocą różnych funkcji JavaScript.

W tym artykule zbadano użycie getElementBlassName (), aby ukryć elementy strony internetowej.

Poniżej znajdują się punkty, które zostały omówione w tym artykule wraz z przykładowymi kodami:

• Wprowadzenie do metody GetElementByClassName () JavaScript
• Właściwości JavaScript używane do ukrywania elementów
• Ukrywanie pojedynczego elementu strony internetowej za pomocą metody getElementByClassName ()
• Ukrywanie wielu elementów związanych z określoną klasą
• Ukrywanie wszystkich węzłów dziecięcych elementu powiązanego z określoną klasą
• Ukrywanie tylko określonych węzłów dziecięcych elementu powiązanego z określoną klasą

getElementsByClassName ()

Jedną z ważnych i podstawowych funkcji JavaScript, która dotyczy elementów obecnych na stronie internetowej getElementsByClassName (). Ta funkcja zapewnia strumień HTML elementów powiązanych z określoną nazwą klasy.

Składnia

Składnia tej metody podano poniżej:

W powyższej instrukcji kodu pokazano składnię metody getElementByClassName ().

Tutaj metoda getEntsByClassName () zwraca element obecny indeks 0, Powiązane z klasą Ptaki W zadeklarowanej zmiennej strumień.

Ponieważ podstawowy cel i składnia getelementsBlassName () zostały wyjaśnione powyżej. Teraz spróbujmy ukryć elementy strony internetowej za pomocą tej funkcji.

Jakie są właściwości JavaScript, które są używane do ukrywania elementów?

Przed wskoczeniem do zadania zobaczmy dwie właściwości stylizacji, za pomocą których elementy mogą być ukryte na stronie internetowej. Te dwie właściwości opisano poniżej:

widoczność = „ukryty”: Ta właściwość służy tylko do ukrywania elementów i nie usuwa przestrzeni połączonej z tym elementem

display = „Brak”: Ta właściwość służy do ukrycia elementów, a także usuwa przestrzeń połączoną z tym elementem

Użyjemy obu właściwości w różnych scenariuszach, aby łatwo było znaleźć działanie i praktyczne różnice tych dwóch właściwości.

Jak ukryć pojedynczy element strony internetowej za pomocą metody getElementByClassName ()?

Podany poniżej fragment przedstawia tworzenie strony internetowej z nagłówkiem, odrobiną tekstu, listą ptaków i listy zwierząt wraz z przyciskiem do kliknięcia.

Html

Ukryj ptaki przed listą

Kliknij przycisk, aby ukryć element według nazwy klasy

Wróbel
Gołąb
Lew
Jeleń
Papuga
Sowa
Wilk
Koń

Następujący obraz przedstawia powyższy kod z odrobiną opisu.

Zapisz kod i uruchom plik; Podobna strona internetowa pojawi się na ekranie przeglądarki, jak pokazano poniżej.

Napiszmy skrypt, aby ukryć jeden element z tej strony. Scenariusz polega na tym, że po kliknięciu podanego przycisku tylko nazwa pierwszego ptaka powinna być ukryta przed ekranem, a reszta nazw ptaków i zwierząt powinna pozostać na ekranie.
JS

funkcjahideelement ()
const Stream = Dokument.getEntsByClassName („ptak”) [0];
strumień.styl.Visibility = „Hidden”;

Snippet z krótkim opisem powyższego kodu jest podany poniżej.

Zapisz plik i uruchom go. Przeglądarka wyświetli następującą stronę internetową. Na poniższym obrazie można zobaczyć, że kiedy Kliknij, aby ukryć przycisk jest naciśnięty wróbel który jest przedmiotem klasy ptak obecny na indeks [0] staje się ukryty Ale przestrzeń połączona z tym obiektem jest nadal dostępna:

Jak ukryć wiele elementów strony internetowej za pomocą metody getElementByClassName ()?

Aby ukryć wiele elementów związanych z klasą ptak, Tylko JavaScript musi zostać zaktualizowany; Reszta kodu HTML dla strony internetowej pozostanie taka sama. Zaktualizować scenariusz Kod z kodem podanym poniżej:

funkcjahideelement ()
const allbirds = dokument.getElementsByClassName („ptak”);
dla (strumień const Allbirds)
strumień.styl.display = „Brak”;

;

Snippet z krótkim opisem powyższego kodu znajduje się poniżej:

W powyższym kodzie można zauważyć, że zamiast korzystania z właściwości widoczności do ukrywania elementów, właściwość wyświetlacza została użyta dla wyżej wymienionego celu. Zapisz ten skrypt kodu i uruchom go:

W powyższym kodzie kliknij Kliknij, aby ukryć przycisk ukryje wszystkie nazwy ptaków wraz z ich połączonymi przestrzeniami.

Jak ukryć dzieci elementu strony internetowej powiązanej z klasą za pomocą metody getElementByClassName ()?

Aby ukryć dzieci elementu strony internetowej, najpierw wprowadzaj zmiany w kodzie HTML i utwórz niektóre dzieci:

Ukryj ptaki przed listą

Kliknij przycisk, aby ukryć element według nazwy klasy

Wróbel

Gołąb

Sowa

Lew

Jeleń

Wilk

Po zaktualizowaniu kodu HTML dokonaj również zmian w skrypcie. Właściwość używana do ukrycia wszystkich dzieci w klasie jest widoczność właściwość o wartości ukryty.

funkcjahideelement ()
const Stream = Dokument.getEntsByClassName („ptak”) [0];
strumień.styl.Visibility = „Hidden”;

Po zapisywaniu i wykonywaniu pliku z powyższymi zmianami. Na ekranie pojawi się następująca strona internetowa. Po kliknięciu przycisku dziecięce ptaka klasowego zostaną ukryte przed ekranem, ale przestrzeń połączona z tymi dziećmi pozostanie na ekranie, jak pokazano poniżej, ponieważ właściwość widoczności została użyta zamiast właściwości wyświetlacza.

Jak ukryć określone dzieci elementu strony internetowej powiązanej z klasą za pomocą metody getElementBassName ()?

Aby ukryć określone dzieci mające określone elementy w klasie, najpierw wprowadzajmy zmiany w kodzie HTML i utwórz różne dzieci w klasie ptak z innym elementy:

Wrona

Wróbel

Gołąb

Orzeł

Sowa

Po zmianie w kodzie HTML zaktualizuj skrypt za pomocą następującego kodu skryptu:

funkcjahideelement ()
const Stream = Dokument.getElementsByClassName („ptak”);
dla (niech n w strumieniu [0].childnodes)
if (strumień [0].Childnodes [n].NodeName === „H1” || Stream [0].Childnodes [n].nodename === „H4”)
Stream [0].Childnodes [n].styl.display = „Brak”;

Poniżej migawka zawiera krótki opis powyższego kodu skryptu.

Podczas wykonywania powyższego kodu podobna strona internetowa pojawi się na ekranie. Po naciśnięciu przycisku kliknięcia wszystkie Childnodes klasy ptak będą ukryte wraz z zajętą ​​przestrzenią:

Wniosek

Aby ukryć elementy w JavaScript, można użyć dwóch właściwości stylizacji widoczność I wyświetlacz. getElementsByClassName () Metoda służy do pobierania elementu w kodzie JavaScript. Artykuł zawiera różne sposoby, w których getElementsByClassName () służy do ukrycia pojedynczego elementu, wielu elementów, dziecięcych klas i określonych dzieci w klasie.