{"id":5805,"date":"2021-11-24T12:27:20","date_gmt":"2021-11-24T15:27:20","guid":{"rendered":"https:\/\/fcnuvem.com.br\/home\/?p=1437"},"modified":"2022-12-05T11:57:01","modified_gmt":"2022-12-05T14:57:01","slug":"blog-primeiros-passos-para-manipular-html-dom-em-javascript","status":"publish","type":"post","link":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/","title":{"rendered":"Primeiros Passos para manipular HTML DOM em JavaScript"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"205\" src=\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Blog-FCnuvem-HtmlDom-JS.png\" alt=\"\" class=\"wp-image-1445\" srcset=\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Blog-FCnuvem-HtmlDom-JS.png 730w, https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Blog-FCnuvem-HtmlDom-JS-300x84.png 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><figcaption><sub><strong>Autor:<\/strong>\u00a0Francis Rodrigues\u00a0Batista<\/sub><\/figcaption><\/figure>\n\n\n\n<p>Quando&nbsp;uma&nbsp;p\u00e1gina&nbsp;web \u00e9&nbsp;carregada, o&nbsp;navegador&nbsp;cria&nbsp;um DOM \u2013 Document Object Model, \u00e9 um&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;que&nbsp;permite&nbsp;o&nbsp;acesso&nbsp;e&nbsp;manipula\u00e7\u00e3o&nbsp;ao&nbsp;HTML,&nbsp;assim&nbsp;JavaScript&nbsp;pode&nbsp;acessar&nbsp;e&nbsp;alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;de um&nbsp;documento&nbsp;HTML.&nbsp;<\/p>\n\n\n\n<p>O&nbsp;modelo&nbsp;<strong>HTML DOM<\/strong>&nbsp;\u00e9&nbsp;constru\u00eddo&nbsp;como&nbsp;uma&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/c1h-word-edit-15.cdn.office.net\/we\/s\/hA3596C17DAD9A003_resources\/1046\/progress.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><sup>A&nbsp;<\/sup><sup>\u00e1rvore<\/sup><sup>&nbsp;de&nbsp;<\/sup><sup>objetos<\/sup><sup>&nbsp;DOM do HTML \/ W3Schools<\/sup>&nbsp;<\/p>\n\n\n\n<p>Com o&nbsp;modelo&nbsp;de&nbsp;objeto, o JavaScript&nbsp;obt\u00e9m&nbsp;todo&nbsp;o&nbsp;poder&nbsp;necess\u00e1rio&nbsp;para:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Criar&nbsp;elementos&nbsp;HTM&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp;<\/li><li>Alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp;<\/li><li>Remover&nbsp;elementos&nbsp;HTML&nbsp;existentes&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Alterar&nbsp;todos&nbsp;os&nbsp;atributos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp;<\/li><li>Alterar&nbsp;todos&nbsp;os&nbsp;estilos&nbsp;CSS&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp;<\/li><li>Reagir&nbsp;a&nbsp;todos&nbsp;os&nbsp;eventos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina.&nbsp;<\/li><\/ul>\n\n\n\n<p><strong>Entenda&nbsp;o que \u00e9 o DOM<\/strong>&nbsp;<\/p>\n\n\n\n<p>DOM \u00e9 um&nbsp;padr\u00e3o&nbsp;W3C (World Wide Web Consortium). O DOM define um&nbsp;padr\u00e3o&nbsp;para&nbsp;acessar&nbsp;documentos:&nbsp;<\/p>\n\n\n\n<p>O&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;do W3C (DOM) \u00e9&nbsp;uma&nbsp;plataforma&nbsp;e interface de&nbsp;linguagem&nbsp;neutra&nbsp;que&nbsp;permite&nbsp;que&nbsp;programas&nbsp;e scripts&nbsp;acessem&nbsp;e&nbsp;atualizem&nbsp;dinamicamente&nbsp;o&nbsp;conte\u00fado,&nbsp;estrutura, e&nbsp;estilo&nbsp;de um document, o W3C&nbsp;<\/p>\n\n\n\n<p>O&nbsp;padr\u00e3o&nbsp;W3C DOM \u00e9&nbsp;separado&nbsp;em&nbsp;3&nbsp;partes&nbsp;diferentes:&nbsp;<\/p>\n\n\n\n<p>&#8211; DOM Principal:&nbsp;Modelo&nbsp;padr\u00e3o&nbsp;para&nbsp;todos&nbsp;os&nbsp;tipos&nbsp;de&nbsp;documentos;&nbsp;<\/p>\n\n\n\n<p>&#8211; DOM XML:&nbsp;Modelo&nbsp;padr\u00e3o&nbsp;para&nbsp;documentos&nbsp;XML;&nbsp;<\/p>\n\n\n\n<p>&#8211; DOM HTML:&nbsp;Modelo&nbsp;padr\u00e3o&nbsp;para&nbsp;documentos&nbsp;HTML.&nbsp;<\/p>\n\n\n\n<p><strong>Entenda&nbsp;o que \u00e9 o HTML DOM<\/strong>&nbsp;<\/p>\n\n\n\n<p>O DOM HTML \u00e9 um&nbsp;modelo&nbsp;de&nbsp;objeto&nbsp;padr\u00e3o&nbsp;e&nbsp;tamb\u00e9m&nbsp;interface de&nbsp;programa\u00e7\u00e3o&nbsp;para HTML. Define:&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;Elementos&nbsp;HTML&nbsp;como&nbsp;objetos&nbsp;(objects);&nbsp;<\/p>\n\n\n\n<p>&#8211; As&nbsp;propriedades&nbsp;(properties) de&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML;&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;Os&nbsp;m\u00e9todos&nbsp;(methods) para&nbsp;acessar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML;&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;Os&nbsp;eventos&nbsp;para&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML&nbsp;<\/p>\n\n\n\n<p>Em&nbsp;outras&nbsp;palavras: \u201c<em>O HTML DOM \u00e9 um&nbsp;padr\u00e3o&nbsp;para&nbsp;obter,&nbsp;alterar,&nbsp;adicionar&nbsp;ou&nbsp;deletar&nbsp;elementos&nbsp;HTML<\/em>\u201d. \u2013 W3C Schools&nbsp;<\/p>\n\n\n\n<p><strong>A&nbsp;Interface de&nbsp;Programa\u00e7\u00e3o&nbsp;DOM<\/strong>&nbsp;<\/p>\n\n\n\n<p>Todos&nbsp;os&nbsp;elementos&nbsp;HTML no DOM&nbsp;s\u00e3o&nbsp;definidos&nbsp;como&nbsp;objetos,&nbsp;a&nbsp;interface de&nbsp;programa\u00e7\u00e3o&nbsp;\u00e9&nbsp;composta&nbsp;pelas&nbsp;propriedades&nbsp;e&nbsp;m\u00e9todos&nbsp;de&nbsp;cada&nbsp;objeto.&nbsp;<\/p>\n\n\n\n<p>A&nbsp;propriedade&nbsp;\u00e9 um valor&nbsp;obtido&nbsp;(get)&nbsp;ou&nbsp;definido&nbsp;(set),&nbsp;como&nbsp;alterar&nbsp;o&nbsp;conte\u00fado&nbsp;de um&nbsp;elemento&nbsp;HTML, o&nbsp;m\u00e9todo&nbsp;\u00e9&nbsp;uma&nbsp;a\u00e7\u00e3o&nbsp;que&nbsp;voc\u00ea&nbsp;pode&nbsp;fazer,&nbsp;como&nbsp;adicionar&nbsp;ou&nbsp;deletar&nbsp;um&nbsp;elemento&nbsp;HTML.&nbsp;<\/p>\n\n\n\n<p>Vejamos&nbsp;um&nbsp;exemplo,&nbsp;onde&nbsp;alteramos&nbsp;o&nbsp;conte\u00fado&nbsp;interno&nbsp;do&nbsp;elemento&nbsp;&lt;div&gt;&nbsp;de&nbsp;&nbsp;id=\u201dcontent\u201d:&nbsp;<\/p>\n\n\n\n<p>&lt;div id=&#8221;content&#8221;&gt;&lt;\/div&gt;&nbsp;<br>&nbsp;<br>&lt;script&gt;&nbsp;<br>&nbsp;&nbsp;document.getElementById(&#8220;content&#8221;).innerHTML=&#8221;Ol\u00e1,&nbsp;como&nbsp;vai?&#8221;;&nbsp;<br>&lt;\/script&gt;&nbsp;<\/p>\n\n\n\n<p>O&nbsp;m\u00e9todo&nbsp;getElementById&nbsp;acessa&nbsp;um&nbsp;elemento&nbsp;HTML&nbsp;por&nbsp;sua&nbsp;id e a&nbsp;propriedade&nbsp;innerHTML&nbsp;obt\u00e9m&nbsp;o&nbsp;conte\u00fado&nbsp;de um&nbsp;elemento. No&nbsp;nosso&nbsp;caso,&nbsp;substitu\u00edmos&nbsp;o&nbsp;conte\u00fado&nbsp;\u201cvazio\u201d&nbsp;por&nbsp;nossa&nbsp;sauda\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<p><strong>HTML DOM Document<\/strong>&nbsp;<\/p>\n\n\n\n<p>O&nbsp;objeto&nbsp;de&nbsp;documento&nbsp;HTML DOM \u00e9 o&nbsp;propriet\u00e1rio&nbsp;de&nbsp;todos&nbsp;os&nbsp;outros&nbsp;objetos&nbsp;em&nbsp;sua&nbsp;p\u00e1gina&nbsp;web, se&nbsp;voc\u00ea&nbsp;deseja&nbsp;acessar&nbsp;qualquer&nbsp;elemento&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina,&nbsp;comece&nbsp;acessando&nbsp;o&nbsp;objeto&nbsp;<em>document<\/em>.&nbsp;<\/p>\n\n\n\n<p>Vejamos&nbsp;alguns&nbsp;exemplos&nbsp;de&nbsp;como&nbsp;utilizar&nbsp;o&nbsp;objeto&nbsp;<em>document<\/em>&nbsp;para&nbsp;acessar&nbsp;e&nbsp;manipular&nbsp;HTML:&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;<strong>M\u00e9todo<\/strong>&nbsp;<em>document.getElementById(id)<\/em>&nbsp;:&nbsp;Encontra&nbsp;um&nbsp;elemento&nbsp;pelo&nbsp;id&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;<strong>M\u00e9todo<\/strong>&nbsp;<em>document.getElementByTagName(name)<\/em>&nbsp;:&nbsp;Encontra&nbsp;elementos&nbsp;pela tag HTML&nbsp;<\/p>\n\n\n\n<p>&#8211;&nbsp;<strong>M\u00e9todo<\/strong>&nbsp;<em>document.getElementByClassName(name)<\/em>&nbsp;:&nbsp;Encontra&nbsp;elementos&nbsp;pela&nbsp;classe&nbsp;html&nbsp;<\/p>\n\n\n\n<p>Ap\u00f3s&nbsp;acessar&nbsp;o&nbsp;elemento,&nbsp;temos&nbsp;a&nbsp;op\u00e7\u00e3o&nbsp;de&nbsp;alter\u00e1-lo da&nbsp;seguinte&nbsp;forma:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Propriedade&nbsp;<em>element.innerHTML=\u201dnovo&nbsp;conte\u00fado\u201d<\/em>&nbsp;: Altera o&nbsp;conte\u00fado&nbsp;interno&nbsp;de um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>Propriedade&nbsp;<em>element.attribute=\u201dnovo valor\u201d<\/em>&nbsp;: Altera&nbsp;o&nbsp;valor do&nbsp;atributo&nbsp;de um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Propriedade&nbsp;<em>element.style.property=\u201dnovo&nbsp;estilo\u201d<\/em>&nbsp;: Altera o&nbsp;estilo&nbsp;de um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>M\u00e9todo&nbsp;<em>element.setAttribute(attribute, value)<\/em>&nbsp;: Altera&nbsp;o&nbsp;valor do&nbsp;atributo&nbsp;de um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><\/ul>\n\n\n\n<p>Tamb\u00e9m&nbsp;podemos&nbsp;adicionar&nbsp;e&nbsp;deletar&nbsp;elementos&nbsp;da&nbsp;p\u00e1gina&nbsp;da&nbsp;seguinte&nbsp;forma:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>M\u00e9todo&nbsp;<em>document.createElement(element)<\/em>&nbsp;:&nbsp;Cria&nbsp;um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>M\u00e9todo&nbsp;<em>document.removeChild(element)<\/em>&nbsp;: Remove um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>M\u00e9todo&nbsp;<em>document.appendChild(element)<\/em>&nbsp;:&nbsp;Adiciona&nbsp;um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>M\u00e9todo&nbsp;<em>document.replaceChild(new, old)<\/em>&nbsp;:&nbsp;Substitui&nbsp;um&nbsp;elemento&nbsp;HTML&nbsp;<\/li><li>M\u00e9doto&nbsp;<em>document.write(text)<\/em>&nbsp;:&nbsp;Escreve&nbsp;no&nbsp;fluxo&nbsp;de&nbsp;sa\u00edda&nbsp;HTML&nbsp;<\/li><\/ul>\n\n\n\n<p>Outra&nbsp;possibilidade, \u00e9&nbsp;manipular&nbsp;eventos&nbsp;sobre&nbsp;determinadas&nbsp;a\u00e7\u00f5es,&nbsp;vejamos:&nbsp;<\/p>\n\n\n\n<p>M\u00e9todo&nbsp;<em>document.getElementById(id).onclick=function() { \u2026. }<\/em>:&nbsp;Adicionando&nbsp;o&nbsp;c\u00f3digo&nbsp;do&nbsp;manipulador&nbsp;de&nbsp;eventos&nbsp;a um&nbsp;evento&nbsp;<em>onclick<\/em>.&nbsp;<\/p>\n\n\n\n<p><strong>Conclus\u00e3o<\/strong>&nbsp;<\/p>\n\n\n\n<p>Agora que&nbsp;voc\u00ea&nbsp;foi&nbsp;apresentado&nbsp;aos&nbsp;primeiros&nbsp;passos&nbsp;de&nbsp;manipula\u00e7\u00e3o&nbsp;do HTML DOM com JavaScript,&nbsp;voc\u00ea&nbsp;\u00e9&nbsp;capaz&nbsp;de&nbsp;compor&nbsp;conte\u00fado&nbsp;e&nbsp;estilo&nbsp;de&nbsp;suas&nbsp;p\u00e1ginas&nbsp;HTML de forma&nbsp;din\u00e2mica, no&nbsp;entanto,&nbsp;existem&nbsp;maneiras&nbsp;mais&nbsp;otimizadas&nbsp;e&nbsp;profissionais&nbsp;de se&nbsp;trabalhar&nbsp;com JavaScript e&nbsp;seus&nbsp;eventos&nbsp;no DOM.&nbsp;<\/p>\n\n\n\n<p>Como&nbsp;primeira&nbsp;experi\u00eancia&nbsp;de&nbsp;aprendizagem,&nbsp;recomendo&nbsp;praticar&nbsp;a&nbsp;utiliza\u00e7\u00e3o&nbsp;de&nbsp;propriedades&nbsp;e&nbsp;seus&nbsp;m\u00e9todos,&nbsp;listeners&nbsp;e&nbsp;eventos, a&nbsp;fim&nbsp;de&nbsp;conhecer&nbsp;a&nbsp;utiliza\u00e7\u00e3o&nbsp;dos&nbsp;mesmos&nbsp;em&nbsp;aplica\u00e7\u00f5es&nbsp;para web.&nbsp;<\/p>\n\n\n\n<p><strong>Refer\u00eancias<\/strong>&nbsp;<\/p>\n\n\n\n<p>&nbsp;W3Schools &#8211;&nbsp;JavaScript HTML DOM:&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/js\/js_htmldom.asp<\/a>&nbsp;<\/p>\n\n\n\n<p>&nbsp;W3C DOM 4.1:&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/2018\/WD-dom41-20180201\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3.org\/TR\/2018\/WD-dom41-20180201\/<\/a>&nbsp;<\/p>\n\n\n\n<p>&nbsp;W3Schools \u2013-JavaScript HTML DOM Methods:&nbsp;<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_document.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/js\/js_htmldom_document.asp<\/a>&nbsp;<\/p>\n\n\n\n<p>W3Schools &#8211;&nbsp;Javascript&nbsp;HTML DOM Elements:&nbsp;<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_elements.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/js\/js_htmldom_elements.asp<\/a>&nbsp;<\/p>\n\n\n\n<p>W3Schools &#8211;&nbsp;JavaScript HTML DOM Events:&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_events.asp\">https:\/\/www.w3schools.com\/js\/js_htmldom_events.asp<\/a><\/p>\n\n\n\n<p>W3Schools &#8211;&nbsp;JavaScript HTML DOM&nbsp;EventListener:&nbsp;<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_eventlistener.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/js\/js_htmldom_eventlistener.asp<\/a>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando&nbsp;uma&nbsp;p\u00e1gina&nbsp;web \u00e9&nbsp;carregada, o&nbsp;navegador&nbsp;cria&nbsp;um DOM \u2013 Document Object Model, \u00e9 um&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;que&nbsp;permite&nbsp;o&nbsp;acesso&nbsp;e&nbsp;manipula\u00e7\u00e3o&nbsp;ao&nbsp;HTML,&nbsp;assim&nbsp;JavaScript&nbsp;pode&nbsp;acessar&nbsp;e&nbsp;alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;de um&nbsp;documento&nbsp;HTML.&nbsp; O&nbsp;modelo&nbsp;HTML DOM&nbsp;\u00e9&nbsp;constru\u00eddo&nbsp;como&nbsp;uma&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos:&nbsp; A&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos&nbsp;DOM do HTML \/ W3Schools&nbsp; Com o&nbsp;modelo&nbsp;de&nbsp;objeto, o JavaScript&nbsp;obt\u00e9m&nbsp;todo&nbsp;o&nbsp;poder&nbsp;necess\u00e1rio&nbsp;para:&nbsp; Criar&nbsp;elementos&nbsp;HTM&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Remover&nbsp;elementos&nbsp;HTML&nbsp;existentes&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;atributos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;estilos&nbsp;CSS&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Reagir&nbsp;a&nbsp;todos&nbsp;os&nbsp;eventos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina.&nbsp; Entenda&nbsp;o que \u00e9 o DOM&nbsp; DOM \u00e9 um&nbsp;padr\u00e3o&nbsp;W3C (World Wide Web Consortium). O DOM define um&nbsp;padr\u00e3o&nbsp;para&nbsp;acessar&nbsp;documentos:&nbsp; O&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;do W3C (DOM) \u00e9&nbsp;uma&nbsp;plataforma&nbsp;e interface de&nbsp;linguagem&nbsp;neutra&nbsp;que&nbsp;permite&nbsp;que&nbsp;programas&nbsp;e scripts&nbsp;acessem&nbsp;e&nbsp;atualizem&nbsp;dinamicamente&nbsp;o&nbsp;conte\u00fado,&nbsp;estrutura, e&nbsp;estilo&nbsp;de um document, o&hellip;<\/p>\n","protected":false},"author":8,"featured_media":1497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94],"tags":[381,382],"post_series":[],"class_list":["post-5805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-html-dom","tag-java-script","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara\" \/>\n<meta property=\"og:description\" content=\"Quando&nbsp;uma&nbsp;p\u00e1gina&nbsp;web \u00e9&nbsp;carregada, o&nbsp;navegador&nbsp;cria&nbsp;um DOM \u2013 Document Object Model, \u00e9 um&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;que&nbsp;permite&nbsp;o&nbsp;acesso&nbsp;e&nbsp;manipula\u00e7\u00e3o&nbsp;ao&nbsp;HTML,&nbsp;assim&nbsp;JavaScript&nbsp;pode&nbsp;acessar&nbsp;e&nbsp;alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;de um&nbsp;documento&nbsp;HTML.&nbsp; O&nbsp;modelo&nbsp;HTML DOM&nbsp;\u00e9&nbsp;constru\u00eddo&nbsp;como&nbsp;uma&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos:&nbsp; A&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos&nbsp;DOM do HTML \/ W3Schools&nbsp; Com o&nbsp;modelo&nbsp;de&nbsp;objeto, o JavaScript&nbsp;obt\u00e9m&nbsp;todo&nbsp;o&nbsp;poder&nbsp;necess\u00e1rio&nbsp;para:&nbsp; Criar&nbsp;elementos&nbsp;HTM&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Remover&nbsp;elementos&nbsp;HTML&nbsp;existentes&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;atributos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;estilos&nbsp;CSS&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Reagir&nbsp;a&nbsp;todos&nbsp;os&nbsp;eventos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina.&nbsp; Entenda&nbsp;o que \u00e9 o DOM&nbsp; DOM \u00e9 um&nbsp;padr\u00e3o&nbsp;W3C (World Wide Web Consortium). O DOM define um&nbsp;padr\u00e3o&nbsp;para&nbsp;acessar&nbsp;documentos:&nbsp; O&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;do W3C (DOM) \u00e9&nbsp;uma&nbsp;plataforma&nbsp;e interface de&nbsp;linguagem&nbsp;neutra&nbsp;que&nbsp;permite&nbsp;que&nbsp;programas&nbsp;e scripts&nbsp;acessem&nbsp;e&nbsp;atualizem&nbsp;dinamicamente&nbsp;o&nbsp;conte\u00fado,&nbsp;estrutura, e&nbsp;estilo&nbsp;de um document, o&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog da FCamara\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-24T15:27:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-05T14:57:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"260\" \/>\n\t<meta property=\"og:image:height\" content=\"205\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"fcnuvem\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"fcnuvem\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\"},\"author\":{\"name\":\"fcnuvem\",\"@id\":\"https:\/\/fcamara.com\/blog\/#\/schema\/person\/62d48659a26297896002e2434a44e28a\"},\"headline\":\"Primeiros Passos para manipular HTML DOM em JavaScript\",\"datePublished\":\"2021-11-24T15:27:20+00:00\",\"dateModified\":\"2022-12-05T14:57:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\"},\"wordCount\":1484,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fcamara.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png\",\"keywords\":[\"HTML DOM\",\"JAVA SCRIPT\"],\"articleSection\":[\"Tutoriais\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\",\"url\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\",\"name\":\"Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara\",\"isPartOf\":{\"@id\":\"https:\/\/fcamara.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png\",\"datePublished\":\"2021-11-24T15:27:20+00:00\",\"dateModified\":\"2022-12-05T14:57:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage\",\"url\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png\",\"contentUrl\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png\",\"width\":260,\"height\":205},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/fcamara.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"aplicativo mobile\",\"item\":\"https:\/\/fcamara.com\/blog\/tags\/aplicativo-mobile\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Primeiros Passos para manipular HTML DOM em JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fcamara.com\/blog\/#website\",\"url\":\"https:\/\/fcamara.com\/blog\/\",\"name\":\"Blog da FCamara\",\"description\":\"Esta \u00e9 a \u00e1rea de insights sobre o mercado de tecnologia.\",\"publisher\":{\"@id\":\"https:\/\/fcamara.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fcamara.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fcamara.com\/blog\/#organization\",\"name\":\"Blog da FCamara\",\"url\":\"https:\/\/fcamara.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fcamara.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2024\/07\/FCamara-Blog-laranja.webp\",\"contentUrl\":\"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2024\/07\/FCamara-Blog-laranja.webp\",\"width\":459,\"height\":68,\"caption\":\"Blog da FCamara\"},\"image\":{\"@id\":\"https:\/\/fcamara.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fcamara.com\/blog\/#\/schema\/person\/62d48659a26297896002e2434a44e28a\",\"name\":\"fcnuvem\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"fcnuvem\"},\"url\":\"https:\/\/fcamara.com\/blog\/author\/fcnuvem\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara","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:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara","og_description":"Quando&nbsp;uma&nbsp;p\u00e1gina&nbsp;web \u00e9&nbsp;carregada, o&nbsp;navegador&nbsp;cria&nbsp;um DOM \u2013 Document Object Model, \u00e9 um&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;que&nbsp;permite&nbsp;o&nbsp;acesso&nbsp;e&nbsp;manipula\u00e7\u00e3o&nbsp;ao&nbsp;HTML,&nbsp;assim&nbsp;JavaScript&nbsp;pode&nbsp;acessar&nbsp;e&nbsp;alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;de um&nbsp;documento&nbsp;HTML.&nbsp; O&nbsp;modelo&nbsp;HTML DOM&nbsp;\u00e9&nbsp;constru\u00eddo&nbsp;como&nbsp;uma&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos:&nbsp; A&nbsp;\u00e1rvore&nbsp;de&nbsp;objetos&nbsp;DOM do HTML \/ W3Schools&nbsp; Com o&nbsp;modelo&nbsp;de&nbsp;objeto, o JavaScript&nbsp;obt\u00e9m&nbsp;todo&nbsp;o&nbsp;poder&nbsp;necess\u00e1rio&nbsp;para:&nbsp; Criar&nbsp;elementos&nbsp;HTM&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;elementos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Remover&nbsp;elementos&nbsp;HTML&nbsp;existentes&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;atributos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Alterar&nbsp;todos&nbsp;os&nbsp;estilos&nbsp;CSS&nbsp;em&nbsp;uma&nbsp;p\u00e1gina;&nbsp; Reagir&nbsp;a&nbsp;todos&nbsp;os&nbsp;eventos&nbsp;HTML&nbsp;em&nbsp;uma&nbsp;p\u00e1gina.&nbsp; Entenda&nbsp;o que \u00e9 o DOM&nbsp; DOM \u00e9 um&nbsp;padr\u00e3o&nbsp;W3C (World Wide Web Consortium). O DOM define um&nbsp;padr\u00e3o&nbsp;para&nbsp;acessar&nbsp;documentos:&nbsp; O&nbsp;Modelo&nbsp;de&nbsp;Objeto&nbsp;de&nbsp;Documento&nbsp;do W3C (DOM) \u00e9&nbsp;uma&nbsp;plataforma&nbsp;e interface de&nbsp;linguagem&nbsp;neutra&nbsp;que&nbsp;permite&nbsp;que&nbsp;programas&nbsp;e scripts&nbsp;acessem&nbsp;e&nbsp;atualizem&nbsp;dinamicamente&nbsp;o&nbsp;conte\u00fado,&nbsp;estrutura, e&nbsp;estilo&nbsp;de um document, o&hellip;","og_url":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/","og_site_name":"Blog da FCamara","article_published_time":"2021-11-24T15:27:20+00:00","article_modified_time":"2022-12-05T14:57:01+00:00","og_image":[{"width":260,"height":205,"url":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png","type":"image\/png"}],"author":"fcnuvem","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"fcnuvem","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#article","isPartOf":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/"},"author":{"name":"fcnuvem","@id":"https:\/\/fcamara.com\/blog\/#\/schema\/person\/62d48659a26297896002e2434a44e28a"},"headline":"Primeiros Passos para manipular HTML DOM em JavaScript","datePublished":"2021-11-24T15:27:20+00:00","dateModified":"2022-12-05T14:57:01+00:00","mainEntityOfPage":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/"},"wordCount":1484,"commentCount":0,"publisher":{"@id":"https:\/\/fcamara.com\/blog\/#organization"},"image":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png","keywords":["HTML DOM","JAVA SCRIPT"],"articleSection":["Tutoriais"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/","url":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/","name":"Primeiros Passos para manipular HTML DOM em JavaScript - Blog da FCamara","isPartOf":{"@id":"https:\/\/fcamara.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage"},"image":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png","datePublished":"2021-11-24T15:27:20+00:00","dateModified":"2022-12-05T14:57:01+00:00","breadcrumb":{"@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#primaryimage","url":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png","contentUrl":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2021\/11\/Thumb-FCnuvem-HtmlDom-JS.png","width":260,"height":205},{"@type":"BreadcrumbList","@id":"https:\/\/fcamara.com\/blog\/blog-primeiros-passos-para-manipular-html-dom-em-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/fcamara.com\/blog\/"},{"@type":"ListItem","position":2,"name":"aplicativo mobile","item":"https:\/\/fcamara.com\/blog\/tags\/aplicativo-mobile\/"},{"@type":"ListItem","position":3,"name":"Primeiros Passos para manipular HTML DOM em JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/fcamara.com\/blog\/#website","url":"https:\/\/fcamara.com\/blog\/","name":"Blog da FCamara","description":"Esta \u00e9 a \u00e1rea de insights sobre o mercado de tecnologia.","publisher":{"@id":"https:\/\/fcamara.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fcamara.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/fcamara.com\/blog\/#organization","name":"Blog da FCamara","url":"https:\/\/fcamara.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fcamara.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2024\/07\/FCamara-Blog-laranja.webp","contentUrl":"https:\/\/fcamara.com\/blog\/wp-content\/uploads\/2024\/07\/FCamara-Blog-laranja.webp","width":459,"height":68,"caption":"Blog da FCamara"},"image":{"@id":"https:\/\/fcamara.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fcamara.com\/blog\/#\/schema\/person\/62d48659a26297896002e2434a44e28a","name":"fcnuvem","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"fcnuvem"},"url":"https:\/\/fcamara.com\/blog\/author\/fcnuvem\/"}]}},"lang":"br","translations":{"br":5805},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/posts\/5805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/comments?post=5805"}],"version-history":[{"count":1,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/posts\/5805\/revisions"}],"predecessor-version":[{"id":6152,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/posts\/5805\/revisions\/6152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/media\/1497"}],"wp:attachment":[{"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/media?parent=5805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/categories?post=5805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/tags?post=5805"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/fcamara.com\/blog\/wp-json\/wp\/v2\/post_series?post=5805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}