Primeiros Passos com Javascript: Aprendendo sobre o DOM

Introdução

 

O HTML e o CSS são tecnologias para construção e estilização de páginas estáticas, ou seja, que não mudam ao longo da sua visualização e operação. Agora, imagine se quisermos apresentar uma mensagem de erro ou ainda mudar a cor de uma caixa de texto se o usuário tentar enviar um formulário sem o e-mail? Todo esse dinamismo com alteração dos componentes HTML em tempo de execução é realizado por códigos em Javascript embutidos nas páginas.

Por exemplo, alguns websites adicionam um indicador de senha fraca ou forte à medida que o usuário digita em um campo de texto, esse é outro exemplo clássico de códigos Javascript em ação.

 

É verdade que o Javascript ganhou sua popularidade como uma linguagem que executa nos navegadores dos clientes na Web, contudo, atualmente o Javascript também é utilizado para implementação de lógica de negócios no lado do servidor. O Node.js é o responsável por esse avanço!

 

Atualmente, o Javascript pode ser utilizado até mesmo para construir aplicativos Mobile multiplataforma, com o framework React Native. Vamos começar explorando a linguagem mais popular do mundo, segundo o ranking da RedMonk. Veja o Ranking das linguagens abaixo:

Fonte: https://redmonk.com/sogrady/2020/02/28/language-rankings-1-20/

 

Nesta etapa, vamos aprender os conceitos básicos para operarmos com JavaScript de forma eficiente. Apesar de ser altamente necessário, poucos desenvolvedores de fato conhecem bem os assuntos que abordaremos nesta etapa.

 

Entendendo o Domain Object Model

 

Para entendermos como o Javascript funciona e como podemos alterar dinamicamente nossas páginas HTML, precisamos antes entender o que acontece quando uma página HTML é interpretada pelo navegador.

 

Para interpretar os nossos códigos HTML o navegador constrói uma estrutura chamada Modelo de Objetos de Domínio, chamada DOM (Domain Object Model). O DOM relaciona os elementos do HTML em uma hierarquia de nós pais e nós filhos, onde, o nó “pai-de-todos” é o documento HTML. Veja um exemplo abaixo da construção do modelo DOM da div de resultados do nosso jogo.

 

 

Ao renderizar o HTML do nosso jogo de adivinhação com a tag <div> do resultado, o DOM gerado possui a seguinte estrutura:

 

 

Chamamos essa estrutura de Árvore DOM. Todos os nós são relacionados pelas propriedades parentNode e ChildNodes. Você pode visualizar os nós pais como contêineres para os nós filhos. O pai de todos elementos é o nó chamado “Document”, esse nó contém o nó body do nosso HTML, que é o corpo da página. O body, por sua vez, contém as divs do nosso documento, incluindo a nossa div de resultados. O nó da div de resultados contém o título <h2> “Resultado” e os parágrafos <p> onde serão apresentados os resultados da jogada. 

 

Podemos acessar o conjunto de filhos de um nó utilizando a propriedade childNodes. Da mesma forma, se quisermos acessar o pai de qualquer nó, devemos utilizar a propriedade parentNode.

 

O Processo de Renderização

 

Agora que já entendemos a estrutura básica de uma Árvore de nós DOM, como é que o navegador utiliza tudo isso junto com o CSS para desenhar as páginas Web estilizadas?
 

Para responder a essa questão, veremos que a Árvore DOM não é a única gerada. O código CSS também dá origem a uma árvore muito similar, chamada Árvore CSSOM (CSS Object Model). Após isso, uma terceira árvore é gerada combinando a DOM e a CSSOM e, finalmente, a página web é desenhada na tela. Veja o esquema abaixo do processo e repare nas árvores.

 

Fonte: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=pt-br

 

Chamamos o processo de geração das árvores de Parsing. A Árvore de Renderização é a união das árvores DOM e  CSSOM,  que de fato o navegador utiliza para pintar a página ao final do processo.



 

Agora, vamos praticar um pouco visualizando o DOM com as Ferramentas do Desenvolvedor do navegador. Siga Adiante!

Mão na Massa: Visualizando o DOM

 

Os navegadores possuem ferramentas que nos auxiliam a visualizar o DOM após as páginas serem renderizadas. Nessa parte, vamos utilizar o Google Chrome, porém, o Mozilla Firefox também possui ótimas funções para isso. Siga os passos abaixo

 

1 - Abra a página jogo.html no Chrome.

 

2 - Acesse o menu “Ferramentas do Desenvolvedor”. Veja abaixo.

 

 

Alternativamente, você pode clicar com o botão direito e selecionar a opção “Inspecionar” (CTRL +SHIFT + I).

Veja como funciona a navegação pelos nós renderizados e as principais guias das ferramentas do desenvolvedor.

 

Para navegar pelo DOM, basta expandir os nós renderizados. Lembra bastante a estrutura de pastas e subpastas do Sistema Operacional.

 

3 - Expanda a div de resultados e visualize a estrutura contendo os nós filhos.

 

 

4 - Você pode inserir, editar e mover elementos no DOM ao clique do mouse.

 

5 - Observe que os estilos que cadastramos também são apresentados nesta guia à Direita. Clique sobre a div resultado e observe os estilos abaixo:


 

 

Nesta guia você, não somente pode visualizar o CSS,  mas também é possível cadastrar novas regras e/ou alterar os valores das propriedades que já definimos.

 

6 - Faça um teste e altere as propriedades de alinhamento, bordas e margem. Visualize o resultado das modificações. Ao recarregar a página, os valores retornam aos originais.

 

Além de podermos navegar pelo DOM renderizado na aba “Elements”, também podemos clicar em um elemento na página e visualizar o seu nó equivalente. Utilize a opção de inspeção de elementos.

 



 

Agora você já sabe o necessário para mergulharmos no Javascript e manipular o DOM em tempo execução! Siga para as próximas etapas.

 

Resumindo

 

Neste tópico você aprendeu o seguinte:

  • O DOM é uma estrutura em árvore de nós pais e filhos gerada a partir do código HTML;

  • O CSSOM é uma segunda estrutura em árvore que relaciona os elementos do HTML aos seus respectivos estilos;

  • O DOM e o CSSOM são combinados para gerar a Árvore de Renderização, que possui tanto os elementos HTML como seus respectivos estilos, e é utilizada para desenhar as páginas na tela.

  • O Javascript nos permite manipular essas árvores e modificar as páginas em tempo de execução, sem precisar recarregá-las.

  • Todos os elementos de qualquer página Web podem ser visualizados através das Feramentas do Desenvolvedor, disponíveis nos principais navegadores;

  • No Google Chrome, os nós do DOM e os estilos gerados podem ser explorados e manipulados a partir da guia “Elements” (CTRL + SHIFT + I).