JavaScript gir en rekke funksjoner som kan hjelpe oss med å forbedre nettstedene våre. Et vanlig trekk vi ser på forskjellige nettsteder er å skjule elementer som er til stede på nettstedet bare ved å klikke på en knapp. Vi kan gjøre denne oppgaven på flere måter ved å bruke forskjellige JavaScript -funksjoner.

I denne artikkelen har bruken av getElementByClassName () blitt utforsket for å skjule elementene på en webside.

Følgende er punktene som er dekket i denne artikkelen sammen med eksemplene koder:

• Introduksjon til GetElementByClassName () Metode for JavaScript
• Egenskaper til JavaScript brukes til å skjule elementer
• Skjuler enkeltelement på en webside ved å bruke getElementByClassName () -metode
• Skjuler flere elementer tilknyttet en bestemt klasse
• Skjuler alle barneknutene til et element tilknyttet en spesifikk klasse
• Skjuler bare spesifikke barneknuter av et element tilknyttet en spesifikk klasse

getElementsByClassName ()

En av de viktige og grunnleggende funksjonene til JavaScript som omhandler elementene som er til stede på en webside er getElementsByClassName (). Denne funksjonen gir en HTML -strøm av elementer assosiert med et spesifisert klassenavn.

Syntaks

Syntaks for denne metoden er gitt nedenfor:

I ovennevnte kodeuttalelse er syntaks for getElementByClassName () -metoden vist.

Her returnerer metoden getElementsByClassName () et element til stede på Indeks 0, tilknyttet klassen Fugler I den erklærte variabelen strøm.

Som det grunnleggende formålet og syntaks for getElementsByClassName () er blitt forklart ovenfor. La oss nå prøve å skjule websideelementer ved å bruke denne funksjonen.

Hva er egenskapene til JavaScript som brukes til å skjule elementer?

Før du hopper mot oppgaven, la oss se de to stylingegenskapene som elementene kan skjules på en webside. Disse to egenskapene er beskrevet nedenfor:

synlighet = 'skjult': Denne egenskapen brukes til å bare skjule elementene, og den fjerner ikke plassen som er knyttet til det elementet

display = 'ingen': Denne egenskapen brukes til å skjule elementene, og den fjerner også plassen som er knyttet til det elementet

Vi vil bruke begge egenskapene i forskjellige scenarier, slik at det vil være lett å finne ut arbeid og praktiske forskjeller i disse to egenskapene.

Hvordan skjule et enkelt element på en webside ved hjelp av getElementByClassName () -metode?

Utdraget gitt nedenfor viser opprettelsen av en webside med en overskrift, litt tekst, en liste over fugler og en liste over dyr sammen med en knapp for å klikke.

Html

Skjul fugler fra listen

Klikk på knappen for å skjule elementet etter klassenavn

spurv
Due
Løve
Hjort
Papegøye
Ugle
Ulv
Hest

Følgende bilde viser koden ovenfor med litt beskrivelse.

Lagre koden og kjør filen; En lignende webside vises på nettleserskjermen som vist nedenfor.

La oss skrive et skript for å skjule et enkelt element fra denne websiden. Scenariet er at når du klikker på den gitte knappen, bare det første fuglens navn skal være skjult for skjermen, og resten av fuglen og dyrenavnene skal forbli på skjermen.
JS

funksjonHideElement ()
const stream = dokument.getElementsByClassName ('Bird') [0];
strøm.stil.synlighet = 'skjult';

Et utdrag med den korte beskrivelsen av ovennevnte kode er gitt nedenfor.

Lagre filen og kjør den. Nettleseren vil vise følgende webside. I det gitte bildet nedenfor kan det sees at når Klikk for å skjule Knappen er trykket på spurv som er gjenstanden for klassen fugl til stede kl indeks [0] blir skjult Men plassen knyttet til dette objektet er fremdeles der:

Hvordan skjule flere elementer på en webside ved hjelp av getElementByClassName () -metode?

Å skjule flere elementer som er tilknyttet klassen fugl, Bare JavaScript må oppdateres; Resten av HTML -koden for websiden vil forbli den samme. Oppdater manus Kode med koden gitt nedenfor:

funksjonHideElement ()
const allbirds = dokument.getElementsByClassName ('Bird');
for (const stream of allbirds)
strøm.stil.display = 'ingen';

;

Et utdrag med den korte beskrivelsen av ovennevnte kode er gitt nedenfor:

I koden ovenfor kan det sees at i stedet for å bruke synlighetsegenskapen for å skjule elementene, har visningsegenskapen blitt brukt til det nevnte formålet. Lagre dette kodeskriptet og kjør det:

I koden ovenfor, klikk på Klikk for å skjule Knappen vil skjule alle fuglernes navn sammen med sine koblede rom.

Hvordan skjule barnehjem på et element på en webside tilknyttet en klasse ved bruk av getElementByClassName () -metode?

For å skjule barnelappene til et element på en webside, gjør du først endringer i HTML -koden og oppretter noen barnebarn:

Skjul fugler fra listen

Klikk på knappen for å skjule elementet etter klassenavn

spurv

Due

Ugle

Løve

Hjort

Ulv

Etter å ha oppdatert HTML -koden, gjør du endringer i skriptet også. Eiendommen som brukes til å skjule alle barneknoder i en klasse er synlighet Eiendom med verdien skjult.

funksjonHideElement ()
const stream = dokument.getElementsByClassName ('Bird') [0];
strøm.stil.synlighet = 'skjult';

På lagring og utførelse av filen med ovennevnte endringer. Følgende webside vises på skjermen. Når du klikker på knappen, vil barnehovedene til klassefuglen bli skjult for skjermen, men plassen som er koblet til disse barneknappene, vil forbli på skjermen som vist nedenfor fordi synlighetsegenskapen har blitt brukt i stedet for visningsegenskapen.

Hvordan skjule spesifikke barneknoder av et element på en webside tilknyttet en klasse ved bruk av getElementByClassName () -metode?

For å skjule de spesifikke barneknodene som har spesifikke elementer i en klasse, la oss først gjøre endringer i HTML -koden og lage forskjellige barnehager i klassen fugl med annerledes elementer:

Kråke

spurv

Due

Ørn

Ugle

Etter endringen i HTML -koden, oppdater også skriptet med følgende skriptkode:

funksjonHideElement ()
const stream = dokument.getElementsByClassName ('Bird');
for (la n i strømmen [0].barnehjem)
if (stream [0].Childnodes [n].Nodename === 'H1' || Strøm [0].Childnodes [n].Nodename === 'H4')
Strøm [0].Childnodes [n].stil.display = 'ingen';

Nedenfor gir øyeblikksbilde en kort beskrivelse av skriptkoden ovenfor.

Når du utfører koden ovenfor, vises en lignende webside på skjermen. Når klikk -knappen trykkes på alle Barneknoder av klasse fugl vil være skjult sammen med deres okkuperte rom:

Konklusjon

For å skjule elementene i et JavaScript, kan to stylingegenskaper brukes som er synlighet og vise. De getElementsByClassName () Metoden brukes til å hente elementet i JavaScript -koden. Artikkelen gir forskjellige måter som getElementsByClassName () Brukes til å skjule et enkelt element, flere elementer, barneknoder i en klasse og spesifikke barnehogger i en klasse.