Quando se trata de desenvolvimento web com JavaScript, entender o Document Object Model (DOM) \u00e9 essencial. O DOM \u00e9 uma representa\u00e7\u00e3o hier\u00e1rquica dos elementos HTML em uma p\u00e1gina web, e permite que os desenvolvedores interajam e manipulem esses elementos dinamicamente usando JavaScript. Neste artigo, vamos explorar o que \u00e9 o DOM, como ele funciona e como os iniciantes podem come\u00e7ar a utiliz\u00e1-lo em seus projetos.<\/p>\n\n\n\n
O DOM \u00e9 uma interface de programa\u00e7\u00e3o que representa a estrutura de uma p\u00e1gina web como um conjunto de objetos que podem ser manipulados e modificados dinamicamente. Cada elemento HTML na p\u00e1gina, como tags Quando um navegador carrega uma p\u00e1gina web, ele cria uma representa\u00e7\u00e3o em mem\u00f3ria da estrutura HTML da p\u00e1gina, que \u00e9 o DOM. Esse modelo \u00e9 ent\u00e3o disponibilizado para manipula\u00e7\u00e3o atrav\u00e9s do JavaScript. Os desenvolvedores podem acessar, modificar, adicionar ou remover elementos do DOM usando m\u00e9todos e propriedades JavaScript.<\/p>\n\n\n\n Neste tutorial emocionante, exploraremos a magia do Document Object Model (DOM) e a eleg\u00e2ncia das arrow functions em JavaScript. <\/p>\n\n\n\n E a melhor parte? Disponibilizei o c\u00f3digo fonte para voc\u00eas conferirem e praticarem por conta pr\u00f3pria! <\/p>\n\n\n\n Confira o link abaixo para baixar o c\u00f3digo e aprofundar seus conhecimentos. <\/p>\n\n\n\n Vamos juntos transformar a teoria em pr\u00e1tica! <\/p>\n\n\n\n<div><\/code>, <p><\/code>, <h1><\/code>, entre outras, \u00e9 representado por um n\u00f3 (node) no DOM.<\/p>\n\n\n\nComo o DOM Funciona?<\/h2>\n\n\n\n
CSS<\/strong>\n\nimg{ width: 100%; border-radius: 15px;}\nbody{background-color: rgb(222, 232, 241);}\n\n.oculta{display: none;}\n\n.exibe-linha{ display: block;}<\/code><\/pre>\n\n\n\nJAVASCRIPT <\/strong>\n\nconst frm = document.querySelector('form');\nconst convenio = document.querySelector('#pConvenio');\n\nconst resp1 = document.querySelector('#outDesconto');\nconst resp2 = document.querySelector('#outPagar');\n\nfrm.addEventListener('submit', (e)=>{\n\ne.preventDefault();\n\nconst valor = Number(frm.inValor.value);\n\nlet desconto\n\nif(frm.rbSim.checked){\n\n if(frm.selConvenio.value == 'amigo'){\n desconto = calcularDesconto(valor, 20)\n } else{\n desconto = calcularDesconto(valor, 50)\n }\n\n}else{\n desconto = calcularDesconto(valor, 10)\n}\n\nresp1.innerText = `Desconto R$: ${desconto.toFixed(2)}`\nresp2.innerText = `A Pagar R$: ${(valor - desconto).toFixed(2)}`\n\n})\n\nconst calcularDesconto = (valor, taxa) => valor * (taxa\/100)\n\nfrm.rbSim.addEventListener('change',()=>{\n convenio.className ='exibe-linha'\n\n})\n\nfrm.rbNao.addEventListener('change',()=>{\n convenio.className ='oculta'\n\n})\n\n<\/code><\/pre>\n\n\n\nHTML\n<\/strong>\n<!DOCTYPE html>\n<html lang=\"pt-br\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"css\/estilo.css\"> \n <title>Mini Projeto Veterin\u00e1rio<\/title>\n<\/head>\n\n<body>\n <img src=\"img\/imagem.jpg\">\n <h1>Veterin\u00e1rio JS<\/h1>\n \n <form >\n <p> Valor da Vacina\n <input type=\"number\" id=\"inValor\" required autofocus>\n <\/p>\n <p>Possui Conv\u00eanio\n <input type=\"radio\" name=\"produto\" id=\"rbSim\"> Sim\n <input type=\"radio\" name=\"produto\" id=\"rbNao\" checked> N\u00e3o\n <\/p>\n <p class=\"oculta\" id=\"pConvenio\"> Conv\u00eanio:\n <select id=\"selConvenio\">\n <option value=\"amigo\">Amigo<\/option>\n <option value=\"saude\">Sa\u00fade Animal<\/option>\n <\/select> \n <\/p>\n\n <input type=\"submit\" value=\"Calcular Desconto\">\n <\/form>\n\n <h3 id=\"outDesconto\"><\/h3>\n <h3 id=\"outPagar\"><\/h3>\n\n <script src=\"js\/script.js\"><\/script>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n