Varrer atributo class usando Javascript

Gunnar CorreaGunnar Correa29/04/2015 às 09:46:56 - 8.645 acessos

Veja como é possível obter ou atribuir valores a todos os elementos que contém a mesma Class.


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!


class html javascript css programação web tutorial artigo desenvolvimento document.getelementsbyclassname() for while form

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.