Desenvolvimento Front-end Javascript Desenvolvimento

Trabalhando com JavaScript no navegador

Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor.

há 2 anos 10 meses

Formação Desenvolvedor Especialista Front-end
Conheça a formação em detalhes

Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor.

JavaScript - Fundamentos
Curso JavaScript - Fundamentos
Conhecer o curso

O que é DOM?

Document Object Model (DOM) é uma API que podemos acessar com JavaScript para alterar elementos HTML/XML. Para ficar mais claro, podemos representar o DOM pela seguinte árvore:

Árvore DOM

Vale ressaltar que o DOM não é exatamente o código que vimos no DevTools. Um exemplo são os pseudo-elementos criados pelo CSS que não podemos acessar usando JavaScript pelo DOM.

Leia nosso artigo “O que é DOM, Virtual DOM e Shadow DOM?”, para se aprofundar sobre DOM e suas variações.

Selecionando elementos do dom

Conforme descrito na representação acima, a árvore com a estrutura de elementos HTML pode ser uma representação do DOM, mas como podemos visualizar de forma prática?

Utilizando o DevTools de seu navegador, temos a seguinte representação:

DevTools DOM

O exemplo acima conta com o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Estrutura DOM</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 id="titulo">Aqui temos um H1</h1>
    <h2>Uma Tag H2</h2>
    <p>Um texto qualquer.</p>
  </body>
</html>

Este é o resultado no navegador:

Exemplo Elementos HTML

Agora, como podemos selecionar algum elemento com JavasScript no navegador?

Nós temos alguns métodos que podemos utilizar para encontrar e acessar os dados dos elementos do DOM. Alguns deles são: document.getElementsByTagName(tagName), document.gelElementsByClassName(className) e document.getElementById(id).

React Native - Autenticação com Firebase Authentication
Curso React Native - Autenticação com Firebase Authentication
Conhecer o curso

Além destes, há outros métodos que podem ser usados para acessar e manipular elementos do DOM, você pode ver todos na MDN Web Docs.

Para dar sequência ao exemplo acima, vamos utilizar o método document.getElemetById(id) para obter o conteúdo de nossa Tag H1 e exibi-la, para isso vamos criar o código abaixo, desta forma:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Estrutura DOM</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 id="titulo">Aqui temos um H1</h1>
    <h2>Uma Tag H2</h2>
    <p>Um texto qualquer.</p>
    <script>
    	var elemento = document.getElementById('titulo');
			document.write('<h1 style="color: #025fff">' + elemento.innerText + ' agora em azul </h1>');
	</script>
  </body>
</html>

Para fins didáticos, usamos o código JavaScript no mesmo arquivo de nosso HTML, contudo, vale ressaltar que é uma boa prática separar os arquivos. Podemos carregar um arquivo JavaScript adicionando a linha abaixo em nosso html logo antes da tag de fechamento do nosso body, conforme o exemplo acima:

<script type="text/javascript" src="arquivo.js">

Observe que no atributo ‘src’ colocamos o diretório do arquivo js a ser importado, no exemplo o arquivo js foi criado no mesmo diretório da página html. Caso você utilize uma estrutura de arquivos, o atributo seria, por exemplo: src=“./assets/js/arquivo.js“.

Neste momento nós criamos a variável elemento e passamos para ela o elemento H1 com id título. Logo após exibimos na página utilizando o atributo innerText, que seleciona apenas o texto do elemento, assim, criamos um novo elemento com o mesmo conteúdo mas com a propriedade cor diferente.

Com o código acima vamos obter o seguinte resultado:

Replicando Elemento H1 usando DOM

Desta forma podemos acessar o conteúdo de texto de algum elemento e criar um novo com outras características.

Manipulação básica do dom

Além de acessar, nós podemos manipular elementos do DOM com JavaScript.

Para demonstrar, vamos criar um botão que altere a cor e o alinhamento de algum elemento de nossa escolha, como o nosso elemento de id título.

Neste caso podemos complementar o nosso código da seguinte maneira:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Estrutura DOM</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 id="titulo">Aqui temos um H1</h1>
    <h2>Uma Tag H2</h2>
    <p>Um texto qualquer.</p>
    <input id="botao" type="button" value="Mudar de cor e alinhamento" onclick="mudarCor()"/>
    <script>
    	var elemento = document.getElementById('titulo');
		document.write('<h1 style="color: #025fff">' + elemento.innerText + ' agora em azul </h1>');
		function mudarCor(){
			var texto = document.getElementById('titulo');
			texto.style.color = 'red';
			texto.style.textAlign = 'right';
		}
	</script>
  </body>
</html>

Criamos a função mudarCor(), declaramos uma constante ‘texto’ e passamos o elemento com id titulo. Ao ser chamada a função, deve ser alterado a cor e o alinhamento do elemento conforme as propriedades do nosso código, no caso style.color e style.textAlign.

Ao clicar no botão que foi criado, nosso elemento de id título, que é uma tag H1, irá alterar a sua cor para vermelho e terá alinhamento a direita, conforme abaixo:

Com a propriedade style é possível manipular os estilos dos elementos, seguindo o padrão do exemplo, como: style.fontSize, style.display, etc. Vale ressaltar que a propriedade style utiliza o padrão camel case.

Eventos

O navegador dispara vários eventos quando um usuário está interagindo com uma página. Esses eventos são ações deste usuário, como:

  • click: quando é pressionado e liberado o botão principal do mouse.
  • dbclick: quando acontece um clique duplo no mouse.
  • mousemove: qualquer movimento do mouse.
  • mouseover: movimento sobre algum elemento.
  • keydown: quando uma tecla do teclado é pressionada.
  • scroll: quando há rolagem em algum elemento.

Aconselho consultar a página de eventos da MDN Web Docs, onde você poderá visualizar vários eventos possíveis além desses listados.

Podemos analisar no exemplo acima que o código do botão possui a seguinte propriedade: onclick="mudarCor() , ou seja, utilizamos o evento click para chamar a função mudarCor() e com isso manipular o elemento H1 de id título.

Desta forma podemos utilizar inúmeros eventos para deixar nossas páginas mais dinâmicas e interativas conforme as ações do usuário

Conclusão

Neste artigo entendemos como podemos trabalhar com JavaScript no navegador através do DOM, vimos sobre sua hierarquia e estrutura, como manipular e alterar elementos.

É importante dominar esses conceitos, pois eles possibilitam a criação de páginas e sistemas WEB inteligentes e dinâmicos, abrindo várias vertentes na hora de desenvolver os seus projetos!

Desenvolvedor JavaScript
Formação Desenvolvedor JavaScript
Conhecer a formação

Por fim, caso queira aprender mais sobre JavaScript saiba que aqui na TreinaWeb temos o curso JavaScript Intermediário que possui 03h38 de vídeos e um total de 38 exercícios. Conheça também nossos outros cursos de JavaScript.

Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:

  • Orientação a Objetos;
  • Protótipos e Classes;
  • Tratamento de Erros e Debugging;
  • Trabalhando com Expressões Regulares;
  • Recursividade, escopo e closure;
  • Location, History e Window;
  • Trabalhando com Formulários;
  • Abrindo e Salvando arquivos;
  • Requisições HTTP;
  • Conhecendo o jQuery.

Autor(a) do artigo

Wesley Gado
Wesley Gado

Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

Todos os artigos

Artigos relacionados Ver todos