{"id":11281,"date":"2023-09-14T09:13:02","date_gmt":"2023-09-14T12:13:02","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=11281"},"modified":"2024-01-09T07:08:36","modified_gmt":"2024-01-09T10:08:36","slug":"dom-javascript","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/","title":{"rendered":"DOM JavaScript: O que \u00e9 e como funciona?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">No vasto ecossistema do desenvolvimento web, <strong>o DOM JavaScript destaca-se como uma das ferramentas fundamentais para interagir e manipular conte\u00fado de p\u00e1ginas web em tempo real.&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Originado como uma conven\u00e7\u00e3o neutra de plataforma e linguagem, o <strong><code>DOM <\/code><\/strong>fornece uma <strong>representa\u00e7\u00e3o estruturada de um documento como uma \u00e1rvore de objetos<\/strong>. Cada n\u00f3 desta \u00e1rvore corresponde a uma parte do documento, seja ela um elemento <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">HTML<\/a>, um atributo ou texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript, como a linguagem de programa\u00e7\u00e3o predominante na web, utiliza o <code><strong>DOM <\/strong><\/code>para acessar e modificar dinamicamente o conte\u00fado, a estrutura e o estilo de um website.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse casamento entre JavaScript e <code><strong>DOM <\/strong><\/code>permitiu o desenvolvimento de <strong>p\u00e1ginas interativas e aplica\u00e7\u00f5es web de alto desempenho que conhecemos hoje<\/strong>. Os desenvolvedores podem, com precis\u00e3o, selecionar elementos, alterar atributos, modificar <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilos CSS<\/a>, criar ou remover n\u00f3s e responder a eventos, tudo atrav\u00e9s da interface de programa\u00e7\u00e3o do <code><strong>DOM<\/strong><\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para os programadores e entusiastas, entender as particularidades do <code><strong>DOM <\/strong><\/code>e sua integra\u00e7\u00e3o com o JavaScript n\u00e3o \u00e9 apenas uma habilidade valiosa, mas uma necessidade, \u00e0 medida que se aprofundam nas complexidades do <a href=\"https:\/\/www.alura.com.br\/artigos\/o-que-e-front-end-e-back-end\" target=\"_blank\" rel=\"noreferrer noopener\">desenvolvimento frontend<\/a> moderno.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, <strong>mergulharemos mais fundo no <code>DOM<\/code>, explorando sua estrutura, opera\u00e7\u00f5es fundamentais e intera\u00e7\u00f5es potencializadas pela linguagem JavaScript.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#O_que_e_o_DOM_JavaScript\" title=\"O que \u00e9 o DOM JavaScript?\">O que \u00e9 o DOM JavaScript?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Por_que_ele_e_importante\" title=\"Por que ele \u00e9 importante?\">Por que ele \u00e9 importante?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Como_o_DOM_e_Estruturado\" title=\"Como o DOM \u00e9 Estruturado?\">Como o DOM \u00e9 Estruturado?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Hierarquia_do_DOM\" title=\"Hierarquia do DOM\">Hierarquia do DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Arvore_DOM_como_Representacao_Visual\" title=\"\u00c1rvore DOM como Representa\u00e7\u00e3o Visual\">\u00c1rvore DOM como Representa\u00e7\u00e3o Visual<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Exemplos_praticos\" title=\"Exemplos pr\u00e1ticos\">Exemplos pr\u00e1ticos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Como_o_JavaScript_interage_com_o_DOM\" title=\"Como o JavaScript interage com o DOM\">Como o JavaScript interage com o DOM<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Metodos_comuns_para_selecao_de_elementos\" title=\"M\u00e9todos comuns para sele\u00e7\u00e3o de elementos\">M\u00e9todos comuns para sele\u00e7\u00e3o de elementos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Exemplos_praticos_de_selecao_e_manipulacao_de_elementos\" title=\"Exemplos pr\u00e1ticos de sele\u00e7\u00e3o e manipula\u00e7\u00e3o de elementos\">Exemplos pr\u00e1ticos de sele\u00e7\u00e3o e manipula\u00e7\u00e3o de elementos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#1_Alterando_o_conteudo_de_um_elemento\" title=\"1. Alterando o conte\u00fado de um elemento\">1. Alterando o conte\u00fado de um elemento<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#2_Alterando_o_HTML_de_um_elemento\" title=\"2. Alterando o HTML de um elemento\">2. Alterando o HTML de um elemento<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#3_Alterando_atributos_de_um_elemento\" title=\"3. Alterando atributos de um elemento\">3. Alterando atributos de um elemento<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#4_Alterando_estilos_de_um_elemento\" title=\"4. Alterando estilos de um elemento\">4. Alterando estilos de um elemento<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#5_Adicionando_e_removendo_classes\" title=\"5. Adicionando e removendo classes\">5. Adicionando e removendo classes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#6_Adicionando_um_ouvinte_de_evento_a_um_elemento\" title=\"6. Adicionando um ouvinte de evento a um elemento\">6. Adicionando um ouvinte de evento a um elemento<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Atualizacao_Dinamica_da_Pagina\" title=\"Atualiza\u00e7\u00e3o Din\u00e2mica da P\u00e1gina\">Atualiza\u00e7\u00e3o Din\u00e2mica da P\u00e1gina<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#1_Atualizacao_Dinamica_do_Conteudo\" title=\"1. Atualiza\u00e7\u00e3o Din\u00e2mica do Conte\u00fado\">1. Atualiza\u00e7\u00e3o Din\u00e2mica do Conte\u00fado<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#2_Eventos\" title=\"2. Eventos\">2. Eventos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#3_Manipulando_o_DOM_com_Eventos\" title=\"3. Manipulando o DOM com Eventos\">3. Manipulando o DOM com Eventos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#4_Formularios\" title=\"4. Formul\u00e1rios\">4. Formul\u00e1rios<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Cross-Browser_Compatibility\" title=\"Cross-Browser Compatibility\">Cross-Browser Compatibility<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Problemas_de_Compatibilidade_entre_Navegadores\" title=\"Problemas de Compatibilidade entre Navegadores\">Problemas de Compatibilidade entre Navegadores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Estrategias_para_Lidar_com_Diferencas_no_DOM_de_Navegadores_Antigos\" title=\"Estrat\u00e9gias para Lidar com Diferen\u00e7as no DOM de Navegadores Antigos\">Estrat\u00e9gias para Lidar com Diferen\u00e7as no DOM de Navegadores Antigos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_o_DOM_JavaScript\"><\/span>O que \u00e9 o DOM JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O DOM, ou Document Object Model, \u00e9 uma representa\u00e7\u00e3o estruturada de documentos. No contexto de p\u00e1ginas web, o DOM refere-se \u00e0 representa\u00e7\u00e3o estruturada de um documento HTML ou XML.<\/strong> Ele fornece uma forma program\u00e1tica de acessar, modificar, adicionar ou remover conte\u00fado e estrutura de um documento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <code><strong>DOM <\/strong><\/code>\u00e9 uma interface de programa\u00e7\u00e3o que permite <strong>a scripts interagir e modificar a estrutura, conte\u00fado e estilo de documentos web.<\/strong> Essencialmente, ele fornece uma representa\u00e7\u00e3o em \u00e1rvore da p\u00e1gina, onde cada n\u00f3 corresponde a uma parte (elemento, atributo, texto, etc.) do documento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine uma <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-basico\/\">p\u00e1gina web<\/a> como uma <strong>\u00e1rvore de elementos<\/strong>. No topo, temos o documento em si. Este documento pode conter v\u00e1rios elementos, como cabe\u00e7alhos, par\u00e1grafos, links, imagens, listas e outros. Cada um desses elementos pode conter seus pr\u00f3prios sub-elementos e assim por diante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <code><strong>DOM <\/strong><\/code>transforma todo este conte\u00fado em uma estrutura hier\u00e1rquica de n\u00f3s. Por exemplo, o elemento <code><strong>&lt;body&gt;<\/strong><\/code> de uma p\u00e1gina HTML pode ser um n\u00f3 na representa\u00e7\u00e3o do DOM. Dentro desse n\u00f3, voc\u00ea pode ter outros n\u00f3s representando cada par\u00e1grafo, imagem ou qualquer outro elemento contido dentro do <strong><code>&lt;body&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta representa\u00e7\u00e3o, assim, permite que os desenvolvedores naveguem, modifiquem, adicionem ou removam elementos e conte\u00fado dentro de uma p\u00e1gina de maneira program\u00e1tica, usando linguagens como JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Por_que_ele_e_importante\"><\/span>Por que ele \u00e9 importante?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Interatividade: <\/strong>com o DOM, os desenvolvedores podem criar p\u00e1ginas din\u00e2micas e interativas. Por exemplo, ao clicar em um bot\u00e3o, o JavaScript pode usar o <code><strong>DOM <\/strong><\/code>para mudar o conte\u00fado de um par\u00e1grafo, mostrar ou ocultar imagens, ou alterar cores e estilos;<\/li>\n\n\n\n<li><strong>Manipula\u00e7\u00e3o em tempo real:<\/strong> sem a necessidade de recarregar a p\u00e1gina, \u00e9 poss\u00edvel alterar qualquer parte dela. Isso \u00e9 essencial para criar experi\u00eancias de usu\u00e1rio fluidas, como em aplica\u00e7\u00f5es de p\u00e1gina \u00fanica (SPA &#8211; Single Page Application);<\/li>\n\n\n\n<li><strong>Integra\u00e7\u00e3o com APIs:<\/strong> muitas vezes, as aplica\u00e7\u00f5es web modernas se integram com APIs externas. O <code><strong>DOM <\/strong><\/code>permite que os desenvolvedores mostrem dados de uma API na p\u00e1gina, atualizem esses dados ou enviem informa\u00e7\u00f5es do usu\u00e1rio de volta para a API;<\/li>\n\n\n\n<li><strong>Flexibilidade:<\/strong> o <code><strong>DOM<\/strong><\/code> oferece aos desenvolvedores a capacidade de adaptar p\u00e1ginas web com base nas a\u00e7\u00f5es ou prefer\u00eancias dos usu\u00e1rios, criando assim experi\u00eancias personalizadas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Em suma, <strong>o <code><strong>DOM <\/strong><\/code> \u00e9 a ponte entre o conte\u00fado est\u00e1tico de uma p\u00e1gina web e as capacidades din\u00e2micas e interativas que os desenvolvedores querem implementar.<\/strong> Sem o <code><strong>DOM<\/strong><\/code>, portanto, a web como a conhecemos hoje \u2013 rica, din\u00e2mica e interativa \u2013 n\u00e3o seria poss\u00edvel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_o_DOM_e_Estruturado\"><\/span>Como o DOM \u00e9 Estruturado?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O <code><strong>DOM <\/strong><\/code>\u00e9 estruturado hierarquicamente e pode ser visualizado como uma \u00e1rvore de n\u00f3s. Vamos detalhar essa estrutura:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hierarquia_do_DOM\"><\/span>Hierarquia do DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Documento:<\/strong> o objeto raiz que representa todo o documento;<\/li>\n\n\n\n<li><strong>Elementos:<\/strong> representam tags HTML. Por exemplo: <code><strong>&lt;div&gt;, &lt;p&gt;, &lt;a&gt;,<\/strong><\/code> etc.;<\/li>\n\n\n\n<li><strong>Atributos:<\/strong> s\u00e3o propriedades que os elementos podem ter. Por exemplo: <code><strong>class, id, href,<\/strong><\/code> etc.;<\/li>\n\n\n\n<li><strong>Textos:<\/strong> representam o conte\u00fado textual dentro das <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/meta-tag\/\" target=\"_blank\" rel=\"noreferrer noopener\">tags<\/a>;<\/li>\n\n\n\n<li><strong>Coment\u00e1rios e outros tipos:<\/strong> como coment\u00e1rios <code><strong>(&lt;!-- coment\u00e1rio --&gt;)<\/strong><\/code> ou declara\u00e7\u00f5es de tipo de documento <strong><code>(&lt;!DOCTYPE html&gt;)<\/code><\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Arvore_DOM_como_Representacao_Visual\"><\/span>\u00c1rvore <code><strong>DOM <\/strong><\/code>como Representa\u00e7\u00e3o Visual<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine um documento HTML como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Meu T\u00edtulo&lt;\/title&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"meuId\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ol\u00e1, &lt;strong&gt;mundo!&lt;\/strong&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n\nA \u00e1rvore DOM para este documento seria algo assim:\n\nDocument\n\n|\n\n|-- DOCTYPE: html\n\n|\n\n|-- Element: html\n\n&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;|-- Element: head\n\n&nbsp;&nbsp;&nbsp;&nbsp;| &nbsp; |\n\n&nbsp;&nbsp;&nbsp;&nbsp;| &nbsp; |-- Element: title\n\n&nbsp;&nbsp;&nbsp;&nbsp;| &nbsp; &nbsp; &nbsp; |\n\n&nbsp;&nbsp;&nbsp;&nbsp;| &nbsp; &nbsp; &nbsp; |-- Text: Meu T\u00edtulo\n\n&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;|-- Element: body\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|-- Element: div (Attributes: id=\"meuId\")\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|-- Text: Ol\u00e1,&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|-- Element: strong\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|-- Text: mundo!<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada n\u00edvel de indenta\u00e7\u00e3o na representa\u00e7\u00e3o acima \u00e9 um n\u00edvel na \u00e1rvore <strong><code>DOM<\/code><\/strong>. Cada entrada \u00e9 um &#8220;n\u00f3&#8221; no <strong><code>DOM<\/code><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplos_praticos\"><\/span>Exemplos pr\u00e1ticos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine, por exemplo, que voc\u00ea tenha o seguinte documento HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html lang=\"pt-br\"&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=\"UTF-8\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Teste DOM&lt;\/title&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"meuId\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ol\u00e1, &lt;strong&gt;mundo!&lt;\/strong&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=\"botao\"&gt;Clique para modificar&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n\nAgora, em um arquivo separado chamado script.js, voc\u00ea teria o seguinte c\u00f3digo:\n\ndocument.addEventListener('DOMContentLoaded', function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Acessar o elemento com id \"meuId\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;var meuElemento = document.getElementById('meuId');\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Acessar todos os elementos &lt;strong&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;var elementosFortes = document.getElementsByTagName('strong');\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Fun\u00e7\u00e3o que modifica o DOM ao clicar no bot\u00e3o\n\n&nbsp;&nbsp;&nbsp;&nbsp;function modificarDOM() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Alterar o conte\u00fado de texto do elemento com id \"meuId\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;meuElemento.textContent = \"Texto alterado!\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionar uma nova classe ao elemento\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;meuElemento.classList.add(\"minhaClasse\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Altera o texto do primeiro elemento &lt;strong&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(elementosFortes.length &gt; 0) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elementosFortes&#091;0].textContent = \"Planeta!\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adiciona o evento de clique ao bot\u00e3o\n\n&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('botao').addEventListener('click', modificarDOM);\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com esta configura\u00e7\u00e3o, quando voc\u00ea carregar a p\u00e1gina e clicar no bot\u00e3o, o texto dentro do <code><strong>&lt;div&gt;<\/strong><\/code> com <strong><code>id=\"meuId\"<\/code><\/strong> mudar\u00e1 para <code>\"Texto alterado!\" <\/code>e o <strong><code>&lt;strong&gt;<\/code><\/strong> mudar\u00e1 para <code>\"Planeta!\"<\/code>. Al\u00e9m disso, uma classe chamada <code>\"minhaClasse\"<\/code> ser\u00e1 adicionada ao <code><strong>&lt;div&gt;<\/strong><\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para test\u00e1-lo, voc\u00ea precisaria salvar o HTML em um arquivo, digamos <code><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/criar-arquivo-index-html\/\">index.html<\/a><\/code>, e o JavaScript em um arquivo chamado <code>script.js<\/code>, depois abrir o <code>index.html<\/code> em um navegador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_o_JavaScript_interage_com_o_DOM\"><\/span>Como o JavaScript interage com o DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Quando uma p\u00e1gina web \u00e9 carregada, o navegador cria a representa\u00e7\u00e3o do <code><strong>DOM <\/strong><\/code>dessa p\u00e1gina. <\/strong>O JavaScript pode ser usado para alterar essa representa\u00e7\u00e3o, permitindo que os desenvolvedores modifiquem o conte\u00fado, a estrutura e o estilo de uma p\u00e1gina web de forma din\u00e2mica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Metodos_comuns_para_selecao_de_elementos\"><\/span>M\u00e9todos comuns para sele\u00e7\u00e3o de elementos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>getElementById: Retorna um elemento que possui o atributo id com o valor especificado.\n\n\/\/ Seleciona um elemento com o ID 'meuId'\n\nlet elemento = document.getElementById('meuId');\n\nquerySelector: Retorna o primeiro elemento que corresponde ao grupo de seletores especificado.\n\n\/\/ Seleciona o primeiro link da p\u00e1gina\n\nlet primeiroLink = document.querySelector('a');\n\n\/\/ Seleciona o primeiro elemento com a classe 'minhaClasse'\n\nlet elementoEspecifico = document.querySelector('.minhaClasse');\n\nquerySelectorAll: Retorna todos os elementos que correspondem ao grupo de seletores especificado.\n\n\/\/ Seleciona todos os links da p\u00e1gina\n\nlet todosLinks = document.querySelectorAll('a');\n\n\/\/ Seleciona todos os elementos com a classe 'minhaClasse'\n\nlet todosElementosComClasse = document.querySelectorAll('.minhaClasse');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplos_praticos_de_selecao_e_manipulacao_de_elementos\"><\/span>Exemplos pr\u00e1ticos de sele\u00e7\u00e3o e manipula\u00e7\u00e3o de elementos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Alterando_o_conteudo_de_um_elemento\"><\/span>1. Alterando o conte\u00fado de um elemento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona um elemento com o ID 'meuId' e altera seu conte\u00fado de texto\n\nlet elemento = document.getElementById('meuId');\n\nelemento.textContent = 'Novo conte\u00fado';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Alterando_o_HTML_de_um_elemento\"><\/span>2. Alterando o HTML de um elemento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona o primeiro elemento com a classe 'minhaClasse' e altera seu conte\u00fado HTML\n\nlet elemento = document.querySelector('.minhaClasse');\n\nelemento.innerHTML = '&lt;strong&gt;Texto em negrito&lt;\/strong&gt;';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Alterando_atributos_de_um_elemento\"><\/span>3. Alterando atributos de um elemento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona o primeiro link da p\u00e1gina e altera seu atributo href\n\nlet link = document.querySelector('a');\n\nlink.href = 'https:\/\/www.novo-site.com.br';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Alterando_estilos_de_um_elemento\"><\/span>4. Alterando estilos de um elemento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona o primeiro elemento com a classe 'minhaClasse' e altera suas propriedades de estilo\n\nlet elemento = document.querySelector('.minhaClasse');\n\nelemento.style.color = 'vermelho';\n\nelemento.style.fontSize = '20px';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Adicionando_e_removendo_classes\"><\/span>5. Adicionando e removendo classes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona o primeiro elemento com a classe 'minhaClasse', adiciona uma nova classe e remove a classe atual\n\nlet elemento = document.querySelector('.minhaClasse');\n\nelemento.classList.add('novaClasse');\n\nelemento.classList.remove('minhaClasse');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Adicionando_um_ouvinte_de_evento_a_um_elemento\"><\/span>6. Adicionando um ouvinte de evento a um elemento<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Seleciona o primeiro bot\u00e3o da p\u00e1gina e adiciona um ouvinte de evento para exibir um alerta quando clicado\n\nlet botao = document.querySelector('button');\n\nbotao.addEventListener('click', function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Bot\u00e3o foi clicado!');\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com estas t\u00e9cnicas b\u00e1sicas de manipula\u00e7\u00e3o do <code><strong>DOM <\/strong><\/code>usando JavaScript, em conclus\u00e3o, voc\u00ea ser\u00e1 capaz de criar intera\u00e7\u00f5es din\u00e2micas em suas p\u00e1ginas web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atualizacao_Dinamica_da_Pagina\"><\/span>Atualiza\u00e7\u00e3o Din\u00e2mica da P\u00e1gina<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o essencial para o desenvolvimento web. Ela permite que as p\u00e1ginas da web sejam din\u00e2micas, ou seja, que elas reajam a eventos e atualizem o conte\u00fado sem necessidade de recarregar a p\u00e1gina inteira.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso \u00e9 poss\u00edvel gra\u00e7as \u00e0 capacidade do JavaScript de interagir com o <code><strong>DOM <\/strong><\/code>(Document Object Model), que \u00e9 uma representa\u00e7\u00e3o estruturada do conte\u00fado da p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, abaixo veremos algumas divis\u00f5es desse processo:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Atualizacao_Dinamica_do_Conteudo\"><\/span>1. Atualiza\u00e7\u00e3o Din\u00e2mica do Conte\u00fado<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para atualizar o conte\u00fado de uma p\u00e1gina web em tempo real, podemos <strong>selecionar e manipular elementos do <code><strong>DOM<\/strong><\/code><\/strong>. Por exemplo, se quisermos alterar o texto de um par\u00e1grafo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('meuParagrafo').textContent = 'Novo conte\u00fado!';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Eventos\"><\/span>2. Eventos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript permite que voc\u00ea detecte e reaja a eventos. Os eventos mais comuns incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>click<\/code>:<\/strong> quando um usu\u00e1rio clica em um elemento;<\/li>\n\n\n\n<li><strong><code>submit:<\/code><\/strong> quando um formul\u00e1rio \u00e9 enviado;<\/li>\n\n\n\n<li><strong><code>change: <\/code><\/strong>quando o valor de um <strong><code>input <\/code><\/strong>ou <strong><code>textarea <\/code><\/strong>\u00e9 alterado;<\/li>\n\n\n\n<li><strong><code>mouseenter:<\/code><\/strong> quando o cursor do mouse entra no elemento;<\/li>\n\n\n\n<li><strong><code>mouseleave<\/code><\/strong>: quando o cursor do mouse sai do elemento.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, podemos reagir a um clique em um <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-buttton\/\" target=\"_blank\" rel=\"noreferrer noopener\">bot\u00e3o<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('meuBotao').addEventListener('click', function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Bot\u00e3o clicado!');\n\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Manipulando_o_DOM_com_Eventos\"><\/span>3. Manipulando o DOM com Eventos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Combinando manipula\u00e7\u00e3o do <code><strong>DOM <\/strong><\/code>e eventos, podemos atualizar dinamicamente a p\u00e1gina.<\/strong> Por exemplo, imagine um bot\u00e3o que altera o conte\u00fado de um par\u00e1grafo quando clicado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button id=\"meuBotao\"&gt;Clique aqui&lt;\/button&gt;\n\n&lt;p id=\"meuParagrafo\"&gt;Texto original.&lt;\/p&gt;\n\njavascript\n\ndocument.getElementById('meuBotao').addEventListener('click', function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('meuParagrafo').textContent = 'Texto atualizado!';\n\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Formularios\"><\/span>4. Formul\u00e1rios<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Formul\u00e1rios s\u00e3o uma parte integral de muitas p\u00e1ginas web e tamb\u00e9m podem ser manipulados e monitorados com JavaScript.<\/strong> Se voc\u00ea tiver um formul\u00e1rio e quiser prevenir seu envio padr\u00e3o e process\u00e1-lo com JavaScript, voc\u00ea pode fazer o seguinte:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form id=\"meuFormulario\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"text\" name=\"nome\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"submit\"&gt;Enviar&lt;\/button&gt;\n\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Em javascript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('meuFormulario').addEventListener('submit', function(evento) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;evento.preventDefault(); \/\/ Evita o envio padr\u00e3o do formul\u00e1rio\n\n&nbsp;&nbsp;&nbsp;&nbsp;var nome = evento.target.nome.value; \/\/ Pega o valor do input \"nome\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(nome);\n\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript, ao interagir com o DOM, oferece infinitas possibilidades para tornar as p\u00e1ginas web interativas e din\u00e2micas. Compreender eventos e manipula\u00e7\u00e3o do <code><strong>DOM,<\/strong><\/code> portanto, \u00e9 fundamental para qualquer desenvolvedor web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cross-Browser_Compatibility\"><\/span>Cross-Browser Compatibility<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A compatibilidade entre navegadores, ou &#8220;cross-browser compatibility&#8221;, <strong>refere-se \u00e0 capacidade de um site ou aplicativo da web funcionar corretamente em diferentes navegadores.&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Durante muito tempo, essa foi uma das \u00e1reas mais desafiadoras no desenvolvimento web, pois os fabricantes de navegadores, especialmente nos primeiros dias da web, implementavam o <code><strong>DOM <\/strong><\/code>e as funcionalidades relacionadas de maneira ligeiramente diferente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Problemas_de_Compatibilidade_entre_Navegadores\"><\/span>Problemas de Compatibilidade entre Navegadores<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Implementa\u00e7\u00f5es <\/strong>i<strong>nconsistentes do <code><strong>DOM<\/strong><\/code>:<\/strong> os primeiros navegadores tinham suas pr\u00f3prias interpreta\u00e7\u00f5es do <code><strong>DOM<\/strong><\/code>. Isso levava a cen\u00e1rios em que o mesmo c\u00f3digo JavaScript poderia funcionar em um navegador, mas n\u00e3o em outro;<\/li>\n\n\n\n<li><strong>CSS prefixado por navegador: <\/strong>em alguns casos, para usar recursos mais recentes de CSS, era necess\u00e1rio usar prefixos espec\u00edficos do navegador <code>(e.g., -webkit-, -moz-, -ms-)<\/code>;<\/li>\n\n\n\n<li><strong>Funcionalidades faltantes:<\/strong> alguns navegadores poderiam simplesmente n\u00e3o ter certas funcionalidades, especialmente navegadores mais antigos.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Estrategias_para_Lidar_com_Diferencas_no_DOM_de_Navegadores_Antigos\"><\/span>Estrat\u00e9gias para Lidar com Diferen\u00e7as no DOM de Navegadores Antigos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Feature Detection:<\/strong> em vez de verificar qual navegador o usu\u00e1rio est\u00e1 usando, uma abordagem melhor \u00e9 verificar se um determinado recurso est\u00e1 dispon\u00edvel. Por exemplo:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>if ('querySelector' in document) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ O navegador suporta querySelector\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ O navegador n\u00e3o suporta querySelector\n\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Polyfills:<\/strong> s\u00e3o scripts que permitem implementar funcionalidades em navegadores que n\u00e3o possuem suporte nativo a elas. Por exemplo, se um navegador antigo n\u00e3o suporta o m\u00e9todo <a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/foreach-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">Array.forEach<\/a>, voc\u00ea pode incluir um <code><strong>polyfill <\/strong><\/code>que fornece essa funcionalidade;<\/li>\n\n\n\n<li><strong>Uso de bibliotecas e <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">frameworks<\/a>:<\/strong> bibliotecas como jQuery foram criadas, em parte, para lidar com inconsist\u00eancias entre navegadores. Elas fornecem uma API consistente, cuidando das diferen\u00e7as entre navegadores nos bastidores;<\/li>\n\n\n\n<li><strong>CSS Reset:<\/strong> o uso de um reset de CSS (ou normaliza\u00e7\u00e3o) pode ajudar a garantir que os estilos sejam consistentemente aplicados em diferentes navegadores;<\/li>\n\n\n\n<li><strong>Teste em m\u00faltiplos navegadores: <\/strong>sempre teste seu site ou aplica\u00e7\u00e3o em diferentes navegadores (e vers\u00f5es) para garantir que tudo funciona como esperado;<\/li>\n\n\n\n<li><strong>Ferramentas como &#8220;Can I use&#8221;: <\/strong>o site Can I use \u00e9 uma refer\u00eancia valiosa para verificar o suporte de navegadores para v\u00e1rias funcionalidades da web;<\/li>\n\n\n\n<li><strong>Condicional para navegadores espec\u00edficos:<\/strong> embora n\u00e3o seja o ideal, em alguns casos, voc\u00ea pode precisar fornecer estilos ou scripts espec\u00edficos para um navegador. Por exemplo, vers\u00f5es antigas do Internet Explorer eram not\u00f3rias por necessitar de condi\u00e7\u00f5es especiais.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Embora a compatibilidade entre navegadores seja menos problem\u00e1tica hoje do que no passado, gra\u00e7as aos padr\u00f5es mais unificados adotados pelos fabricantes de navegadores, ainda \u00e9 essencial prestar aten\u00e7\u00e3o a ela, especialmente se o seu p\u00fablico-alvo incluir usu\u00e1rios de navegadores ou vers\u00f5es mais antigos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em suma, <strong>o Document Object Model (DOM) \u00e9 uma representa\u00e7\u00e3o estruturada program\u00e1tica do conte\u00fado de documentos web,<\/strong> predominantemente HTML ou XML.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <code><strong>DOM <\/strong><\/code>transforma documentos web em uma \u00e1rvore hier\u00e1rquica de n\u00f3s, permitindo aos desenvolvedores navegarem, modificarem e interagirem com o conte\u00fado de forma din\u00e2mica usando JavaScript.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele atua como uma ponte entre o conte\u00fado est\u00e1tico da p\u00e1gina e a interatividade desejada pelo desenvolvedor. Esta intera\u00e7\u00e3o possibilita a cria\u00e7\u00e3o de p\u00e1ginas din\u00e2micas, experi\u00eancias personalizadas e atualiza\u00e7\u00f5es em tempo real sem recarregar a p\u00e1gina.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript, ao trabalhar com o <code><strong>DOM<\/strong><\/code>, pode responder a eventos como cliques e altera\u00e7\u00f5es de conte\u00fado, tornando a web moderna, din\u00e2mica e responsiva.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para aprofundar seu entendimento, \u00e9 \u00fatil estudar t\u00e9cnicas de manipula\u00e7\u00e3o do <code><strong>DOM<\/strong><\/code>, pr\u00e1ticas recomendadas de desempenho, ferramentas de depura\u00e7\u00e3o e considera\u00e7\u00f5es sobre compatibilidade entre navegadores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Considere ler mais conte\u00fados em nosso <a href=\"https:\/\/www.homehost.com.br\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">blog<\/a> e aumentar seus conhecimentos em programa\u00e7\u00e3o e \u00e1reas afins.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No vasto ecossistema do desenvolvimento web, o DOM JavaScript destaca-se como uma das ferramentas fundamentais para interagir e manipular conte\u00fado de p\u00e1ginas web em tempo real.&nbsp; Originado como uma conven\u00e7\u00e3o neutra de plataforma e linguagem, o DOM fornece uma representa\u00e7\u00e3o estruturada de um documento como uma \u00e1rvore de objetos. Cada n\u00f3 desta \u00e1rvore corresponde a [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":11282,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6585],"tags":[],"class_list":["post-11281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DOM JavaScript: O que \u00e9 e como funciona? | Homehost<\/title>\n<meta name=\"description\" content=\"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DOM JavaScript: O que \u00e9 e como funciona? | Homehost\" \/>\n<meta property=\"og:description\" content=\"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-14T12:13:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:08:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daiana S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daiana S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/\",\"name\":\"DOM JavaScript: O que \u00e9 e como funciona? | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png\",\"datePublished\":\"2023-09-14T12:13:02+00:00\",\"dateModified\":\"2024-01-09T10:08:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"description\":\"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DOM JavaScript: O que \u00e9 e como funciona?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\",\"name\":\"Daiana S\",\"description\":\"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DOM JavaScript: O que \u00e9 e como funciona? | Homehost","description":"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"DOM JavaScript: O que \u00e9 e como funciona? | Homehost","og_description":"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.","og_url":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-09-14T12:13:02+00:00","article_modified_time":"2024-01-09T10:08:36+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png","type":"image\/png"}],"author":"Daiana S","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Daiana S","Est. tempo de leitura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/","url":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/","name":"DOM JavaScript: O que \u00e9 e como funciona? | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png","datePublished":"2023-09-14T12:13:02+00:00","dateModified":"2024-01-09T10:08:36+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"description":"Abordamos tudo sobre a integra\u00e7\u00e3o do DOM JavaScript e sua capacidade de representar documentos estruturalmente.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/dom-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"DOM JavaScript: O que \u00e9 e como funciona?"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689","name":"Daiana S","description":"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br"}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=11281"}],"version-history":[{"count":8,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11281\/revisions"}],"predecessor-version":[{"id":13075,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11281\/revisions\/13075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/11282"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=11281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=11281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=11281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}