Javascript do básico ao intermediário – Elementos

Neste artigo vamos acessar e atribuir dados a elementos HTML de forma simples.

Publicado em

O foco destes artigos de Javascript é uma aplicação real e não teórica, ou seja, lecionar em sequencia de uma real aplicação, na qual você usuário aprender e já aplicar os conceitos.

Com Javascript podemos facilmente acessar Tags do HTML, assim como receber e atribuir valores aos elementos. Podemos também criar novos elementos, porém o foco aqui não é criar elementos, e sim manipular os elementos.

Como você já deve saber ao estudar HTML e CSS, em uma página HTML ou em um contexto, não podemos ter mais de um elemento ID com o mesmo valor, se você inserir vai funcionar corretamente, porém na validação do W3C haverá problemas e semanticamente está errado. Você pode usar class e acessar os elementos depois. Resumindo, utilize os elementos ID com nomes diferentes e use o nome de class quantas vezes forem necessárias.

Atributo ID, como usar corretamente
Atributo ID, como usar corretamente

Veja o código HTML abaixo, note que temos vários parágrafos e cada um com um ID diferente.

Código 01:

<html lang="pt-br">
	<head>
		<title>Elementos JS</title>
		<meta charset="utf-8" />
		<script>
			
		</script>
	</head>
	<body>
		<p id="nome"></p>
		<p id="email"></p>
		<p id="telefone"></p>
		<p id="sexo"></p>		
	</body>
</html>

Podemos utilizar diversos recursos para acessar e atribuir valores em elementos, aqui vamos acessar com ID e CLASS, então vamos lá!

Para manipular elementos ID, usamos document.getElementById(“nomeId”), desta forma já acessamos o elementos. Se for um campo de formulário HTML como input ou textarea usamos  document.getElementById(“nomeId”).value , tanto para atribuir quando obter um valor. Se for uma Tag HTML usamos document.getElementById(“nomeId”).innerHTML. Vamos ver um exemplo abaixo.

Código 02:

<html lang="pt-br">
	<head>
		<title>Elementos JS</title>
		<meta charset="utf-8" />
		<script>
			var nome = "Gunnar Correa";
			var email = "gunnersvaldo@mit.com";
			var telefone = "190192193";
			var sexo = 'M';
			
			document.getElementById("nome").innerHTML = nome;
			document.getElementById("email").innerHTML = email;
			document.getElementById("telefone").innerHTML = telefone;
			document.getElementById("sexo").innerHTML = sexo;
		</script>
	</head>
	<body>
		<p id="nome"></p>
		<p id="email"></p>
		<p id="telefone"></p>
		<p id="sexo"></p>		
	</body>
</html>

Se você executou o código acima, deve ter visto que não apareceu nada na tela, tudo esta correto, mas mesmo assim não exibiu. Para encontrar os problemas, acessamos o console do Chrome/Mozilla e vemos uma mensagem vermelha.

Erro console.log Google Chrome
Erro console.log Google Chrome

No erro acima diz que o elemento não pode definir nulo, neste caso o script foi executado antes do HTML ter montado. Imagine que você queira forrar um lençol sem ter a cama, não vai dar para forrar o lençol, pois a cama não existe e o que te resta é avisar um responsável (no caso a mamãe). No Javascript é a mesma coisa, não podemos acessar um elemento sem que ele esteja montado.

Na imagem abaixo você vai entender melhor, pois o HTML é uma arvore e nele consta todos os elementos, seus filhos e atributos.

Árvore HTML/DOM
Árvore HTML/DOM

Mas então, como acessar os elementos quando a página for carregada? Existem várias formas, como EventListener, eventos onload, entre outros. Aqui vamos criar uma simples função function nomeFuncao(){código} em seguida no elemento body criar um evento onload chamando a função que criamos, assim quando o documento for criado a função será chamada, veja o exemplo abaixo.

Código 03:

<html lang="pt-br">
	<head>
		<title>Elementos JS</title>
		<meta charset="utf-8" />
		<script>
			var nome = "Gunnar Correa";
			var email = "gunnersvaldo@mit.com";
			var telefone = "190192193";
			var sexo = 'M';
			
			function exibir(){
				document.getElementById("nome").innerHTML = nome;
				document.getElementById("email").innerHTML = email;
				document.getElementById("telefone").innerHTML = telefone;
				document.getElementById("sexo").innerHTML = sexo;
			}
		</script>
	</head>
	<body onload="exibir();">
		<p id="nome"></p>
		<p id="email"></p>
		<p id="telefone"></p>
		<p id="sexo"></p>		
	</body>
</html>

Para obter o valor entre de uma Tag não órfã (aquela que fecham com /> e não <tag></tag>), usamos basicamente o mesmo processo para atribuir, porém não informando o valor. Vamos guardar o valor em uma variável e exibi-la em um alert, veja o exemplo abaixo.

Código 04:

<script>
			var nome = "Gunnar Correa";
			var email = "gunnersvaldo@mit.com";
			var telefone = "190192193";
			var sexo = 'M';
			
			function exibir(){
				document.getElementById("nome").innerHTML = nome;
				document.getElementById("email").innerHTML = email;
				document.getElementById("telefone").innerHTML = telefone;
				document.getElementById("sexo").innerHTML = sexo;
				
				var nomeAtual = document.getElementById("nome").innerHTML;
				alert(nomeAtual);
			}
</script>

Para acessar o atributo class, precisamos trocar a sintaxe e o retorno é um vetor, o que veremos nas aulas seguintes, mas apenas para exemplificar vamos obter os elementos que possuem o elemento resultado. Todos os elementos serão acessados em posições.

document.getElementsByClassName(), Funcionamento
document.getElementsByClassName(), Funcionamento

Nossa variável terá várias posições, cada uma delas correspondente a um elemento encontrado nas próximas aulas verá o uso do for e do while na qual vamos percorrer automaticamente todas estas posições e saber o tamanho desta variável. No exemplo abaixo atribuímos em uma variável todos os elementos que contém no atributo class o valor resultado, em seguida em cada posição do elemento definimos um valor correspondente a uma variável. Veja o exemplo abaixo, note o uso do innerHTML. O acesso é feito através do document.getElementsByClassName(“nomeClass”) que retorna zero ou vários elementos.

Código 05:

<html lang="pt-br">
	<head>
		<title>Elementos JS</title>
		<meta charset="utf-8" />
		<script>
			var nome = "Gunnar Correa";
			var email = "gunnersvaldo@mit.com";
			var telefone = "190192193";
			var sexo = 'M';
			
			function exibir(){
			
				var resultado = document.getElementsByClassName("resultado");
			
				resultado[0].innerHTML = nome;
				resultado[1].innerHTML = email;
				resultado[2].innerHTML = telefone;
				resultado[3].innerHTML = sexo;
				
				var nomeAtual = resultado[0].innerHTML;
				alert(nomeAtual);
			}
		</script>
	</head>
	<body onload="exibir();">
		<p class="resultado"></p>
		<p class="resultado"></p>
		<p class="resultado"></p>
		<p class="resultado"></p>
	</body>
</html>

Embora ainda não trabalhamos com vetores, for, while, if, else, function entre outros, você já sabe a partir de agora manipular elementos HTML, isto para que nos próximos artigos podemos usar os exemplos ligado com nossa realidade, manipular informações em situações reais e do dia a dia.

Para reforçar, usamos o innerHTML para manipular tags e value para input text, textarea, select entre outros. Fique tranquilo que nas próximas aulas veremos isto em sua aplicação real.

 

Gunnar Correa
Gunnar Correa

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

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção