O JavaScript fornece uma variedade de funções que podem nos ajudar a aprimorar nossos sites. Um recurso comum que vemos em sites diferentes é ocultar elementos presentes no site apenas clicando em um botão. Podemos fazer essa tarefa de várias maneiras usando diferentes funções de JavaScript.

Neste artigo, o uso de getElementbyclassName () foi explorado para ocultar os elementos de uma página da web.

A seguir, estão os pontos que foram abordados neste artigo, juntamente com os códigos de exemplo:

• Introdução ao método getElementByClassName () de JavaScript
• Propriedades do JavaScript usado para ocultar elementos
• Ocultar elemento único de uma página da web usando o método getElementByClassName ()
• Escondendo vários elementos associados a uma classe específica
• Escondendo todos os nós filhos de um elemento associado a uma classe específica
• Escondendo apenas nós filhos específicos de um elemento associado a uma classe específica

getElementsbyclassName ()

Uma das funções importantes e básicas do JavaScript que lida com os elementos presentes em uma página da web é getElementsbyclassName (). Esta função fornece um fluxo HTML de elementos associados a um nome de classe especificado.

Sintaxe

A sintaxe deste método é fornecida abaixo:

Na instrução Código acima, a sintaxe do método getElementByClassName () foi mostrada.

Aqui, o método getElementsByClassName () retorna um elemento presente em ÍNDICE 0, associado à classe Pássaros na variável declarada fluxo.

Como o objetivo básico e a sintaxe do getElementsbyclassName () foram explicados acima. Agora vamos tentar ocultar elementos da página da web usando esta função.

Quais são as propriedades do JavaScript que são usadas para ocultar elementos?

Antes de pular em direção à tarefa, vamos ver as duas propriedades de estilo através das quais os elementos podem ser escondidos em uma página da web. Essas duas propriedades são descritas abaixo:

visibilidade = 'oculto': Esta propriedade é usada para ocultar apenas os elementos e não remove o espaço ligado a esse elemento

display = 'nenhum': Esta propriedade é usada para ocultar os elementos e também remove o espaço ligado a esse elemento

Usaremos as duas propriedades em diferentes cenários para que seja fácil descobrir o funcionamento e as diferenças práticas dessas duas propriedades.

Como ocultar um único elemento de uma página da web usando o método getElementByClassName ()?

O trecho dado abaixo mostra a criação de uma página da web com um título, um pouco de texto, uma lista de pássaros e uma lista de animais, além de um botão para clicar.

Html

Esconder pássaros da lista

Clique no botão para ocultar o elemento pelo nome da classe

Pardal
Pombo
Leão
Cervo
Papagaio
Coruja
Lobo
Cavalo

A imagem a seguir mostra o código acima com um pouco de descrição.

Salve o código e execute o arquivo; Uma página da web semelhante aparecerá na tela do seu navegador, como mostrado abaixo.

Vamos escrever um script para ocultar um único elemento desta página da web. O cenário é que, ao clicar no botão fornecido, apenas o nome do primeiro pássaro deve ser escondido da tela e o restante dos nomes de pássaros e animais deve permanecer na tela.
JS

functionHideElement ()
const stream = documento.getElementsByClassName ('Bird') [0];
fluxo.estilo.visibilidade = 'oculto';

Um trecho com a breve descrição do código acima é fornecido abaixo.

Salve o arquivo e execute -o. O navegador exibirá a seguinte página da web. Na imagem abaixo dada, pode -se ver que quando o Clique para ocultar o botão é pressionado o pardal qual é o objeto da classe pássaro presente em ÍNDICE [0] torna-se escondido Mas o espaço ligado a este objeto ainda está lá:

Como ocultar vários elementos de uma página da web usando o método getElementByClassName ()?

Para ocultar vários elementos associados à classe pássaro, Somente o JavaScript precisa ser atualizado; O restante do código HTML para a página da web permanecerá o mesmo. Atualize o roteiro Código com o código fornecido abaixo:

functionHideElement ()
const allbirds = documento.getElementsbyclassName ('pássaro');
para (const Stream of Allbirds)
fluxo.estilo.display = 'nenhum';

;

Um trecho com a breve descrição do código acima é fornecido abaixo:

No código acima, pode -se observar que, em vez de usar a propriedade de visibilidade para ocultar os elementos, a propriedade de exibição foi usada para o propósito mencionado acima mencionado. Salve este script de código e execute -o:

No código acima, clique no Clique para ocultar O botão ocultará todos os nomes dos pássaros junto com seus espaços vinculados.

Como ocultar Childnodes de um elemento de uma página da web associada a uma classe usando o método getElementByclassName ()?

Para ocultar os Childnodes de um elemento de uma página da web, primeiro faça alterações no código HTML e crie alguns ChildNodes:

Esconder pássaros da lista

Clique no botão para ocultar o elemento pelo nome da classe

Pardal

Pombo

Coruja

Leão

Cervo

Lobo

Depois de atualizar o código HTML, faça alterações no script também. A propriedade que é usada para esconder todos os Childnodes de uma classe é visibilidade propriedade com o valor escondido.

functionHideElement ()
const stream = documento.getElementsByClassName ('Bird') [0];
fluxo.estilo.visibilidade = 'oculto';

Ao salvar e executar o arquivo com as alterações acima. A página da web a seguir aparecerá na tela. Ao clicar no botão, os Childnodes do pássaro da classe ficarão escondidos da tela, mas o espaço ligado a esses Childnodes permanecerá na tela, como mostrado abaixo, porque a propriedade de visibilidade foi usada em vez da propriedade Display.

Como ocultar Childnodes específicos de um elemento de uma página da web associada a uma classe usando o método getElementByClassName ()?

Para ocultar os ChildNodes específicos com elementos específicos dentro de uma aula, vamos primeiro fazer alterações no código HTML e criar diferentes ChildNodes na classe pássaro com diferentes elementos:

Corvo

Pardal

Pombo

Águia

Coruja

Após a alteração no código HTML, atualize também o script com o seguinte código de script:

functionHideElement ()
const stream = documento.getElementsbyclassName ('pássaro');
para (deixe n no fluxo [0].ChildNodes)
if (stream [0].Childnodes [n].Nodename === 'H1' || Stream [0].Childnodes [n].nodename === 'H4')
Stream [0].Childnodes [n].estilo.display = 'nenhum';

Abaixo do instantâneo fornece uma breve descrição do código de script acima.

Ao executar o código acima, uma página da web semelhante aparecerá na tela. Quando o botão de clique é pressionado todo o Childnodes de aula pássaro estará escondido junto com seu espaço ocupado:

Conclusão

Para ocultar os elementos em um JavaScript, duas propriedades de estilo podem ser usadas que são visibilidade e mostrar. O getElementsbyclassName () O método é usado para buscar o elemento no código JavaScript. O artigo fornece várias maneiras pelas quais o getElementsbyclassName () é usado para esconder um único elemento, vários elementos, crianças de uma classe e crianças específicas de uma classe.