JavaScript fornisce una varietà di funzioni che possono aiutarci a migliorare i nostri siti Web. Una funzionalità comune che vediamo su diversi siti Web è nascondere elementi presenti sul sito Web semplicemente facendo clic su un pulsante. Possiamo fare questo compito in diversi modi utilizzando diverse funzioni JavaScript.

In questo articolo, l'uso di getElementByClassName () è stato esplorato per nascondere gli elementi di una pagina web.

Di seguito sono riportati i punti che sono stati trattati in questo articolo insieme ai codici di esempio:

• Introduzione al metodo getElementByClassName () di JavaScript
• Proprietà di JavaScript utilizzate per nascondere gli elementi
• Nascondere un singolo elemento di una pagina Web utilizzando il metodo getElementByClassName ()
• Nascondere più elementi associati a una classe specifica
• Nascondere tutti i nodi figlio di un elemento associato a una classe specifica
• Nascondere solo i nodi figlio specifici di un elemento associato a una classe specifica

getElementsByClassName ()

Una delle funzioni importanti e di base di JavaScript che si occupa degli elementi presenti su una pagina web è getElementsByClassName (). Questa funzione fornisce un flusso HTML di elementi associati a un nome di classe specificato.

Sintassi

La sintassi di questo metodo è fornita di seguito:

Nell'istruzione di codice sopra, è stata mostrata la sintassi del metodo getElementByClassName ().

Qui, il metodo getElementsByClassName () restituisce un elemento presente INDICE 0, associato alla classe Uccelli Nella variabile dichiarata flusso.

Poiché lo scopo di base e la sintassi di getElementsByClassName () sono stati spiegati sopra. Ora proviamo a nascondere gli elementi della pagina web usando questa funzione.

Quali sono le proprietà di JavaScript che vengono utilizzate per nascondere gli elementi?

Prima di saltare verso il compito, vediamo le due proprietà di stile attraverso le quali gli elementi possono essere nascosti su una pagina web. Queste due proprietà sono descritte di seguito:

visibilità = 'nascosto': Questa proprietà viene utilizzata per nascondere solo gli elementi e non rimuove lo spazio collegato a quell'elemento

display = 'nessuno': Questa proprietà viene utilizzata per nascondere gli elementi e rimuove anche lo spazio collegato a quell'elemento

Useremo entrambe le proprietà in diversi scenari in modo che sia facile scoprire il funzionamento e le differenze pratiche di queste due proprietà.

Come nascondere un singolo elemento di una pagina Web usando il metodo getElementByClassName ()?

Lo snippet indicato di seguito raffigura la creazione di una pagina web con un'intestazione, un po 'di testo, un elenco di uccelli e un elenco di animali insieme a un pulsante per fare clic su.

Html

Nascondi gli uccelli dall'elenco

Fai clic sul pulsante per nascondere l'elemento per nome della classe

Passero
Piccione
Leone
Cervo
Pappagallo
Gufo
Lupo
Cavallo

La seguente immagine raffigura il codice sopra con un po 'di descrizione.

Salva il codice ed esegui il file; Una pagina web simile apparirà nella schermata del browser come mostrato di seguito.

Scriviamo uno script per nascondere un singolo elemento da questa pagina web. Lo scenario è che facendo clic sul pulsante indicato, solo il nome del primo uccello dovrebbe essere nascosto dallo schermo e il resto dei nomi degli uccelli e degli animali dovrebbe rimanere sullo schermo.
Js

functionHideElement ()
const stream = document.getElementsByClassName ('Bird') [0];
flusso.stile.visibilità = 'nascosto';

Di seguito è fornito uno snippet con la breve descrizione del codice sopra.

Salva il file ed eseguilo. Il browser visualizzerà la seguente pagina Web. Nell'immagine indicata di seguito, si può vedere che quando il Fai clic per nascondersi il pulsante viene premuto il passero che è l'oggetto della classe uccello presente a indice [0] diventa nascosto Ma lo spazio collegato a questo oggetto è ancora lì:

Come nascondere più elementi di una pagina web usando il metodo getElementByClassName ()?

Per nascondere più elementi associati alla classe uccello, Solo JavaScript deve essere aggiornato; Il resto del codice HTML per la pagina Web rimarrà lo stesso. Aggiorna il sceneggiatura Codice con il codice indicato di seguito:

functionHideElement ()
const allbirds = documento.getElementsByClassName ('Bird');
per (const flusso di Allbirds)
flusso.stile.Display = 'Nessuno';

;

Di seguito è fornito uno snippet con la breve descrizione del codice sopra:

Nel codice sopra, si può vedere che invece di utilizzare la proprietà di visibilità per nascondere gli elementi, la proprietà del display è stata utilizzata per lo scopo di cui sopra. Salva questo script di codice ed eseguilo:

Nel codice sopra, il clic su Fai clic per nascondersi Il pulsante nasconderà tutti i nomi degli uccelli insieme ai loro spazi collegati.

Come nascondere i negri di un elemento di una pagina web associata a una classe usando il metodo getElementByClassName ()?

Per nascondere i negri di un elemento di una pagina Web, apportare in primo luogo le modifiche al codice HTML e creare alcuni negri infantili:

Nascondi gli uccelli dall'elenco

Fai clic sul pulsante per nascondere l'elemento per nome della classe

Passero

Piccione

Gufo

Leone

Cervo

Lupo

Dopo aver aggiornato il codice HTML, apporta anche modifiche allo script. La proprietà che viene utilizzata per nascondere tutti i negri di una classe è visibilità Proprietà con il valore nascosto.

functionHideElement ()
const stream = document.getElementsByClassName ('Bird') [0];
flusso.stile.visibilità = 'nascosto';

Salvando ed eseguendo il file con le alterazioni di cui sopra. La seguente pagina web apparirà sullo schermo. Facendo clic sul pulsante, i negri di classe dell'uccello di classe verranno nascosti dallo schermo, ma lo spazio collegato a quei negri rimasti rimarrà sullo schermo come mostrato di seguito perché la proprietà di visibilità è stata utilizzata al posto della proprietà del display.

Come nascondere specifici negri infantili di un elemento di una pagina Web associata a una classe che utilizza il metodo getElementByClassName ()?

Per nascondere i nnodi infantili specifici con elementi specifici all'interno di una classe, facciamo prima modifiche nel codice HTML e creiamo diversi né da figlio nella classe uccello con diverso elementi:

Corvo

Passero

Piccione

Aquila

Gufo

Dopo l'alterazione del codice HTML, aggiorna anche lo script con il seguente codice di script:

functionHideElement ()
const stream = document.getElementsByClassName ('Bird');
per (let n in stream [0].ChildNodes)
if (stream [0].Childnodes [n].NODENAME === 'H1' || Stream [0].Childnodes [n].NODENAME === 'H4')
Stream [0].Childnodes [n].stile.Display = 'Nessuno';

Di seguito Snapshot fornisce una breve descrizione del codice di script sopra.

Durante l'esecuzione del codice sopra, una pagina Web simile verrà visualizzata sullo schermo. Quando il pulsante Click viene premuto tutto il neghnodes di classe uccello sarà nascosto insieme al loro spazio occupato:

Conclusione

Per nascondere gli elementi in un JavaScript, è possibile utilizzare due proprietà di styling che sono visibilità E Schermo. IL getElementsByClassName () Il metodo viene utilizzato per recuperare l'elemento nel codice JavaScript. L'articolo fornisce vari modi attraverso i quali il getElementsByClassName () viene utilizzato per nascondere un singolo elemento, più elementi, negri infantili di una classe e negri infantili specifici di una classe.