{"id":10418,"date":"2023-08-06T09:43:25","date_gmt":"2023-08-06T12:43:25","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=10418"},"modified":"2024-05-02T11:06:24","modified_gmt":"2024-05-02T14:06:24","slug":"print-div-javascript","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/","title":{"rendered":"Print Div JavaScript: como usar e quais as funcionalidades"},"content":{"rendered":"\n<p>Se voc\u00ea j\u00e1 se perguntou como desenvolver uma interface interativa e visualmente envolvente usando JavaScript, este tutorial trar\u00e1 exemplos disso focado no uso do <strong>Print div JavaScript.<\/strong> <\/p>\n\n\n\n<p>Neste artigo, exploraremos passo a passo de como<strong> criar, modificar e concatenar elementos div dinamicamente em sua p\u00e1gina da <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/servidor-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">web<\/a><\/strong>, oferecendo uma experi\u00eancia interativa e \u00fanica aos seus visitantes.<\/p>\n\n\n\n<p>N\u00e3o \u00e9 necess\u00e1rio ser um especialista em programa\u00e7\u00e3o para acompanhar este guia, pois abordaremos conceitos b\u00e1sicos de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML, CSS<\/a> e JavaScript que ser\u00e3o fundamentais para o desenvolvimento de uma funcionalidade din\u00e2mica.<\/p>\n\n\n\n<p>Confira o texto abaixo e veja os conceitos necess\u00e1rios.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ff6a0038\">Outros t\u00edtulos interessantes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/switch-javascript\/\">Switch JavaScript: O que \u00e9 e como usar?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/tipos-de-funcoes-javascript\/\">Quais s\u00e3o os tipos de fun\u00e7\u00f5es JavaScript?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/alert-javascript\/\">Alert JavaScript: Como exibir uma mensagem na tela<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/map-javascript\/\">Map JavaScript: Potencializando a Efici\u00eancia com o Uso Desse M\u00e9todo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/reduce-javascript\/\">Reduce JavaScript: Desvendando a usabilidade e pr\u00e1tica<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\">Como mudar background em&nbsp;JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/\">Print Div JavaScript: como usar e quais as funcionalidades<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/foreach-javascript\/\">forEach JavaScript: exemplos pr\u00e1ticos<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/entendendo-e-utilizando-a-tag-span-em-html\/\">Entendendo e Utilizando a Tag span em HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/select-html\/\">Select em HTML: crie menus em um formul\u00e1rio HTML<\/a><\/li>\n<\/ul>\n\n\n\n<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\/print-div-javascript\/#O_que_e_Print_div_JavaScript\" title=\"O que \u00e9 Print div JavaScript?\">O que \u00e9 Print div 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\/print-div-javascript\/#Pre-requisitos_para_usar_Print_div_JavaScript\" title=\"Pr\u00e9-requisitos para usar Print div JavaScript\">Pr\u00e9-requisitos para usar Print div JavaScript<\/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\/print-div-javascript\/#Como_usar_Print_div_JavaScript\" title=\"Como usar Print div JavaScript\">Como usar Print div JavaScript<\/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\/print-div-javascript\/#Passo_1_Preparando_o_HTML\" title=\"Passo 1: Preparando o HTML\">Passo 1: Preparando o HTML<\/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\/print-div-javascript\/#Passo_2_Criando_botao_dinamicamente\" title=\"Passo 2: Criando bot\u00e3o dinamicamente\">Passo 2: Criando bot\u00e3o dinamicamente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Passo_3_Aprimorando_a_experiencia_visual\" title=\"Passo 3: Aprimorando a experi\u00eancia visual\">Passo 3: Aprimorando a experi\u00eancia visual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Criando_a_estrutura_de_dados_em_forma_de_arvore_com_Print_div_JavaScript\" title=\"Criando a estrutura de dados em forma de \u00e1rvore com Print div JavaScript\">Criando a estrutura de dados em forma de \u00e1rvore com Print div JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Criando_a_funcao_para_gerar_os_filhos_dos_quadrantes\" title=\"Criando a fun\u00e7\u00e3o para gerar os filhos dos quadrantes\">Criando a fun\u00e7\u00e3o para gerar os filhos dos quadrantes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Funcao_para_gerar_a_Arvore_recursivamente\" title=\"Fun\u00e7\u00e3o para gerar a \u00c1rvore recursivamente\">Fun\u00e7\u00e3o para gerar a \u00c1rvore recursivamente<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Alternativas_a_esse_metodo\" title=\"Alternativas a esse m\u00e9todo\">Alternativas a esse m\u00e9todo<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Lista_de_metodos_e_propriedades_para_procurar_elementos_no_DOM\" title=\"Lista de m\u00e9todos e propriedades para procurar elementos no DOM\">Lista de m\u00e9todos e propriedades para procurar elementos no DOM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_Print_div_JavaScript\"><\/span>O que \u00e9 Print div JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript possui a funcionalidade &#8220;Print div&#8221; que permite criar elementos din\u00e2micos na web. Com essa funcionalidade, \u00e9 poss\u00edvel modificar, criar, deletar ou mover elementos, proporcionando uma experi\u00eancia de usu\u00e1rio mais fluida usando JavaScript.<\/p>\n\n\n\n<p>Uma pr\u00e1tica comum no mercado \u00e9 criar conte\u00fado dinamicamente com <code><strong>RESTful,<\/strong><\/code> e o desenvolvedor precisa saber como manipular esses dados. Antes disso, \u00e9 necess\u00e1rio aprender a manipular elementos e imprimir novas <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\">divs HTML<\/a> na p\u00e1gina.<\/p>\n\n\n\n<p>Assim, vamos avan\u00e7ar e ensinar como construir uma <strong>Div Interativa com Flex e \u00c1rvore em JavaScript.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pre-requisitos_para_usar_Print_div_JavaScript\"><\/span>Pr\u00e9-requisitos para usar Print div JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Conhecimentos b\u00e1sicos de HTML, CSS e JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_usar_Print_div_JavaScript\"><\/span>Como usar Print div JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Passo_1_Preparando_o_HTML\"><\/span>Passo 1: Preparando o HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Primeiramente,<\/strong> crie um novo arquivo com extens\u00e3o <strong><code>\".html\"<\/code><\/strong> utilizando um editor de texto ou uma ferramenta de IDE de sua escolha. Esse arquivo servir\u00e1 como a base da sua p\u00e1gina web.<\/p>\n\n\n\n<p>Como ferramenta IDE, recomenda-se usar os populares do mercado de trabalho, \u00e9 bom se familiarizar com eles para uma boa oportunidade, algumas men\u00e7\u00f5es populares s\u00e3o <strong>Visual Studio Code (Para desenvolvimento geral), IntelliJ IDEA, Atom, Notepad+ e Sublime Text.<\/strong><\/p>\n\n\n\n<p><strong>No arquivo HTML, comece definindo a estrutura b\u00e1sica da p\u00e1gina,<\/strong> utilizando as tags <strong><code>&lt;html&gt;, &lt;head&gt;, e &lt;body&gt;<\/code><\/strong>. No <strong><code>&lt;head&gt;<\/code><\/strong>, voc\u00ea pode adicionar metadados, links para folhas de estilo CSS e, o mais importante, incluir o script do seu c\u00f3digo JavaScript utilizando a tag <strong><code>&lt;script&gt;<\/code><\/strong>.&nbsp;<\/p>\n\n\n\n<p>Voc\u00ea pode fazer isso atrav\u00e9s de um arquivo externo (usando o <strong>atributo src<\/strong>) ou incorporando o c\u00f3digo diretamente entre as tags <strong><code>&lt;script&gt;&lt;\/script&gt;<\/code>.<\/strong><\/p>\n\n\n\n<p>Para <strong>visualizar o resultado do seu c\u00f3digo JavaScript em a\u00e7\u00e3o<\/strong>, abra o arquivo HTML em um <a href=\"https:\/\/exame.com\/tecnologia\/navegador-brasileiro-e-mais-veloz-do-que-o-chrome-no-android\/\">navegador da web<\/a>. Voc\u00ea pode simplesmente clicar duas vezes no arquivo HTML, e o navegador abrir\u00e1 a p\u00e1gina com o JavaScript em execu\u00e7\u00e3o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Para criar, modificar e concatenar elementos &lt;div&gt; com JavaScript&nbsp;<\/h4>\n\n\n\n<p>Voc\u00ea pode usar a <strong>API DOM (Modelo de Objeto de Documento)<\/strong>. Essa API permite que voc\u00ea interaja com a estrutura HTML de uma p\u00e1gina e fa\u00e7a manipula\u00e7\u00f5es din\u00e2micas, como criar novos elementos, modificar seus atributos e conte\u00fado, bem como adicionar e remover elementos.<\/p>\n\n\n\n<p>Acr\u00e9scimo: atrav\u00e9s da API DOM, \u00e9 poss\u00edvel acessar elementos HTML por meio de seletores como <strong><code>getElementById, getElementsByClassName, getElementsByTagName e querySelector,<\/code><\/strong> permitindo encontrar elementos espec\u00edficos na p\u00e1gina.<\/p>\n\n\n\n<p>Aqui vem um exemplo simples do que se trata:<\/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;Manipula\u00e7\u00e3o de Divs com JavaScript&lt;\/title&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=\"criarDiv()\"&gt;Criar Div&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function criarDiv() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar um novo elemento div\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var novaDiv = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionar algum conte\u00fado na div\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;novaDiv.textContent = 'Nova Div criada com JavaScript';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionar a nova div ao final do body (ou outro elemento de sua escolha)\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(novaDiv);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/YOEGGlmJFFf91czlajb62Evp_2wlyMh64z6sYu2x2pL4xxflQ9rc5YQ49ViiJrLTGEgl3lg7M1tFPS-j-jX9sCkCRmlTX6k33HX_6v8_-c6CHW0Rc64PiosLq5k7XpbLlvC-XIiYeM4lx50UK_R5wN8\" alt=\"\" width=\"250\" height=\"273\" \/><figcaption class=\"wp-element-caption\">Sa\u00edda visual do c\u00f3digo<\/figcaption><\/figure>\n\n\n\n<p>Nesse exemplo, apresentamos um c\u00f3digo HTML com um bot\u00e3o simples que dispara a fun\u00e7\u00e3o <strong><code>CriarDiv()<\/code> em JavaScript<\/strong>, essa fun\u00e7\u00e3o \u00e9 respons\u00e1vel por criar uma <strong>div<\/strong>, adicionar conte\u00fado a ela e, em seguida, concaten\u00e1-la ao corpo do HTML. \u00c9 uma maneira eficiente de gerar conte\u00fado dinamicamente e melhorar a interatividade da p\u00e1gina.<\/p>\n\n\n\n<p><strong>\u00c9 importante destacar que o uso de bot\u00f5es pr\u00e9-definidos \u00e9 apenas uma das muitas possibilidades.<\/strong> Com JavaScript, podemos explorar uma infinidade de gatilhos, condi\u00e7\u00f5es e eventos para criar e modificar conte\u00fado dinamicamente.&nbsp;<\/p>\n\n\n\n<p>Isso nos permite <a href=\"https:\/\/www2.infobip.com\/pt\/blog\/personalizacao-da-experiencia-dos-usuarios\">personalizar a experi\u00eancia do usu\u00e1rio<\/a> de acordo com a\u00e7\u00f5es espec\u00edficas, como cliques, digita\u00e7\u00f5es ou at\u00e9 mesmo respostas a formul\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Passo_2_Criando_botao_dinamicamente\"><\/span>Passo 2: Criando bot\u00e3o dinamicamente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A seguir um exemplo sem um body na p\u00e1gina, apenas JavaScript para criar o conte\u00fado do body.<\/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;Manipula\u00e7\u00e3o de Divs com JavaScript&lt;\/title&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Fun\u00e7\u00e3o para criar as divs e o bot\u00e3o\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function criarDivs() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar o bot\u00e3o dinamicamente\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var botao = document.createElement('button');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;botao.textContent = 'Criar Divs';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;botao.onclick = function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Fun\u00e7\u00e3o para ser executada ao clicar no bot\u00e3o\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;criarDivsDinamicamente();\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;document.body.appendChild(botao);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Fun\u00e7\u00e3o para criar as divs dinamicamente\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function criarDivsDinamicamente() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar as duas divs\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div1 = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div1.textContent = 'Esta \u00e9 a primeira div criada dinamicamente.';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div1.style.backgroundColor = 'lightblue';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div2 = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div2.textContent = 'Esta \u00e9 a segunda div criada dinamicamente.';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div2.style.backgroundColor = 'lightgreen';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar um elemento pai (container) para as duas divs\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var container = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionar as duas divs ao container\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container.appendChild(div1);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container.appendChild(div2);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionar o container ao body da p\u00e1gina\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(container);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Chamar a fun\u00e7\u00e3o para criar o bot\u00e3o\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;criarDivs();\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/PWsbW7k2MXivUKdZDLjfR_jk7ZQHHEWAv815vcwJs7uSRRUwiWJLTPxt56qdJ8q4QowPCsLxgUpm2FbuehMkWnwqje65iFpnQ8YJcaP-aaQ4ZOAi7rwgNoPFxGZC-QGL8G2iPA87ZJepxiPKIqI3Fa4\" alt=\"\" width=\"303\" height=\"106\" \/><figcaption class=\"wp-element-caption\">Sa\u00edda visual do c\u00f3digo<\/figcaption><\/figure>\n\n\n\n<p>A principal diferen\u00e7a neste exemplo \u00e9 a primeira fun\u00e7\u00e3o que \u00e9 chamada quando a p\u00e1gina \u00e9 carregada. Assim, essa fun\u00e7\u00e3o cria o bot\u00e3o e o restante do algoritmo \u00e9 semelhante ao exemplo anterior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Passo_3_Aprimorando_a_experiencia_visual\"><\/span>Passo 3: Aprimorando a experi\u00eancia visual<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Agora, vamos a algo que entretenha visualmente:<\/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;Exemplo de Div Interativa com Flex&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/* Estilo para a div que ocupa a tela inteira *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#divPrincipal {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: flex;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100vw;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100vh;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap: wrap;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-evenly;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-content: stretch;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/* Estilo para os quadrantes *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.quadrante {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 1 1 50%;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 4px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: flex;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-evenly;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 20px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-content: stretch;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap: wrap;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 2px 2px 2px inset;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"divPrincipal\" onclick=\"criarFilhos(event)\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;2&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;3&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;4&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function criarFilhos(event) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = event.target;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Verificar se o clique foi em um dos quadrantes\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (target.classList.contains('quadrante')) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Limpar o conte\u00fado do quadrante clicado\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.innerHTML = '';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar quatro filhos iguais dentro do quadrante\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 1; i &lt;= 4; i++) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var filho = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.classList.add('quadrante');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Calcular cores com base no n\u00edvel de profundidade (contador \"i\")\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var r = 255 - i * 20;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var g = 150 + i * 20;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var b = 100 + i * 20;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.appendChild(filho);\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;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/WM9kpSBT-mNZhVmH18_sTGIUYrUpz3yFZIsPtXoX9JS4Fm-TeeUdb634BACfZNK4kw1h6xu65Ojn-TicOpg_qyh7p6AHje4h7KGQo7UXRjto00p4UMaVbUlxkihq5eu7I86gnIxNGM4CHUzbfDHR060\" alt=\"\" width=\"687\" height=\"343\" \/><figcaption class=\"wp-element-caption\">Saida do c\u00f3digo usando design de quadrantes<\/figcaption><\/figure>\n\n\n\n<p><strong>Nesse exemplo, a magia acontece quando usamos a propriedade <code>onClick<\/code> diretamente na div.<\/strong> Ao clicar, uma fun\u00e7\u00e3o JavaScript \u00e9 acionada, criando quatro novas divs como filhos da div clicada. Esse efeito \u00e9 gerado recursivamente, permitindo que cada nova div tamb\u00e9m tenha a mesma funcionalidade.<\/p>\n\n\n\n<p><strong>O CSS entra em cena para proporcionar a apar\u00eancia desejada.<\/strong> Focamos na cria\u00e7\u00e3o din\u00e2mica e interativa das divs.<\/p>\n\n\n\n<p>Agora, enfrentemos um desafio maior. A partir do \u00faltimo exemplo, queremos ter mais controle sobre nossas divs din\u00e2micas. Para isso, utilizaremos uma estrutura de dados chamada &#8220;\u00e1rvore&#8221; (tamb\u00e9m conhecida como tree) para nos auxiliar. Assim, essa abordagem permitir\u00e1 um controle mais aprofundado da hierarquia das divs, considerando sua profundidade na estrutura.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_a_estrutura_de_dados_em_forma_de_arvore_com_Print_div_JavaScript\"><\/span>Criando a estrutura de dados em forma de \u00e1rvore com Print div JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Um objeto JavaScript representa a estrutura, contendo uma cor e uma lista de filhos.<\/strong> A \u00e1rvore ser\u00e1 atualizada dinamicamente conforme criamos novos quadrantes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Estrutura de dados em forma de \u00e1rvore\n\nvar arvore = {\n\n&nbsp;&nbsp;&nbsp;&nbsp;cor: { r: 255, g: 150, b: 100 },\n\n&nbsp;&nbsp;&nbsp;&nbsp;filhos: &#091;]\n\n};<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_a_funcao_para_gerar_os_filhos_dos_quadrantes\"><\/span>Criando a fun\u00e7\u00e3o para gerar os filhos dos quadrantes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ao criar a fun\u00e7\u00e3o <strong><code>criarFilhos(event, profundidade)<\/code><\/strong> que ser\u00e1 acionada quando o usu\u00e1rio clicar em um dos quadrantes. Esta fun\u00e7\u00e3o cria os filhos dentro do quadrante clicado, utilizando a estrutura de dados em forma de \u00e1rvore e <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">aplicando as cores de forma din\u00e2mica<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function criarFilhos(event, profundidade) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;var target = event.target;\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Verificar se o clique foi em um dos quadrantes\n\n&nbsp;&nbsp;&nbsp;&nbsp;if (target.classList.contains('quadrante')) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Limpar o conte\u00fado do quadrante clicado\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.innerHTML = '';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Gerar a \u00e1rvore dinamicamente para os filhos\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gerarArvore(target, arvore, profundidade);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Funcao_para_gerar_a_Arvore_recursivamente\"><\/span>Fun\u00e7\u00e3o para gerar a \u00c1rvore recursivamente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Criando a fun\u00e7\u00e3o <strong><code>gerarArvore(pai, no, profundidade)<\/code><\/strong> que ir\u00e1 criar os filhos recursivamente dentro do quadrante pai, ajustando a cor conforme a profundidade na \u00e1rvore.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function gerarArvore(pai, no, profundidade) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar quatro filhos iguais dentro do quadrante\n\n&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; 4; i++) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var filho = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.classList.add('quadrante');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var corMaisForte = 255 - profundidade * 20;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pai.appendChild(filho);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Se o n\u00f3 tiver filhos, chamar a fun\u00e7\u00e3o recursivamente para cada filho\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (no.filhos.length &gt; 0) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gerarArvore(filho, no.filhos&#091;i], profundidade + 1);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n}<\/code><\/pre>\n\n\n\n<p>Ao clicar em um quadrante, a fun\u00e7\u00e3o <strong><code>gerarArvore<\/code><\/strong> ser\u00e1 chamada com a profundidade correta, e essa profundidade ser\u00e1 passada corretamente na chamada recursiva para a fun\u00e7\u00e3o <strong><code>gerarArvore<\/code><\/strong>.&nbsp;<\/p>\n\n\n\n<p>Dessa forma, ajuste a cor de acordo com a profundidade na \u00e1rvore. Teste o c\u00f3digo novamente para ver os quadrantes coloridos corretamente, criando uma hierarquia de cores mais forte \u00e0 medida que adentramos a \u00e1rvore.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/syFinSwqrrR-Jc8zVQECEObFECMH2UU0jhpZKlrho--6tDWFPwT5qKsybP7yBWzEk7wotnoOjoqhxKsVrjUwyr49dIcNkRuJYd_8zlF1DkQmjLspBR3i3a9WR-_eO79kAUZBc1fAYectYyY-7j7JpMg\" alt=\"\" width=\"685\" height=\"382\" \/><figcaption class=\"wp-element-caption\">Sa\u00edda do c\u00f3digo usando quadrantes, estrutura de dados \u00e1rvore e colorindo baseado na profundidade na estrutura<\/figcaption><\/figure>\n\n\n\n<p><strong>O c\u00f3digo completo do exemplo:<\/strong><\/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;Exemplo de Div Interativa com Flex&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user-select: none;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/* Estilo para a div que ocupa a tela inteira *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#divPrincipal {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: flex;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100vw;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100vh;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap: wrap;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-evenly;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-content: stretch;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/* Estilo para os quadrantes *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.quadrante {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 1 1 50%;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid black;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 4px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: flex;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-evenly;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 20px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-content: stretch;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap: wrap;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 2px 2px 17px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 90%;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=\"divPrincipal\" onclick=\"criarFilhos(event)\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"quadrante\"&gt;1&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Estrutura de dados em forma de \u00e1rvore\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var arvore = {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cor: { r: 255, g: 150, b: 100 },\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filhos: &#091;]\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function criarFilhos(event, profundidade) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = event.target;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Verificar se o clique foi em um dos quadrantes\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (target.classList.contains('quadrante')) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Limpar o conte\u00fado do quadrante clicado\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Gerar a \u00e1rvore dinamicamente para os filhos\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gerarArvore(target, arvore, profundidade);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function gerarArvore(pai, no, profundidade) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(profundidade == null){\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profundidade = pai.textContent*1+1;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pai.textContent == \"\"){\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;profundidade = 1;\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;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pai.innerHTML = '';\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Criar quatro filhos iguais dentro do quadrante\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; 4; i++) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var filho = document.createElement('div');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.classList.add('quadrante');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var corMaisForte = 255 - profundidade * 20;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filho.textContent = profundidade;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pai.appendChild(filho);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Se o n\u00f3 tiver filhos, chamar a fun\u00e7\u00e3o recursivamente para cada filho\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (no.filhos.length &gt; 0) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gerarArvore(filho, no.filhos&#091;i], profundidade + 1);\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;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternativas_a_esse_metodo\"><\/span>Alternativas a esse m\u00e9todo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Algumas formas comuns de interagir com elementos HTML usando JavaScript:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code><strong>appendChild():<\/strong><\/code><\/li>\n<\/ol>\n\n\n\n<p><strong>O m\u00e9todo <code>appendChild()<\/code> \u00e9 utilizado para adicionar um novo elemento como filho de outro elemento HTML.<\/strong> Ele permite que voc\u00ea insira um elemento no final da lista de filhos de um elemento-pai. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const parentElement = document.getElementById('parent');\n\nconst newChild = document.createElement('div');\n\nparentElement.appendChild(newChild)<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><code><strong>textContent:<\/strong><\/code><\/li>\n<\/ol>\n\n\n\n<p>A propriedade <code><strong>textContent<\/strong><\/code> <strong>\u00e9 utilizada para definir ou obter o conte\u00fado de texto de um elemento HTML.<\/strong> Ela permite que voc\u00ea insira ou obtenha o texto dentro de uma tag. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = document.getElementById('myElement');\n\nelement.textContent = 'Este \u00e9 o novo texto.';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><code><strong>innerHTML:<\/strong><\/code><\/li>\n<\/ol>\n\n\n\n<p><strong>A propriedade <code>innerHTML<\/code> \u00e9 usada para definir ou obter o conte\u00fado HTML de um elemento.<\/strong> Ela permite que voc\u00ea insira ou obtenha HTML dentro de uma tag. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = document.getElementById('myElement');\n\nelement.innerHTML = '&lt;h2&gt;Novo T\u00edtulo&lt;\/h2&gt;&lt;p&gt;Novo conte\u00fado&lt;\/p&gt;';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong><code>innerText:<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>A propriedade <code>innerText<\/code> \u00e9 semelhante \u00e0 propriedade <code>textContent<\/code>, <\/strong>mas ela retorna apenas o texto vis\u00edvel no elemento, excluindo qualquer c\u00f3digo HTML. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = document.getElementById('myElement');\n\nconst text = element.innerText;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong><code>insertBefore():<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>O m\u00e9todo <code>insertBefore()<\/code> \u00e9 usado para inserir um novo elemento antes de outro elemento j\u00e1 existente, dentro do mesmo elemento-pai. <\/strong>Ele permite que voc\u00ea especifique a posi\u00e7\u00e3o de inser\u00e7\u00e3o do novo elemento. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const parentElement = document.getElementById('parent');\n\nconst newChild = document.createElement('div');\n\nconst referenceElement = document.getElementById('reference');\n\nparentElement.insertBefore(newChild, referenceElement);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lista_de_metodos_e_propriedades_para_procurar_elementos_no_DOM\"><\/span>Lista de m\u00e9todos e propriedades para procurar elementos no DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>parentElement:<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>A propriedade <code>parentElement<\/code> permite acessar o elemento-pai de um elemento.<\/strong> Com ela, voc\u00ea pode navegar na hierarquia do DOM e obter o pai de um elemento. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const childElement = document.getElementById('child');\n\nconst parentElement = childElement.parentElement;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong><code>previousSibling:<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>A propriedade <code>previousSibling<\/code> \u00e9 usada para acessar o n\u00f3 irm\u00e3o anterior <\/strong>(anterior na hierarquia do DOM) de um elemento. Essa propriedade considera qualquer tipo de n\u00f3, como elementos, textos ou coment\u00e1rios. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = document.getElementById('myElement');\n\nconst previousElement = element.previousSibling;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong><code>children:<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p><strong>A propriedade <code>children<\/code> retorna uma cole\u00e7\u00e3o de elementos filhos de um elemento.<\/strong> Essa cole\u00e7\u00e3o cont\u00e9m apenas os elementos, excluindo qualquer outro tipo de n\u00f3 que possa existir. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const parentElement = document.getElementById('parent');\n\nconst childrenElements = parentElement.children;<\/code><\/pre>\n\n\n\n<p><strong>Essas s\u00e3o algumas das formas essenciais para interagir com elementos HTML e navegar no DOM usando JavaScript.<\/strong> Ao dominar essas t\u00e9cnicas, voc\u00ea poder\u00e1 criar manipula\u00e7\u00f5es din\u00e2micas e complexas em suas p\u00e1ginas da web, tornando suas aplica\u00e7\u00f5es mais interativas e envolventes.<\/p>\n\n\n\n<p>Para a conveni\u00eancia de desenvolvimento, o c\u00f3digo possui apenas o necess\u00e1rio para o exemplo, a seguir algumas fun\u00e7\u00f5es que podem facilitar desenvolvimento futuro. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function retornarElementoPai(elemento) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return elemento.parentElement;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0function retornarTotalElementos(arvore) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let totalElementos = 1; \/\/ Conta o pr\u00f3prio n\u00f3 (raiz) da \u00e1rvore\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function contarRecursivamente(no) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (const filho of no.filhos) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0totalElementos++;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contarRecursivamente(filho);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contarRecursivamente(arvore);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return totalElementos;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0function retornarProfundidadeNo(elemento, profundidade = 0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (elemento.parentElement) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return retornarProfundidadeNo(elemento.parentElement, profundidade + 1);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return profundidade;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0function deletarElementoNo(elemento) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (elemento.parentElement) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0elemento.parentElement.removeChild(elemento);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}<\/code><\/pre>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ff6a0038\">Outros t\u00edtulos interessantes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/converter-de-elementor-para-editor-de-blocos-no-wordpress\/\">Como converter Blocos do Elementor para&nbsp;WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/como-descobrir-o-tema-wordpress-de-um-site\/\">Como Descobrir o Tema&nbsp;WordPress&nbsp;de um Site Usando HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/botao-do-whatsapp-no-wordpress\/\">Como criar um bot\u00e3o do WhatsApp na hospedagem&nbsp;WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/como-excluir-um-tema-no-wordpress\/\">Como Excluir um Tema no\u00a0WordPress<\/a><\/li>\n<\/ul>\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><strong>Aprenda agora a criar uma divis\u00e3o interativa com quadrantes que se dividem recursivamente, formando uma \u00e1rvore visualmente atrativa.<\/strong> Aplique cores distintas para cada n\u00edvel de profundidade na \u00e1rvore, gerando um gradiente mais intenso \u00e0 medida que avan\u00e7amos. Essa t\u00e9cnica, portanto, torna projetos mais din\u00e2micos e atraentes.<\/p>\n\n\n\n<p>Essa estrutura em \u00e1rvore \u00e9 valiosa para estudantes de Ci\u00eancia da Computa\u00e7\u00e3o. A abordagem recursiva utilizada para criar e manipular as divis\u00f5es \u00e9 especialmente relevante, pois \u00e9 um dos fundamentos essenciais no aprendizado da programa\u00e7\u00e3o.<\/p>\n\n\n\n<p><strong>A recursividade mostra como resolver problemas complexos de forma mais eficiente.<\/strong> Com essa t\u00e9cnica, os alunos aprimoram suas habilidades em pensamento l\u00f3gico, assim, entendem melhor a estrutura\u00e7\u00e3o de problemas e aprendem a dividir tarefas maiores em etapas menores e mais gerenci\u00e1veis.<\/p>\n\n\n\n<p>Portanto, esse exemplo pr\u00e1tico de cria\u00e7\u00e3o de uma divis\u00e3o interativa com Flex e \u00c1rvore em JavaScript oferece uma experi\u00eancia envolvente no desenvolvimento web, ao mesmo tempo que promove a compreens\u00e3o dos conceitos essenciais da Ci\u00eancia da Computa\u00e7\u00e3o.<\/p>\n\n\n\n<p>Aprenda mais sobre JavaScript lendo outros de nossos artigos, por exemplo: <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/formulario-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">Formul\u00e1rio HTML: criando forms HTML e enviando dados<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea j\u00e1 se perguntou como desenvolver uma interface interativa e visualmente envolvente usando JavaScript, este tutorial trar\u00e1 exemplos disso focado no uso do Print div JavaScript. Neste artigo, exploraremos passo a passo de como criar, modificar e concatenar elementos div dinamicamente em sua p\u00e1gina da web, oferecendo uma experi\u00eancia interativa e \u00fanica aos seus [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":10426,"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-10418","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>Print Div JavaScript: como usar e quais as funcionalidades | Homehost<\/title>\n<meta name=\"description\" content=\"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.\" \/>\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\/print-div-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Print Div JavaScript: como usar e quais as funcionalidades | Homehost\" \/>\n<meta property=\"og:description\" content=\"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-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-08-06T12:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-02T14:06:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\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\/print-div-javascript\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/\",\"name\":\"Print Div JavaScript: como usar e quais as funcionalidades | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png\",\"datePublished\":\"2023-08-06T12:43:25+00:00\",\"dateModified\":\"2024-05-02T14:06:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"description\":\"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png\",\"width\":1260,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Print Div JavaScript: como usar e quais as funcionalidades\"}]},{\"@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":"Print Div JavaScript: como usar e quais as funcionalidades | Homehost","description":"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.","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\/print-div-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"Print Div JavaScript: como usar e quais as funcionalidades | Homehost","og_description":"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.","og_url":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-08-06T12:43:25+00:00","article_modified_time":"2024-05-02T14:06:24+00:00","og_image":[{"width":1260,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-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\/print-div-javascript\/","url":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/","name":"Print Div JavaScript: como usar e quais as funcionalidades | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png","datePublished":"2023-08-06T12:43:25+00:00","dateModified":"2024-05-02T14:06:24+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"description":"Aprenda a modificar dinamicamente os elementos HTML usando Print div JavaScript nesse artigo e melhore a experi\u00eancia visual do usu\u00e1rio.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png","width":1260,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Print Div JavaScript: como usar e quais as funcionalidades"}]},{"@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":"Daiana S","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/print-div-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10418","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=10418"}],"version-history":[{"count":6,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10418\/revisions"}],"predecessor-version":[{"id":14010,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10418\/revisions\/14010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/10426"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=10418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=10418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=10418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}