{"id":48741,"date":"2024-04-15T09:48:43","date_gmt":"2024-04-15T12:48:43","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=48741"},"modified":"2024-09-05T13:53:23","modified_gmt":"2024-09-05T16:53:23","slug":"dom-javascript","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/dom-javascript\/","title":{"rendered":"DOM em JavaScript: o que \u00e9 e como trabalhar"},"content":{"rendered":"\n

Entenda o que \u00e9 DOM e como esse recurso est\u00e1 diretamente relacionado com o processo de desenvolvimento de sites. <\/em><\/p>\n\n\n\n

A navega\u00e7\u00e3o na web esconde diversos segredos em suas linhas de c\u00f3digos. Um deles \u00e9 o DOM<\/strong>, que \u00e9 utilizado pelo navegador para representar uma p\u00e1gina. <\/p>\n\n\n\n

O DOM \u00e9 uma alternativa mais vi\u00e1vel para pessoas programadoras, j\u00e1 que, com uso do JavaScript<\/a>, \u00e9 poss\u00edvel realizar tarefas de uma maneira mais simples que com HTML ou CSS<\/strong>. <\/p>\n\n\n\n

Caso nunca tenha ouvido falar sobre DOM, vamos apresentar o seu conceito, a rela\u00e7\u00e3o com o JavaScript, benef\u00edcios e muito mais. Confira! <\/p>\n\n\n\n

O que \u00e9 DOM?<\/strong> <\/h2>\n\n\n\n

DOM \u00e9 uma sigla para o termo em ingl\u00eas Document Object Model. Em portugu\u00eas, \u00e9 a defini\u00e7\u00e3o para Modelo de Documento por Objetos.  <\/p>\n\n\n\n

Ou seja: uma interface de programa\u00e7\u00e3o utilizada pelos navegadores para representar as p\u00e1ginas que encontramos na rede<\/strong>. <\/p>\n\n\n\n

Por padr\u00e3o, o DOM oferece uma representa\u00e7\u00e3o estruturada para documentos HTML, XML e SVG. <\/p>\n\n\n\n

Al\u00e9m disso, ele define m\u00e9todos que v\u00e3o permitir acesso aos dados dispostos em um formato de \u00e1rvore<\/strong> e altera estrutura, estilo e conte\u00fado presentes no documento. <\/p>\n\n\n\n

Dessa forma, podemos definir como DOM JavaScript o sistema que permite manipular e modificar elementos de um documento web.  <\/p>\n\n\n\n

Ele se conecta a diversas linguagens de programa\u00e7\u00e3o, como Python<\/a> e PHP<\/a>, para levar essas informa\u00e7\u00f5es \u00e0 p\u00e1gina em quest\u00e3o.<\/s> <\/p>\n\n\n\n

\"Desenvolvedora<\/figure>\n\n\n\n

Manipular o DOM \u00e9 um recurso bastante utilizado na cria\u00e7\u00e3o de p\u00e1ginas da web.<\/em> <\/p>\n\n\n\n

O que \u00e9 Object Document?<\/strong> <\/h3>\n\n\n\n

J\u00e1 o Object Document, ou Documento de Objeto, \u00e9 a estrutura hier\u00e1rquica que o DOM cria a partir de um documento HTML ou XML<\/strong>.  <\/p>\n\n\n\n

Ele organiza todos os elementos em uma \u00e1rvore de objetos, onde cada n\u00f3 representa um elemento, atributo ou texto. <\/p>\n\n\n\n

Esses objetos podem ser manipulados usando linguagens como JavaScript, entregando os resultados exibidos ao acessar um site. <\/p>\n\n\n\n

Outros dados fundamentais sobre o DOM<\/strong> <\/h3>\n\n\n\n

Quando se fala sobre DOM tamb\u00e9m \u00e9 importante se atentar aos seguintes dados fundamentais: <\/p>\n\n\n\n