Série da semana: Primeiros passos no Flutter

Veja mais
Menu de vídeos

2. Manipulando Elementos da View

Você está deslogado

Um desenvolvedor JavaScript precisa entender como manipular elementos do HTML para tornar as páginas mais dinâmicas e interativas para o usuário. Nesta aula será dado o passo inicial para a manipulação desses elementos.

05:43 min

Documentação

[conteudo-mvp]

Entendendo o DOM

Sabemos que na construção de páginas web utilizamos a linguagem HTML, que posteriormente será interpretada pelo navegador e esse se encarregará de gerar todos os elementos na página. Para ter acesso a esses elementos, depois que a página já foi interpretada, o navegador cria uma representação lógica do HTML, que recebe o nome de "DOM" (Document Object Model). Dessa forma, quando for necessário acessar algum elemento no HTML, faremos esse acesso através do DOM, que se encarrega de localizar o elemento e retornar os seus valores. Quando utilizamos o JavaScript para alterar o valor de algum elemento, estamos modificando apenas a representação do HTML (DOM), e não o arquivo original que foi interpretado pelo navegador.

Nota: Código HTML não é o DOM, após o navegador carregar as informações contidas no arquivo HTML que o DOM é criado.

Alterando o DOM pelo console

Iremos exemplificar como alterar o DOM, para isso é necessário que você faça o download do projeto através do botão "baixar codigo fonte", que se encontra no final da documentaçao. Abra o arquivo index.html no navegador. Aconselho utilizar o Chrome ou o Firefox para a aprendizagem neste curso.

Os principais navegadores possuem um recurso para testar código JavaScript chamado console. Faremos a alteração do DOM através deste recurso apenas no início do curso, pois veremos em uma outra aula como alterar o DOM através de um arquivo JavaScript.

para abrir o console basta utilizar o atalho CTRL+ Shift + J. Com o console aberto digitamos o código abaixo e pressionamos a tecla ENTER para vermos toda a estrutura do HTML:

document

Podemos ver que temos o HTML acessível em document como mostra a Figura 1.

Exibindo o document.
Figura 1. Exibindo o document.

Mas como buscamos um elemento específico entre diversos elementos do DOM? Uma das formas é através de um identificador único, também conhecido como ID. Com um ID podemos atribuir um nome ao elemento e este nome deve ser único no HTML, ou seja, não pode se repetir. No código abaixo atribuiremos um ID ao elemento input que está na Linha 59 do arquivo index.html para exemplificar isto:

    
1. <tr class="item">
2.    <td>Calabresa</td>
3.    <td>
4.        <a>-</a>
5.        <input id="quantidade" class="quantidade"
             value="0" type="number" name="calabresa">
6.        <a>+</a>
7.    </td>
8.    <td class="preco-item">12.50</td>
9.</tr>

Explicando o código

Linha 5: <input id="quantidade" class="quantidade" value="0" type="number" name="calabresa">
Adicionando o ID quantidade no input, podemos dizer também que estamos adicionando o valor quantidade ao atributo ID. Agora conseguimos identificar o elemento dentro do DOM.

Após atribuir um ID, precisamos recarregar a página com os dados atualizados. No console, digitamos o seguinte comando:

document.getElementById(“quantidade”)

Podemos ver que o retorno é o input que desejamos. A Figura 2 ilustra este processo.

Buscando o input com o ID quantidade.
Figura 2. Buscando o input com o ID quantidade.

Podemos alterar o valor do input através da propriedade value e fazemos isto escrevendo o seguinte código no console:

document.getElementById(“quantidade”).value = 1

A Figura 3 mostra o resultado.

mostra o resultado.
Figura 3 Mostra o resultado.

As propriedades do elemento

Podemos alterar os elementos através de suas propriedades. Um exemplo disso é a propriedade style que nos permite alterar o estilo do elemento, observe o código:

document.getElementById(“quantidade”).style.backgroundColor = “red”;

Entretanto temos um problema, toda vez que utilizamos o método getElementById estamos buscando o elemento no DOM, procuramos no documento inteiro onde está o elemento que queremos, e isto consome processamento. Para evitar desperdício de recurso podemos guardar o elemento em uma variável:

var meuInput = document.getElementById(“quantidade”);

Agora podemos reaproveitar esta variável e acessar o elemento, por exemplo:

meuInput.style.backgroundColor = “pink”;
meuInput.style.color = “red”;

Veja abaixo como seria o código sem o uso da variável:

document.getElementById(“quantidade”).style.backgroundColor = “pink”;
document.getElementById(“quantidade”).style.color = “red”;

A Figura 4 mostra o resultado do código acima.

Alterando a cor do elemento input.
Figura 4 Alterando a cor do elemento input.

Utilizando o querySelector

Outra forma de buscar um elemento é através da função querySelector. Esta função permite buscarmos elementos utilizando os seletores do CSS. Não tem problema se você não conhece estes seletores, pois abordaremos os principais dentre eles ao longo do curso. Execute o código abaixo para buscar o mesmo elemento utilizando o querySelector:

 document.querySelector(“#quantidade”);

Importante observar que alguns seletores podem trazer mais que um elemento. Um exemplo disso é se buscarmos pelo elemento “p” que se refere a um parágrafo. Sabemos que no HTML pode existir mais que um parágrafo, porém o método querySelector, só retornará o primeiro encontrado. Em uma aula futura, utilizaremos o querySelectorAll para buscar mais de um elemento simultaneamente.

Explicando o código

Linha 1: document.querySelector(“#quantidade”);
Buscamos um elemento no DOM que contenha o ID quantidade. O caractere # indica que estamos buscando por um ID e precisamos informar posteriormente qual o nome do ID que queremos buscar.

Saiba mais Veja a Série Primeiros passos no JavaScript
Baixar código fonte Baixar vídeo Ver Código Final
Avalie o curso
Suporte ao aluno - Deixe a sua dúvida.