{"id":476958,"date":"2023-08-09T09:05:36","date_gmt":"2023-08-09T09:05:36","guid":{"rendered":""},"modified":"2023-09-05T11:13:45","modified_gmt":"2023-09-05T11:13:45","slug":"document-object-model-dom","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/pt\/wiki\/document-object-model-dom\/","title":{"rendered":"Modelo de objeto de documento (DOM)"},"content":{"rendered":"<p>O Document Object Model (DOM) \u00e9 uma interface vital que permite aos desenvolvedores interagir com documentos da web usando linguagens de script como JavaScript. Representa uma vis\u00e3o estruturada, hier\u00e1rquica e l\u00f3gica do conte\u00fado de um documento da web, como HTML ou XML, como uma estrutura semelhante a uma \u00e1rvore.<\/p>\n<h2>A G\u00eanese do Modelo de Objeto de Documento (DOM)<\/h2>\n<p>O conceito de DOM surgiu pela primeira vez em meados da d\u00e9cada de 1990, como resultado da necessidade de permitir conte\u00fado da web mais interativo. Com o advento de sites din\u00e2micos e o uso generalizado de JavaScript, surgiu a necessidade de um modelo que permitisse aos scripts alterar a estrutura, o estilo e o conte\u00fado do documento. O World Wide Web Consortium (W3C) assumiu a tarefa de criar uma API padronizada para esse fim, resultando no desenvolvimento do DOM.<\/p>\n<p>O primeiro n\u00edvel DOM padr\u00e3o, DOM N\u00edvel 1, foi introduzido pelo W3C em 1998. Ele fornecia um modelo abrangente para um documento HTML ou XML inteiro, incluindo os meios para alterar qualquer parte do documento.<\/p>\n<h2>Expandindo o modelo de objeto de documento (DOM)<\/h2>\n<p>O DOM \u00e9 essencialmente uma plataforma e interface de linguagem neutra que permite que programas e scripts acessem e atualizem dinamicamente o conte\u00fado, a estrutura e o estilo de um documento.<\/p>\n<p>O DOM \u00e9 organizado em uma hierarquia de n\u00f3s, cada um representando uma parte do documento, como elementos, atributos e texto. Essa estrutura l\u00f3gica em \u00e1rvore facilita a navega\u00e7\u00e3o e a manipula\u00e7\u00e3o do conte\u00fado do documento.<\/p>\n<p>Um documento da web \u00e9 modelado como uma \u00e1rvore de objetos que possuem propriedades e m\u00e9todos e podem conter outros objetos. Por exemplo, um documento HTML \u00e9 transformado em objetos que representam elementos como \u201cbody\u201d, \u201cdiv\u201d, \u201cspan\u201d e \u201cp\u201d, bem como seus atributos e conte\u00fado de texto.<\/p>\n<h2>Como funciona o modelo de objeto de documento (DOM)<\/h2>\n<p>A estrutura interna do DOM \u00e9 organizada como uma \u00e1rvore de n\u00f3s. O n\u00f3 mais alto \u00e9 o <code data-no-translation=\"\">Document<\/code> n\u00f3, que representa todo o documento. Abaixo deste, o <code data-no-translation=\"\">Element<\/code> n\u00f3s correspondem aos elementos HTML na p\u00e1gina, <code data-no-translation=\"\">Attribute<\/code> n\u00f3s cont\u00eam os atributos dos elementos, e <code data-no-translation=\"\">Text<\/code> os n\u00f3s cont\u00eam o conte\u00fado de texto dos elementos.<\/p>\n<p>Essa estrutura hier\u00e1rquica permite que os desenvolvedores naveguem na \u00e1rvore do documento e usem m\u00e9todos API para selecionar, criar, modificar ou excluir n\u00f3s.<\/p>\n<p>Aqui est\u00e1 um exemplo de como um documento HTML ficaria como uma \u00e1rvore DOM:<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>matem\u00e1tica<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>Copiar c\u00f3digo<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-mathematica\" data-no-translation=\"\"><span class=\"hljs-variable\">Document<\/span>\n    \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">html<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">head<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">title<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Title of the Document\"<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">body<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">h1<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Hello, world!\"<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">p<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"This is a paragraph.\"<\/span>\n<\/code><\/div><\/div><\/pre>\n<h2>Principais recursos do modelo de objeto de documento (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Estrutura da \u00e1rvore<\/strong>: O DOM representa um documento em uma estrutura de \u00e1rvore l\u00f3gica, o que torna a navega\u00e7\u00e3o, sele\u00e7\u00e3o e manipula\u00e7\u00e3o simples e intuitivas.<\/p>\n<\/li>\n<li>\n<p><strong>Idioma neutro<\/strong>: O DOM n\u00e3o est\u00e1 vinculado a nenhuma linguagem de programa\u00e7\u00e3o espec\u00edfica. \u00c9 uma conven\u00e7\u00e3o para representar e interagir com objetos em HTML, XML e outros tipos de documentos.<\/p>\n<\/li>\n<li>\n<p><strong>Acesso e atualiza\u00e7\u00e3o din\u00e2micos<\/strong>: O DOM permite que os programas acessem e atualizem dinamicamente o conte\u00fado, a estrutura e o estilo de um documento.<\/p>\n<\/li>\n<li>\n<p><strong>Padronizado<\/strong>: O DOM \u00e9 um padr\u00e3o W3C, garantindo sua ampla aceita\u00e7\u00e3o e compatibilidade entre diferentes navegadores e plataformas.<\/p>\n<\/li>\n<\/ol>\n<h2>Tipos de modelo de objeto de documento (DOM)<\/h2>\n<p>A especifica\u00e7\u00e3o DOM \u00e9 dividida em v\u00e1rios \u201cn\u00edveis\u201d e \u201cm\u00f3dulos\u201d, cada um adicionando recursos e funcionalidades ao anterior. Os tipos principais incluem:<\/p>\n<table>\n<thead>\n<tr>\n<th>N\u00edvel\/Tipo DOM<\/th>\n<th>Descri\u00e7\u00e3o breve<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM N\u00edvel 1<\/strong><\/td>\n<td>Forneceu um modelo b\u00e1sico para documentos HTML ou XML inteiros, incluindo m\u00e9todos para manipular elementos e seus atributos.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM N\u00edvel 2<\/strong><\/td>\n<td>Recursos introduzidos como manipula\u00e7\u00e3o de namespace, um m\u00f3dulo de estilo com suporte a CSS e v\u00e1rias novas interfaces para lidar com tabelas, eventos, etc.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM N\u00edvel 3<\/strong><\/td>\n<td>Adicionado suporte para XPath e manipula\u00e7\u00e3o de eventos de teclado, interfaces introduzidas para carregar e salvar documentos.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM N\u00edvel 4<\/strong><\/td>\n<td>Simplificou o DOM principal reduzindo depend\u00eancias, introduziu promessas para opera\u00e7\u00f5es ass\u00edncronas e adicionou mais recursos, como recursos parentais, para facilitar a manipula\u00e7\u00e3o de n\u00f3s.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Utilizando o Modelo de Objeto de Documento (DOM)<\/h2>\n<p>O DOM \u00e9 usado sempre que uma p\u00e1gina da web \u00e9 manipulada usando JavaScript. \u00c9 a API fundamental para in\u00fameras tecnologias da web.<\/p>\n<p>Os desenvolvedores usam o DOM para alterar dinamicamente a apar\u00eancia e o conte\u00fado de uma p\u00e1gina da Web sem exigir o recarregamento completo da p\u00e1gina, permitindo interfaces de usu\u00e1rio interativas e responsivas.<\/p>\n<p>Apesar de seu poder, o DOM tem seus problemas. Pode tornar-se lento se n\u00e3o for usado com cuidado, especialmente com documentos web grandes ou complexos. A manipula\u00e7\u00e3o de DOM mal otimizada pode levar \u00e0 renderiza\u00e7\u00e3o lenta da p\u00e1gina e \u00e0s interfaces que n\u00e3o respondem. Para resolver isso, os desenvolvedores costumam usar bibliotecas ou estruturas como jQuery, React ou Vue.js, que oferecem APIs de n\u00edvel superior para manipula\u00e7\u00e3o eficiente de DOM.<\/p>\n<h2>Caracter\u00edsticas do DOM e compara\u00e7\u00e3o com termos semelhantes<\/h2>\n<table>\n<thead>\n<tr>\n<th>Prazo<\/th>\n<th>Descri\u00e7\u00e3o<\/th>\n<th>Compara\u00e7\u00e3o<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>Uma API para documentos HTML e XML, fornecendo uma representa\u00e7\u00e3o estrutural do documento e permitindo aos desenvolvedores manipular seu conte\u00fado e apresenta\u00e7\u00e3o visual.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>O CSS Object Model (CSSOM) \u00e9 um mapa de estilos CSS, semelhante ao DOM, mas espec\u00edfico para CSS. Permite a manipula\u00e7\u00e3o de folhas de estilo e estilos aplicados ao DOM.<\/td>\n<td>Enquanto o DOM se concentra na estrutura do documento, o CSSOM se concentra na camada de apresenta\u00e7\u00e3o.<\/td>\n<\/tr>\n<tr>\n<td><strong>Sombra DOM<\/strong><\/td>\n<td>Um mecanismo para encapsular partes de uma \u00e1rvore DOM para a implementa\u00e7\u00e3o de Web Components. Ele isola partes do DOM para \u201cocult\u00e1-las\u201d da \u00e1rvore do documento principal.<\/td>\n<td>Ao contr\u00e1rio do DOM normal, o Shadow DOM fornece encapsulamento de estilo e comportamento.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Perspectivas futuras relacionadas ao modelo de objeto de documento (DOM)<\/h2>\n<p>\u00c0 medida que as tecnologias da web continuam a evoluir, a API DOM tamb\u00e9m dever\u00e1 se expandir e melhorar. Os poss\u00edveis desenvolvimentos futuros incluem m\u00e9todos mais eficientes de manipula\u00e7\u00e3o do DOM, melhor integra\u00e7\u00e3o com padr\u00f5es web emergentes e a evolu\u00e7\u00e3o cont\u00ednua da pr\u00f3pria especifica\u00e7\u00e3o HTML.<\/p>\n<p>Um desenvolvimento interessante e cont\u00ednuo \u00e9 a ado\u00e7\u00e3o incremental de Web Components, que permite a cria\u00e7\u00e3o de tags HTML reutiliz\u00e1veis e encapsuladas. Isso est\u00e1 intimamente ligado ao Shadow DOM, que fornece um m\u00e9todo de encapsulamento de elementos DOM.<\/p>\n<h2>Modelo de objeto de documento (DOM) e servidores proxy<\/h2>\n<p>Um servidor proxy \u00e9 um intermedi\u00e1rio que encaminha solicita\u00e7\u00f5es e respostas entre um cliente e um servidor. Enquanto o DOM se preocupa principalmente com a estrutura e manipula\u00e7\u00e3o de documentos da web no lado do cliente, os servidores proxy operam no n\u00edvel da rede.<\/p>\n<p>No entanto, a intersec\u00e7\u00e3o dos dois pode ser encontrada em cen\u00e1rios onde um servidor proxy pode modificar o conte\u00fado de um documento da web. Por exemplo, um servidor proxy pode adicionar, remover ou modificar elementos DOM em uma p\u00e1gina da web antes que ela chegue ao cliente. Isso pode ser usado por v\u00e1rios motivos, como inje\u00e7\u00e3o de scripts, remo\u00e7\u00e3o de elementos indesejados ou modifica\u00e7\u00e3o de conte\u00fado para fins de localiza\u00e7\u00e3o ou personaliza\u00e7\u00e3o.<\/p>\n<h2>Links Relacionados<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_new\" rel=\"noopener nofollow\">Documentos da Web MDN: modelo de objeto de documento (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">Padr\u00e3o DOM W3C<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">Informa\u00e7\u00f5es JavaScript: o DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Fundamentos da Web do Google: como funcionam os navegadores<\/a><\/li>\n<\/ul>\n<p>Esta vis\u00e3o geral deve fornecer uma compreens\u00e3o abrangente do Document Object Model (DOM), sua origem, como funciona, suas caracter\u00edsticas e como provavelmente evoluir\u00e1. O DOM continua sendo a base do desenvolvimento interativo da Web e continuar\u00e1 a desempenhar um papel cr\u00edtico \u00e0 medida que as tecnologias da Web avan\u00e7am.<\/p>","protected":false},"featured_media":468251,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476958","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Document Object Model (DOM): A Comprehensive Overview<\/mark>","faq_items":[{"question":"What is the Document Object Model (DOM)?","answer":"<p>The Document Object Model (DOM) is an interface that allows developers to interact with web documents using scripting languages like JavaScript. It represents the contents of a web document, such as HTML or XML, in a structured, hierarchical, and logical tree-like structure.<\/p>"},{"question":"When was the Document Object Model (DOM) first introduced?","answer":"<p>The concept of the DOM came into existence in the mid-to-late 1990s, with the World Wide Web Consortium (W3C) introducing the first standard DOM level, DOM Level 1, in 1998.<\/p>"},{"question":"How does the Document Object Model (DOM) work?","answer":"<p>The DOM works by representing a web document in a tree-like structure, with the topmost node being the <code>Document<\/code> node, representing the entire document. Below this, there are <code>Element<\/code> nodes, <code>Attribute<\/code> nodes, and <code>Text<\/code> nodes, each representing elements, attributes, and text within the document. This structure allows developers to navigate the document tree and use API methods to select, create, modify, or delete nodes.<\/p>"},{"question":"What are the key features of the Document Object Model (DOM)?","answer":"<p>The key features of the DOM include its tree-like structure, making it easy to navigate and manipulate; its language-neutrality, making it compatible with any programming language; its dynamic access and update capabilities; and its status as a W3C standard, ensuring widespread acceptance and compatibility.<\/p>"},{"question":"Are there different types of Document Object Model (DOM)?","answer":"<p>Yes, the DOM specification is divided into several \"levels\" and \"modules\", each adding features and functionality to the previous ones. These include DOM Level 1, DOM Level 2, DOM Level 3, and DOM Level 4.<\/p>"},{"question":"How is the Document Object Model (DOM) used?","answer":"<p>The DOM is used to dynamically change the look, feel, and content of a web page without requiring a full page reload. This makes for interactive and responsive user interfaces. However, the DOM can become slow if not used carefully, especially with large or complex web documents.<\/p>"},{"question":"How does the Document Object Model (DOM) relate to proxy servers?","answer":"<p>While the DOM is primarily concerned with the structure and manipulation of web documents on the client-side, proxy servers operate at the network level. However, they intersect when a proxy server modifies the contents of a web document before it reaches the client, such as injecting scripts, removing unwanted elements, or modifying content for localization or customization purposes.<\/p>"},{"question":"What are the future perspectives related to the Document Object Model (DOM)?","answer":"<p>The DOM API is likely to expand and improve as web technologies continue to evolve. Potential future developments include more efficient methods of manipulating the DOM, improved integration with emerging web standards, and the ongoing evolution of the HTML specification itself.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/pt\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}