O que é DOM, Virtual DOM e Shadow DOM? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 00 Horas 52 Min 21 Seg Tempo restante da oferta: 00 52 21 [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) O que é DOM, Virtual DOM e Shadow DOM? [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # O que é DOM, Virtual DOM e Shadow DOM? Entenda o que realmente é o DOM e sua diferença em relação ao Virtual DOM e Shadow DOM. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/14142328/DOM.png) Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM. ## O que é o DOM? `DOM` significa Document Object Model (Modelo de Objeto de Documento). Ele é uma [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api/ "API") que nos permite acessar e manipular documentos [HTML](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML") e [XML](https://www.treinaweb.com.br/blog/o-que-e-xml/ "XML") válidos. Vamos usar o seguinte código como exemplo: ```html Minha Página Olá Web Developers! E mais um texto aqui window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""} ``` Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree): ![](https://dkrn4sk0rn31v.cloudfront.net/2020/03/24084532/Estrutura-DOM.png) Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript") porque não fazem parte do DOM. [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ## O que é Shadow DOM? O `Shadow DOM` é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura. Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag ``, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece: ![](https://dkrn4sk0rn31v.cloudfront.net/2020/03/24110939/HTML-Video-Shadow-DOM.png) Esta é toda a estrutura escondida **dentro** da tag ``. Note que há várias ``. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um `` do tipo `range`. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag ``. E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento. ## O que é Virtual DOM? Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance. É aí que entra o `Virtual DOM` (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado [Reconciliação](https://pt-br.reactjs.org/docs/reconciliation.html "Reconciliação"). A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações. Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React. Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix. [ ![Desenvolvedor React Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor React Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react-senior) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #DOM ](https://www.treinaweb.com.br/blog/tag/dom) - [ #Shadow DOM ](https://www.treinaweb.com.br/blog/tag/shadow-dom) - [ #Virtual DOM ](https://www.treinaweb.com.br/blog/tag/virtual-dom) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/2021/04/DOM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com JavaScript no navegador ](https://www.treinaweb.com.br/blog/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. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando) Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/VUE-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ O que é o Vue.js? ](https://www.treinaweb.com.br/blog/o-que-e-o-vue-js) Atualmente, graças à popularização do JavaScript, existe uma grande variedade de frameworks front-end para diferentes propósitos. Neste artigo, será abordado o Vue.js, um dos frameworks JavaScript SPA da atualidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/AJAX-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é uma requisição AJAX? ](https://www.treinaweb.com.br/blog/o-que-e-uma-requisicao-ajax) Hoje, é relativamente comum estarmos em contato com requisições AJAX. Confira neste artigo como essa requisição funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que há de novo no React 16? ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16) O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/o_que_e_jasmine-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ O que é Jasmine? ](https://www.treinaweb.com.br/blog/o-que-e-jasmine) Veja neste artigo o que é Jasmine. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/ainda-vale-a-pena-utilizar-o-jquery-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ Ainda vale a pena utilizar o jQuery? ](https://www.treinaweb.com.br/blog/ainda-vale-a-pena-utilizar-o-jquery) O jQuery é a biblioteca JavaScript mais famosa. Discutiremos nesse artigo se ainda vale a pena utilizá-lo e os cenários possíveis. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/06104639/TW-ENTREVISTAS-FABIO-400x280.png) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) 8 anos atrás ## [ TW Entrevista 08: Fabio Costa ](https://www.treinaweb.com.br/blog/tw-entrevista-08-fabio-costa) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Fabio Costa, desenvolvedor que já trabalhou na Globo.com, no Facebook e agora está na GoDaddy. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. 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/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. 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 **00h 52min 21s** - 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