{"componentChunkName":"component---node-modules-gatsby-theme-chronoblog-src-templates-post-js","path":"/dom-not-doom/","result":{"data":{"mdx":{"id":"ce57d9e5-4f66-5301-9c9e-22f52a325d4c","excerpt":"Faaaaaala, meus compilados!! Tudo suave com vocês? O assunto de hoje é pra desmistificar um pouco sobre o  DOM  e deixar algumas referências…","frontmatter":{"title":"DOMinando o DOM","date":"2020-02-016","description":"Perdoem o cover feito no paint, ainda amo vocês e vou continuar trazendo conteúdo bom. Acessa ai pra saber mais sobre DOM, HTML DOM e mais umas paradinhas.","tags":["post","dom"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAKABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAwUH/8QAFgEBAQEAAAAAAAAAAAAAAAAABQQG/9oADAMBAAIQAxAAAAFanjjw+23yCNX/xAAbEAACAwADAAAAAAAAAAAAAAABAwIEBQAVM//aAAgBAQABBQLK6IYWtRyGydnpTOv4QkePALP/xAAcEQACAQUBAAAAAAAAAAAAAAABAgADBBITIUH/2gAIAQMBAT8Bp7FZTmTw+x7lkYrP/8QAGREAAgMBAAAAAAAAAAAAAAAAAREAAgMS/9oACAECAQE/AdKggoKVz6Dc/8QAIRAAAAYCAQUAAAAAAAAAAAAAAAECAxEhBBIjMVFhgaH/2gAIAQEABj8CxzyjZTkra2PZxVH57X8DK8GYJHIglXt7EOOJ260HBM3Vg5KR/8QAHRAAAgICAwEAAAAAAAAAAAAAAREAITFRQWGRwf/aAAgBAQABPyFUNHFrVaLTtHiV2FiwWPkTIIDAAjpmFfzd+QlOuFriWEQDE//aAAwDAQACAAMAAAAQOz//xAAZEQADAQEBAAAAAAAAAAAAAAABETEAIVH/2gAIAQMBAT8QMoe4HgWCCseZAGit/8QAGhEBAAMAAwAAAAAAAAAAAAAAAQARIUFR8f/aAAgBAgEBPxAEJWaG8ePcQbdn/8QAHxABAQACAgEFAAAAAAAAAAAAAREAITFBUWGBkaHB/9oACAEBAAE/EOrTgpzdQRQcVLM36lMvALtywlp30r10BYUYFPX9oNuur8qEP244rtCVENXnNYAgGEGHuvzn/9k=","aspectRatio":2,"src":"/static/15381b24dde1298662601549f5f663f1/0c065/cover.jpg","srcSet":"/static/15381b24dde1298662601549f5f663f1/bc111/cover.jpg 192w,\n/static/15381b24dde1298662601549f5f663f1/809c8/cover.jpg 384w,\n/static/15381b24dde1298662601549f5f663f1/0c065/cover.jpg 768w,\n/static/15381b24dde1298662601549f5f663f1/b90bb/cover.jpg 800w","srcWebp":"/static/15381b24dde1298662601549f5f663f1/dd090/cover.webp","srcSetWebp":"/static/15381b24dde1298662601549f5f663f1/ae504/cover.webp 192w,\n/static/15381b24dde1298662601549f5f663f1/fef30/cover.webp 384w,\n/static/15381b24dde1298662601549f5f663f1/dd090/cover.webp 768w,\n/static/15381b24dde1298662601549f5f663f1/b0751/cover.webp 800w","sizes":"(max-width: 768px) 100vw, 768px","presentationWidth":768,"presentationHeight":384},"resize":{"src":"/static/15381b24dde1298662601549f5f663f1/0c065/cover.jpg"}}}},"fields":{"slug":"/dom-not-doom/"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"DOMinando o DOM\",\n  \"date\": \"2020-02-016\",\n  \"cover\": \"./img/cover.jpg\",\n  \"description\": \"Perdoem o cover feito no paint, ainda amo vocês e vou continuar trazendo conteúdo bom. Acessa ai pra saber mais sobre DOM, HTML DOM e mais umas paradinhas.\",\n  \"tags\": [\"post\", \"dom\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Faaaaaala, meus compilados!! Tudo suave com voc\\xEAs?\"), mdx(\"p\", null, \"O assunto de hoje \\xE9 pra desmistificar um pouco sobre o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" e deixar algumas refer\\xEAncias importantes para auxiliar no dia a dia. Tamb\\xE9m vamos focar na diferen\\xE7a entre \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" e a API \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \". Ent\\xE3o \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"simbora\"), \" pro conte\\xFAdo, hoje t\\xE1 mais curtinho.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"dom\"\n  }, \"./dom\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" (\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"aka\"), \" Document Object Model), ou \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Modelo de Objeto de Documento\"), \", \\xE9 a representa\\xE7\\xE3o dos objetos que comp\\xF5em a estrutura e conte\\xFAdo de um documento na web.\")), mdx(\"p\", null, \"Desenvolvedores web precisam estar bem familiarizados com esse termo e com as intera\\xE7\\xF5es que s\\xE3o poss\\xEDveis realizar. Afinal de contas, nosso trabalho \\xE9 justamente cuidar das informa\\xE7\\xF5es que est\\xE3o na web.\"), mdx(\"p\", null, \"A imagem abaixo \\xE9 uma representa\\xE7\\xE3o da \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"\\xE1rvore\"), \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" de uma p\\xE1gina qualquer na web. Talvez ela facilite o entendimento:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"83.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAARABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAUGBwQI/8QAGAEAAgMAAAAAAAAAAAAAAAAAAwUCBAf/2gAMAwEAAhADEAAAAfSELBc4XesKUPUumEknWcgurf/EAB4QAAEEAQUAAAAAAAAAAAAAAAQAAgMFAQYSFDM1/9oACAEBAAEFAjmyPipYXNGQAOx4RMlYAHfZ46196wXX/8QAIxEAAAQDCQAAAAAAAAAAAAAAAAECAwQRIQYiMjVxkbHB8P/aAAgBAwEBPwFuDeO5JE6V8nfsKgIhJmUhZnMU6K4D2Mx//8QAHREAAgIBBQAAAAAAAAAAAAAAAAIBETEDBBKB0f/aAAgBAgEBPwF9ppM3O5vv0qRck5P/xAApEAABAwIDBgcAAAAAAAAAAAADAQISABEEEBQFISJBcqETJDI0cYHC/9oACAEBAAY/Ai8TXBgshwkq96XTs0rJ72kCrb98tp+VVsxuT2kZb+ripQCAUBSEkjkwdk5cpU1DAxJCJ6neEjb/AFfLAdP6p3zX/8QAHhAAAgICAgMAAAAAAAAAAAAAAREhMQAQQWGBofD/2gAIAQEAAT8hWMUKtFgQvLgk9DQkAnxGmO+xulFvCHkGMgMQLP3eUwkEQum719vQz//aAAwDAQACAAMAAAAQWz89/8QAHREBAQABBAMAAAAAAAAAAAAAARExABAhYUFR8P/aAAgBAwEBPxCkkCMlBLhNAytPBpzlxyJHsseewetfI99l/8QAGhEAAgIDAAAAAAAAAAAAAAAAATEAIRBRYf/aAAgBAgEBPxAtHWsG1QcFZtk//8QAHRAAAgMAAgMAAAAAAAAAAAAAAREAITFRoUFxsf/aAAgBAQABPxChB5ZNJMOAK4dwMCAa8YmBJbkZVxjIURYUOw2uzYait/FbwwkkD1DKsINs7NzogiBpwweZ1fzO9l//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"dom-representation\",\n    \"title\": \"dom-representation\",\n    \"src\": \"/static/21876e291bd6770181e2412a2b126b19/224d9/dom.jpg\",\n    \"srcSet\": [\"/static/21876e291bd6770181e2412a2b126b19/68731/dom.jpg 205w\", \"/static/21876e291bd6770181e2412a2b126b19/a7bf1/dom.jpg 410w\", \"/static/21876e291bd6770181e2412a2b126b19/224d9/dom.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Compare a imagem com essa abaixo: \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"350px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGB//EABcBAQEBAQAAAAAAAAAAAAAAAAMFAgT/2gAMAwEAAhADEAAAAdzm+rzYnPVatYaDEMNpgx//xAAcEAACAgMBAQAAAAAAAAAAAAADBQIEAAEGFCP/2gAIAQEAAQUCf9XY9jRwIY+cc2WC1goomOooVAgASGhWS7ji+e5hh9M//8QAGxEAAgEFAAAAAAAAAAAAAAAAAQIAEBITITL/2gAIAQMBAT8Bws1xLQaEHJp//8QAGxEBAQACAwEAAAAAAAAAAAAAAQIAAwQQMqH/2gAIAQIBAT8Brjbq2Jd+vmSMyC4+zr//xAAkEAACAQIGAQUAAAAAAAAAAAABAgMAEQQSEyEiMUFRYWKR8f/aAAgBAQAGPwKeCBtKNDk2PdYVsLjJDKOTDVZrNt60JcRhpC+YjMFAzCpjpqDMObKvnff8ppdJS+oVF1Fwo6pRmA9qb4k+anuTye/Zok3+6//EAB8QAAICAgIDAQAAAAAAAAAAAAERACFBUTGBYXGxwf/aAAgBAQABPyGw1+ITBsvkXow+kkzEIhkyaiL1AQDKfXUfg4AScjEFH6is6QKrAscvf5HkArBSqZgsM+/OIJkH8TR3vcG2Z7HA3P/aAAwDAQACAAMAAAAQXxeA/8QAGxEBAAICAwAAAAAAAAAAAAAAAQAhEBFBcbH/2gAIAQMBAT8QDU1dl8QIC7nkx//EABwRAQACAQUAAAAAAAAAAAAAAAERIQAQMUFRof/aAAgBAgEBPxCQISRKQM1dbhk4ROe8fvp//8QAHBABAQADAQEBAQAAAAAAAAAAAREAITFBUWGh/9oACAEBAAE/EAJXdB6GJuCENH1wvaQvk5RBgR40xvGn9CWMaqhLgBtDWkAkY2q9J7gtfe2WhelXd1vQyAEqTsvIg+/M3Emq1NHgnXi+3H3EgbFoeindO+6JKCUxh/RL/c//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"genealogy-representation\",\n    \"title\": \"genealogy-representation\",\n    \"src\": \"/static/7b133361bba1a617ae907908191c1723/3870b/genealogy.jpg\",\n    \"srcSet\": [\"/static/7b133361bba1a617ae907908191c1723/68731/genealogy.jpg 205w\", \"/static/7b133361bba1a617ae907908191c1723/3870b/genealogy.jpg 350w\"],\n    \"sizes\": \"(max-width: 350px) 100vw, 350px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\\"Por que raios tem uma \\xE1rvore geneal\\xF3gica aqui no blog?\\\" \"), mdx(\"blockquote\", {\n    parentName: \"blockquote\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Amig\\xE3o, eu n\\xE3o fa\\xE7o ideia!\"))), mdx(\"p\", null, \"\\xC9 importante que voc\\xEA preste aten\\xE7\\xE3o e fa\\xE7a a rela\\xE7\\xE3o entre as duas imagens. Assim como em uma fam\\xEDlia existem os relacionamentos de pais, filhos, irm\\xE3os, primos, no \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" tamb\\xE9m temos esse relacionamento entre os elementos. N\\xE3o vamos falar disso agora, mas \\xE9 bom j\\xE1 ter isso em mente.\"), mdx(\"p\", null, \"Vale lembrar que n\\xE3o estamos abordando ESPECIFICAMENTE o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \" nem a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"API Javascript\"), \", e sim o contexto geral da interface.\"), mdx(\"p\", null, \"\\xC9 v\\xE1lido fazermos uma an\\xE1lise dessa imagem, degrau por degrau. A mentalidade de \\xE1rvore \\xE9 essencial para entender o fluxo que as informa\\xE7\\xF5es se conectam nos objetos.\"), mdx(\"h3\", {\n    \"id\": \"window\"\n  }, mdx(\"strong\", {\n    parentName: \"h3\"\n  }, \"Window\")), mdx(\"p\", null, \"Quando um navegador vai exibir um documento (uma p\\xE1gina HTML, por exemplo), essa p\\xE1gina \\xE9 \\\"baixada\\\" para a mem\\xF3ria local e \\xE9 exibida automaticamente na tela. Portanto, a brincadeira come\\xE7a j\\xE1 no nosso navegador e nesse modelo que \\xE9 salvo na mem\\xF3ria local.\"), mdx(\"p\", null, \"A partir do Window temos acesso a propriedades e m\\xE9todos espec\\xEDficos, dentre essas est\\xE3o as 3 que vamos citar abaixo. A lista \\xE9 muito maior do que podemos discutir...\"), mdx(\"p\", null, \"Em resumo, o topo da \\xE1rvore \\xE9 a janela aberta do nosso navegador.\"), mdx(\"h3\", {\n    \"id\": \"location-document-history-e-\"\n  }, mdx(\"strong\", {\n    parentName: \"h3\"\n  }, \"Location, Document, History e +...\")), mdx(\"p\", null, \"O andar de baixo da nossa \\xE1rvore, representa as propriedades que podemos acessar no nosso Window. Existem muito mais propriedades que apenas essas 3, mas s\\xE3o as que vamos citar nessa postagem (por causa da imagem de exemplo que achei kkk).\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://www.w3schools.com/jsref/obj_location.asp\"\n  }), \"Location\")), \": Um objeto que cont\\xE9m informa\\xE7\\xF5es sobre a URL em quest\\xE3o. Essas informa\\xE7\\xF5es podem ser \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"propriedades\"), \" (\", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"href\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"protocol\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"origin\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"host\"), \", etc..) ou \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"m\\xE9todos\"), \" ( \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"assign()\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"reload()\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"replace()\"), \" );\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://www.w3schools.com/jsref/obj_history.asp\"\n  }), \"History\")), \": Objeto que cont\\xE9m as URLs visitadas pelo usu\\xE1rio, desde que essas URLs tenham sido visitadas com o browser e em condi\\xE7\\xF5es normais de uso (sem guia fap-n\\xF4nima, por exemplo). Possui a \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"propriedade\"), \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"lenght\"), \" e os \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"m\\xE9todos\"), \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"back()\"), \", \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"forward()\"), \" e \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"go()\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://www.w3schools.com/jsref/dom_obj_document.asp\"\n  }), \"Document\")), \": Esse \\xE9 o cara que interessa a gente! \\xC9 a raiz do nosso HTML Document, repleto de propriedades e m\\xE9todos que trazem luz (e muitas trevas) para o desenvolvimento. Vamos falar um pouco mais sobre o \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"HTML DOM\"), \" logo logo..\")), mdx(\"h3\", {\n    \"id\": \"elements\"\n  }, mdx(\"strong\", {\n    parentName: \"h3\"\n  }, \"Elements\")), mdx(\"p\", null, \"Os \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Elements object\"), \", dentro do \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \" representam os elementos HTML (como um par\\xE1grafo, um t\\xEDtulo, uma tabela, um link, uma div, e qualquer outro elemento HTML).\"), mdx(\"p\", null, \"Resumindo tudo que vimos at\\xE9 agora:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" \\xE9 uma forma de representar os documentos na web em forma de objetos;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"O \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" tem sua raiz mais profunda chamada de \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Window\"), \", que representa a janela do navegador aberto;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cada \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"objeto\"), \" no \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" tem suas \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"propriedades\"), \" e \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"m\\xE9todos\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" !== \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"HTML DOM\"), \";\")), mdx(\"p\", null, \"Respire. Beba \\xE1gua.\"), mdx(\"p\", null, \"Excelente come\\xE7o para entrarmos de voadora no \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"mosh pit\"), \" do \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \".\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"html-dom\"\n  }, \"./html-dom\"), mdx(\"p\", null, \"Quando falamos em \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" no ambiente de trabalho, normalmente estamos fazendo refer\\xEAncia ao \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \" e todo seu ecossistema.\"), mdx(\"p\", null, \"Para refor\\xE7ar essa quantidade de termos e deixar os conhecimentos cada vez mais s\\xF3lidos:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" \\xE9 a \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"FORMA DE REPRESENTAR\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"O \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DOM\"), \" possui interfaces de implementa\\xE7\\xE3o, tais como Window, Element, Document, Node, e algumas outras que voc\\xEA vai descobrir acessando \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#DOM_interfaces\"\n  }), \"aqui\"), \" (adoro links com anchor);\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"HTML DOM\"), \" \\xE9 uma \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"API\"), \" que utiliza a implementa\\xE7\\xE3o da interface \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Document\"), \";\")), mdx(\"p\", null, \"Atrav\\xE9s desse \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \" que o JavaScript pode acessar, alterar, criar e remover (da p\\xE1gina HTML):\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Elementos;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Atributos;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS (estilo);\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Eventos;\")), mdx(\"p\", null, \"E n\\xE3o para por a\\xED...\"), mdx(\"p\", null, \"Os frameworks JavaScript (os \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"bons\"), \", pelo menos) tamb\\xE9m possuem seu pr\\xF3prio sistema DOM, independente ao navegador. Aqui cabem alguns conceitos como \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM\"\n  }), \"Shadow DOM\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/Matt-Esch/virtual-dom\"\n  }), \"Virtual DOM\"), \" e \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pt.stackoverflow.com/questions/43169/qual-%C3%A9-a-diferen%C3%A7a-entre-dom-e-virtual-dom\"\n  }), \"Diferen\\xE7a entre DOM e Virtual DOM\"), \". T\\xF4 deixando de brinde pra voc\\xEAs... mas n\\xE3o se limitem a eles, o contexto \\xE9 muito mais profundo.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"links-uteis\"\n  }, \"./links-uteis\"), mdx(\"p\", null, \"Antes de concluir a postagem, vou deixar uma lista com alguns links das documenta\\xE7\\xF5es.\"), mdx(\"p\", null, \"N\\xE3o se esque\\xE7am de baixar o DevDocs como aplica\\xE7\\xE3o desktop, ele quebra um galho gigantesco na hora de otimizar as buscas. Eu falo mais dele e de outras ferramentas \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pedro-mello.netlify.com/ambiente-dev/\"\n  }), \"nessa\"), \" postagem do blog.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\"\n  }), \"Document Object Model(DOM) - MDN web docs\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction\"\n  }), \"Introduction to the DOM - MDN web docs\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API\"\n  }), \"The HTML DOM API - MDN web docs\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.w3schools.com/whatis/whatis_htmldom.asp\"\n  }), \"What is the HTML DOM? - W3Schools\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.w3schools.com/js/js_htmldom.asp\"\n  }), \"JavaScript HTML DOM - W3Schools\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://devdocs.io/dom/\"\n  }), \"DOM - DevDocs\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://devdocs.io/dom_events/\"\n  }), \"DOM Events - DevDocs\"), \";\")), mdx(\"hr\", null), mdx(\"p\", null, \"E chegamos ao final de mais uma postagem nesse blog informativo e irreverente. Eu busquei passar pra voc\\xEAs uma vis\\xE3o geral sobre o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DOM\"), \" e puxei um gancho para a API do \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML DOM\"), \", que \\xE9 a forma que o JavaScript interage com nosso documento HTML.\"), mdx(\"p\", null, \"Obrigado, mais uma vez, por terem chego at\\xE9 aqui.\\nContinuem dando feedback e interagindo comigo. Quero trazer o que for melhor para todos.\"), mdx(\"p\", null, \"Grande abra\\xE7o, devs e !devs. Nos vemos daqui uns dias!!!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"ce57d9e5-4f66-5301-9c9e-22f52a325d4c"}}}