Trabalhando com JavaScript no navegador \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 14 Horas 

 02 Min 

 12 Seg 

   Tempo restante da oferta: 14 02 12 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Trabalhando com JavaScript no navegador  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/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.

 [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 6 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/DOM-JAVASCRIPT.png)  

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](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg)   Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos)

## 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/arvore-dom.png)

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?](https://www.treinaweb.com.br/blog/o-que-e-dom-virtual-dom-e-shadow-dom/ "O que é DOM, Virtual DOM e Shadow DOM?")”, para se aprofundar sobre DOM e suas variações.

 [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript)

## 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/dom1.png)

O exemplo acima conta com o seguinte código:

```html

    Estrutura DOM

    Aqui temos um H1
    Uma Tag H2
    Um texto qualquer.

```

Este é o resultado no navegador:

![Exemplo Elementos HTML](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/dom2.png)

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)`.

[  ![Acessibilidade -  Desenvolvendo sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg)   Curso Acessibilidade - Desenvolvendo sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-desenvolvendo-sites-acessiveis)

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](https://developer.mozilla.org/pt-BR/docs/Web/API/Document).

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:

```html

    Estrutura DOM

    Aqui temos um H1
    Uma Tag H2
    Um texto qualquer.

    	var elemento = document.getElementById('titulo');
			document.write('' + elemento.innerText + ' agora em azul ');

```

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:

```html

```

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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/dom3.png)

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:

```html

    Estrutura DOM

    Aqui temos um H1
    Uma Tag H2
    Um texto qualquer.

    	var elemento = document.getElementById('titulo');
		document.write('' + elemento.innerText + ' agora em azul ');
		function mudarCor(){
			var texto = document.getElementById('titulo');
			texto.style.color = 'red';
			texto.style.textAlign = 'right';
		}

```

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:

![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/dom.gif)

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](https://developer.mozilla.org/pt-BR/docs/Web/Events), 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](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg)   Formação Desenvolvedor JavaScript Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-javascript)

Por fim, caso queira aprender mais sobre [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript) saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [JavaScript Intermediário](https://www.treinaweb.com.br/curso/javascript-intermediario) que possui **03h38 de vídeos** e um total de **38 exercícios**. Conheça também nossos outros cursos de [JavaScript](https://www.treinaweb.com.br/cursos?q=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.

- [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript)
- [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento)
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)

Autor

 ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm)

## 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](https://www.treinaweb.com.br/blog/autor/wesley-gado)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     5 anos atrás

    ##  [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) 

     Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/EXECUTAR-PRIMEIRO-CÓDIGO-JAVASCRIPT-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     6 anos atrás

    ##  [ Como executar seu primeiro código JavaScript ](https://www.treinaweb.com.br/blog/como-executar-seu-primeiro-codigo-javascript) 

     Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do console do navegador e ferramentas on-line.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/capa-tag-ancora-400x280.jpg)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     4 anos atrás

    ##  [ Trabalhando com a tag âncora no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html) 

     Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     6 anos atrás

    ##  [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) 

     Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/ESTRUTURAS-CONDICIONAIS-REPETICAO-JAVASCRIPT-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     6 anos atrás

    ##  [ Estruturas condicionais e estruturas de repetição em JavaScript ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-estruturas-de-repeticao-em-javascript) 

     Neste artigo veremos como utilizar as estruturas condicionais (if, else) e as estruturas de repetição (while, for) no JavaScript.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Inteligência-Artificial-Selecionando-Cores-400x280.png)  [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 

     7 anos atrás

    ##  [ Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js ](https://www.treinaweb.com.br/blog/desenvolva-uma-inteligencia-artificial-que-reconhece-cores-diretamente-no-navegador-com-tensorflow-js) 

     Aprenda a trabalhar com Machine Learning diretamente no navegador usando o TensorFlow.js

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     6 anos atrás

    ##  [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) 

     Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     5 anos atrás

    ##  [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) 

     Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-400x280.png)  [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 

     7 anos atrás

    ##  [ Tw Dev Server - como ele pode te ajudar a estudar programação? ](https://www.treinaweb.com.br/blog/tw-dev-server-como-ele-pode-te-ajudar-a-estudar-programacao) 

     Aprenda a utilizar o Tw Dev Server como servidor de arquivos estáticos e como simulador de back end com API e banco de dados para facilitar seus estudos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/ARTIGO-DART-400x280.jpg)  [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 

     4 anos atrás

    ##  [ Guia da linguagem dart ](https://www.treinaweb.com.br/blog/guia-da-linguagem-dart) 

     Nesse guia da linguagem Dart você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Dart.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/A-importancia-das-metatag-no-HTML-400x280.jpg)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     4 anos atrás

    ##  [ A importância das metatags no HTML ](https://www.treinaweb.com.br/blog/a-importancia-das-metatags-no-html) 

     Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos dar bastante atenção para essas tags.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02163514/vscode-remote-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ Desenvolvendo seus projetos com o VS Code Remote Development ](https://www.treinaweb.com.br/blog/desenvolvendo-seus-projetos-com-o-vs-code-remote-development) 

     Preparar nosso ambiente local de desenvolvimento pode ser uma tarefa bastante demorada. Pode levar horas, ou até dias para configurar todo o ambiente. Uma alternativa é utilizar um ambiente remoto para o desenvolvimento, porém sua experiência pode não ser a mesma que ao trabalhar em ambiente local. Isso tudo pode mudar com o VS Code Remote Development. Vamos entender nesse artigo como ele funciona.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **14h 02min 12s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58