Varrer atributo class usando Javascript

Curso Escrevendo testes automatizados com PHPUnit

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!