O método getElementsByClassName() é usado para selecionar ou obter os elementos por meio do valor do nome da classe. Este método DOM retorna um objeto semelhante a um array que consiste em todos os elementos com o nome de classe especificado. Ao chamar o método getElementsByClassName() em qualquer elemento específico, ele pesquisará todo o documento e retornará apenas os elementos que correspondem ao nome de classe especificado ou fornecido.
Sintaxe
var ele=document.getELementsByClassName('name');
Aqui, name é o argumento obrigatório a ser passado. É a string que especifica um único nome de classe ou vários nomes de classe para correspondência.
Exemplo de método getElementsByClassName()
Vejamos alguns exemplos para conhecer e compreender a implementação prática do método.
Exemplo
É uma implementação de classe simples que retorna um objeto semelhante a um array ao invocar a variável x.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
Saída:
contém método java
Da mesma forma, podemos implementar o método getElementsByClassName() para retornar coleções de elementos para múltiplas classes.
Diferença entre os métodos getElementsByClassName(), querySelector() e querySelectorAll()
getElementsByClassName(): Ele combina os elementos com o nome de classe especificado e retorna um conjunto de elementos correspondentes. Os elementos retornados são uma coleção de elementos HTML ativos. Esses elementos ativos podem ser atualizados posteriormente se alguma alteração for feita no Modelo de Objeto do Documento.
querySelector(): Ele retorna apenas um único elemento que corresponde ao nome de classe especificado. Se não encontrar nenhum elemento correspondente, retornará nulo.
O principal ponto a ser entendido é que todos os métodos descritos acima retornam um elemento ou uma lista, mas o método getELementsByClassName() serve ao dinâmico atualização, e os outros dois métodos servem para a estático .