JavaScript GetElementsByClassName

Em JavaScript, o método getElementsByClassName () é muito útil para acessar os elementos que correspondem a todos os nomes de classe passados ​​como argumentos. Além disso, ele retorna um htmlcollection que contém todos os elementos descendentes. Além disso, esse método também ajuda a buscar os elementos HTML necessários, armazená -los em variáveis ​​e executar a funcionalidade necessária usando JavaScript.

Este artigo guiará sobre a implementação do “getElementsbyclassName ()”Método em JavaScript.

O que é o método JavaScript GetElementsByClassName ()?

O "getElementsbyclassName ()”O método retorna os elementos com o nome de classe especificado, que é passado como um argumento. Ele retorna um objeto que se assemelha a uma matriz de todos os itens infantis com os nomes de classe especificados. Além disso, inclui a coleção HTML de todos os elementos infantis.

Como usar o método JavaScript GetElementsByClassName ()?

Com o objetivo de usar o método JavaScript GetElementsByClassName () em JavaScript, siga a sintaxe dada:

elemento.getElementsbyclassName (ClassName)

Na sintaxe dada, “nome da classe”É o argumento obrigatório a ser aprovado. É o valor da string que se refere a nomes de classe única ou múltiplas.

Exemplo 1: buscando um único elemento usando o método getElementByclassName ()
No exemplo a seguir, em primeiro lugar, criaremos uma div, atribuiremos uma "classe" e adicionaremos algum texto nele:

Implementação da classe

Agora, aplique o “getElementsbyclassName ()”Método para acessar o DIV criado, passando o nome da classe como argumento:

var x = documento.getElementsByClassName ('classe');

Por fim, exiba o valor resultante no DOM usando o “documento.escrever()”Método. Isso retornará um objeto semelhante a uma matriz:

documento.escreva (x);

A saída correspondente será:

Na saída acima, o [objeto htmlcollection] refere-se ao objeto semelhante a uma matriz.

Exemplo 2: buscando vários elementos usando o método getElementsByclassName ()
No exemplo a seguir, em primeiro lugar, adicionaremos três caixas de seleção usando a tag, atribua -lhes a mesma classe que “Lang”E adicione o texto necessário, conforme mostrado abaixo:

Pitão

JavaScript

Html

Agora, inclua uma caixa de seleção adicional com o valor “Selecionar tudo”E anexe um“OnClick ()”Evento para que, quando a caixa de seleção for selecionada, o“verificar()”A função é chamada com o argumento“esse“Like segue:

Selecionar tudo

Em seguida, no arquivo JavaScript, defina uma função chamada “verificar()”Com uma variável chamada“Caixa de seleção"Como um argumento referente a"esse”Especificado antes. Agora, acesse a caixa de seleção usando o documento.getElementsByClassName Método () e coloque o valor do atributo de classe “Lang”Como seu argumento. Finalmente, use um “para”Faça um loop para iterar cada valor em uma caixa de seleção e usar o atributo“ verificado ”para marcar cada valor conforme verificado:

Função Verificação (caixa de seleção)
get = document.getElementsByClassName ('Lang');
para (var i = 0; iEntendi].verificado = caixa de seleção.verificado;

Saída

Compilamos o uso do método getElementsByClassName () usando vários exemplos.

Conclusão

O "getElementsbyclassName ()”O método retorna os elementos com o nome de classe especificado, que é passado como um argumento. Ele retorna um objeto que se assemelha a uma matriz de todos os itens infantis com os nomes de classe especificados. Você pode utilizar este método para selecionar elementos HTML únicos ou múltiplos com o mesmo nome de classe. Este artigo explicou o uso do método getElementsByClassName () usando vários exemplos.