Já esta mais que confirmado que a utilização de class é algo que torna o desenvolvimento muito mais rápido.
Vários desenvolvedores em ocasiões diferentes usam atributos ID para poder acessa-los posteriormente, devido ser muito mais prático e fácil.
É possível obter e atribuir valores há todos os elementos que contém uma mesma class, isto é muito usado em validação de formulários, já que não é necessário criar vários blocos de código repetido para obter o valor de um ID.
Para atender esta necessidade, podemos usar o método document.getElementsByClassName(), passamos por parâmetro o nome da class que queremos obter, então é retornado um vetor contendo todos elementos, para obter ou atribuir um valor basta percorrer este vetor e fazer as devidas alterações.
Para este artigo será utilizado dois botões com ID diferentes, um botão será para atribuir valor e outro para obter o valor exibindo em um alert().
Veja nosso código HTML abaixo, vamos trabalhar com a class clTexto que esta dentro de um <li>, cada elemento será acessado individualmente.
Código 01:
<!DOCTYPE html>
<html>
<head>
<title>Class</title>
<meta charset="UTF-8" />
<script>
</script>
</head>
<body>
<button id="idAtribuir">Atribuir</button>
<button id="idObter">Obter</button>
<ul>
<li class="clTexto">Texto 1</li>
<li class="clTexto">Texto 2</li>
<li class="clTexto">Texto 3</li>
<li class="clTexto">Texto 4</li>
<li class="clTexto">Texto 5</li>
</ul>
</body>
</html> Com o HTML em mãos, precisamos agora criar todo nosso Javascript, mas antes disso você precisa saber que o valor do getElementsByClassName sempre ira retornar um vetor, então para atribuir ou obter algum valor, será necessário percorrer este vetor, neste exemplo este vetor é atribuído a uma variável e através dela que percorremos cada posição e fazemos uma ação.
Para obter ou atribuir um valor de texto, usamos innerHTML, mas se for obter um valor de formulário é necessário que se use o value.
Veja abaixo todo código Javascript comentado com toda explicação das funcionalidades.
Código 02:
document.addEventListener("DOMContentLoaded", function(){
/*DOMContentLoaded espera a página ser carregada*/
document.getElementById("idAtribuir").addEventListener("click", function(){
/*addEventListener fica na escuta de um evento, neste caso acessamos o Id idAtribuir e adicionamos um evento de escuta para o click, quando houver o click enttão dispara a function({}, dentro dela chamamos a função atribuir.*/
atribuir();
});
document.getElementById("idObter").addEventListener("click", function(){
obter();
});
});
function atribuir(){
var frutas = ["Maça", "Uva", "Morango", "Banana", "Abacate"];
/*Acima é criado um vetor contendo o nome de algumas frutas, isto é apenas para nosso exemplo de atribuição, vamos inserir em cada posição da class o nome de uma fruta.
Aqui sabemos que temos o total de cinco class, por isto foi criado um vetor de frutas com cinco posições.
*/
var elemento = document.getElementsByClassName("clTexto");
/*Criamos uma váriavel local que armazena um vetor contendo todos elementos que contém a class clTexto, este método por padrão já retorna o vetor.*/
for(i = 0; i < elemento.length; i++){
/*Criamos um for para percorrer todo elemento, como os vetores começam da posição 0, a variável i também começa de 0, ocorrerá o loop até que i seja menor que o tamanho do vetor elemento, o length obtém a o tamanho que neste caso é 5.
i++ faz o incremento unário.
*/
elemento[i].innerHTML = frutas[i];
/*
acessamos a posicao[i] do elemento e na propriedade innerHTML que sreve para inserir um valor, atribuimos o valor do vetor frutas também na posição i.
*/
}
}
function obter(){
var elemento = document.getElementsByClassName("clTexto");
/*Criamos uma váriavel local que armazena um vetor contendo todos elementos que contém a class clTexto, este método por padrão já retorna o vetor.*/
for(i = 0; i < elemento.length; i++){
/*Criamos um for para percorrer todo elemento, como os vetores começam da posição 0, a variável i também começa de 0, ocorrerá o loop até que i seja menor que o tamanho do vetor elemento, o length obtém a o tamanho que neste caso é 5.
i++ faz o incremento unário.
*/
alert(elemento[i].innerHTML);
/*
No exemplo de atribuir um valor usamos innerHTML = ..., mas aqui apenas usamos innerHTML que já é retornado o texto da posiçãoa atual, este texto fica dentro do método alert().
*/
}
}Note que foi criado dois elementos de escuta para os botões, ambos também poderia ter uma mesma classe e os eventos de escuta seria adicionado conforme a posição de cada um deles, mas para este exemplo foi criado algo mais simples.
Espero que tenham entendido, deixem as dúvidas nos comentários, até a próxima!
