{"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\/es\/wiki\/document-object-model-dom\/","title":{"rendered":"Modelo de objetos de documento (DOM)"},"content":{"rendered":"<p>El modelo de objetos de documento (DOM) es una interfaz vital que permite a los desarrolladores interactuar con documentos web utilizando lenguajes de programaci\u00f3n como JavaScript. Representa una vista estructurada, jer\u00e1rquica y l\u00f3gica del contenido de un documento web, como HTML o XML, como una estructura en forma de \u00e1rbol.<\/p>\n<h2>La g\u00e9nesis del modelo de objetos de documento (DOM)<\/h2>\n<p>El concepto de DOM surgi\u00f3 por primera vez a mediados y finales de la d\u00e9cada de 1990 como resultado de la necesidad de permitir contenido web m\u00e1s interactivo. Con la llegada de los sitios web din\u00e1micos y el uso generalizado de JavaScript, surgi\u00f3 la necesidad de un modelo que permitiera a los scripts cambiar la estructura, el estilo y el contenido del documento. El Consorcio World Wide Web (W3C) se dio a la tarea de crear una API estandarizada para este prop\u00f3sito, lo que dio como resultado el desarrollo del DOM.<\/p>\n<p>El primer nivel DOM est\u00e1ndar, DOM Nivel 1, fue introducido por el W3C en 1998. Proporcion\u00f3 un modelo integral para un documento HTML o XML completo, incluidos los medios para cambiar cualquier parte del documento.<\/p>\n<h2>Ampliando el modelo de objetos de documento (DOM)<\/h2>\n<p>El DOM es esencialmente una plataforma y una interfaz neutral en cuanto al idioma que permite que los programas y scripts accedan y actualicen din\u00e1micamente el contenido, la estructura y el estilo de un documento.<\/p>\n<p>El DOM est\u00e1 organizado en una jerarqu\u00eda de nodos, cada uno de los cuales representa una parte del documento, como elementos, atributos y texto. Esta estructura de \u00e1rbol l\u00f3gica facilita la navegaci\u00f3n y la manipulaci\u00f3n del contenido del documento.<\/p>\n<p>Un documento web se modela como un \u00e1rbol de objetos que tienen propiedades y m\u00e9todos, y pueden contener otros objetos. Por ejemplo, un documento HTML se transforma en objetos que representan elementos como &quot;body&quot;, &quot;div&quot;, &quot;span&quot; y &quot;p&quot;, as\u00ed como sus atributos y contenido de texto.<\/p>\n<h2>C\u00f3mo funciona el modelo de objetos de documento (DOM)<\/h2>\n<p>La estructura interna del DOM est\u00e1 organizada como un \u00e1rbol de nodos. El nodo superior es el <code data-no-translation=\"\">Document<\/code> nodo, que representa el documento completo. Debajo de esto, el <code data-no-translation=\"\">Element<\/code> los nodos corresponden a los elementos HTML de la p\u00e1gina, <code data-no-translation=\"\">Attribute<\/code> Los nodos contienen los atributos de los elementos, y <code data-no-translation=\"\">Text<\/code> Los nodos contienen el contenido de texto de los elementos.<\/p>\n<p>Esta estructura jer\u00e1rquica permite a los desarrolladores navegar por el \u00e1rbol de documentos y utilizar m\u00e9todos API para seleccionar, crear, modificar o eliminar nodos.<\/p>\n<p>A continuaci\u00f3n se muestra un ejemplo de c\u00f3mo se ver\u00eda un documento HTML como un \u00e1rbol 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>Caracter\u00edsticas clave del modelo de objetos de documento (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Estructura de \u00e1rbol<\/strong>: El DOM representa un documento en una estructura de \u00e1rbol l\u00f3gica, lo que hace que la navegaci\u00f3n, selecci\u00f3n y manipulaci\u00f3n sean sencillas e intuitivas.<\/p>\n<\/li>\n<li>\n<p><strong>Idioma neutral<\/strong>: El DOM no est\u00e1 vinculado a ning\u00fan lenguaje de programaci\u00f3n en particular. Es una convenci\u00f3n para representar e interactuar con objetos en HTML, XML y otros tipos de documentos.<\/p>\n<\/li>\n<li>\n<p><strong>Acceso din\u00e1mico y actualizaci\u00f3n<\/strong>: El DOM permite a los programas acceder y actualizar din\u00e1micamente el contenido, la estructura y el estilo de un documento.<\/p>\n<\/li>\n<li>\n<p><strong>Estandarizado<\/strong>: El DOM es un est\u00e1ndar del W3C, lo que garantiza su amplia aceptaci\u00f3n y compatibilidad entre diferentes navegadores y plataformas.<\/p>\n<\/li>\n<\/ol>\n<h2>Tipos de modelo de objetos de documento (DOM)<\/h2>\n<p>La especificaci\u00f3n DOM se divide en varios &quot;niveles&quot; y &quot;m\u00f3dulos&quot;, cada uno de los cuales agrega caracter\u00edsticas y funcionalidades al anterior. Los tipos clave incluyen:<\/p>\n<table>\n<thead>\n<tr>\n<th>Nivel\/Tipo DOM<\/th>\n<th>Breve descripci\u00f3n<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM Nivel 1<\/strong><\/td>\n<td>Proporcion\u00f3 un modelo b\u00e1sico para documentos HTML o XML completos, incluidos m\u00e9todos para manipular elementos y sus atributos.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Nivel 2<\/strong><\/td>\n<td>Se introdujeron caracter\u00edsticas como manejo de espacios de nombres, un m\u00f3dulo de estilo que admite CSS y varias interfaces nuevas para manejar tablas, eventos, etc.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Nivel 3<\/strong><\/td>\n<td>Se agreg\u00f3 soporte para XPath y manejo de eventos de teclado, se introdujeron interfaces para cargar y guardar documentos.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Nivel 4<\/strong><\/td>\n<td>Se simplific\u00f3 el DOM central al reducir las dependencias, se introdujeron promesas para operaciones asincr\u00f3nicas y se agregaron m\u00e1s funciones, como funciones parentales, para facilitar la manipulaci\u00f3n de los nodos.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Utilizando el modelo de objetos de documento (DOM)<\/h2>\n<p>El DOM se utiliza cada vez que se manipula una p\u00e1gina web mediante JavaScript. Es la API fundamental para numerosas tecnolog\u00edas web.<\/p>\n<p>Los desarrolladores utilizan el DOM para cambiar din\u00e1micamente la apariencia y el contenido de una p\u00e1gina web sin necesidad de recargar la p\u00e1gina por completo, lo que permite interfaces de usuario interactivas y responsivas.<\/p>\n<p>A pesar de su poder, el DOM no est\u00e1 exento de problemas. Puede volverse lento si no se usa con cuidado, especialmente con documentos web grandes o complejos. La manipulaci\u00f3n DOM mal optimizada puede provocar una representaci\u00f3n lenta de la p\u00e1gina e interfaces que no responden. Para solucionar esto, los desarrolladores suelen utilizar bibliotecas o marcos como jQuery, React o Vue.js, que ofrecen API de nivel superior para una manipulaci\u00f3n DOM eficiente.<\/p>\n<h2>Caracter\u00edsticas DOM y comparaci\u00f3n con t\u00e9rminos similares<\/h2>\n<table>\n<thead>\n<tr>\n<th>T\u00e9rmino<\/th>\n<th>Descripci\u00f3n<\/th>\n<th>Comparaci\u00f3n<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOMINGO<\/strong><\/td>\n<td>Una API para documentos HTML y XML, que proporciona una representaci\u00f3n estructural del documento y permite a los desarrolladores manipular su contenido y presentaci\u00f3n visual.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>El modelo de objetos CSS (CSSOM) es un mapa de estilos CSS, similar al DOM pero espec\u00edficamente para CSS. Permite la manipulaci\u00f3n de hojas de estilo y estilos aplicados al DOM.<\/td>\n<td>Mientras que DOM se centra en la estructura del documento, CSSOM se centra en la capa de presentaci\u00f3n.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM en la sombra<\/strong><\/td>\n<td>Un mecanismo para encapsular partes de un \u00e1rbol DOM para la implementaci\u00f3n de componentes web. A\u00edsla partes del DOM para &quot;ocultarlas&quot; del \u00e1rbol de documentos principal.<\/td>\n<td>A diferencia del DOM normal, Shadow DOM proporciona encapsulaci\u00f3n de estilo y comportamiento.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Perspectivas futuras relacionadas con el modelo de objetos de documento (DOM)<\/h2>\n<p>A medida que las tecnolog\u00edas web contin\u00faan evolucionando, es probable que la API DOM tambi\u00e9n se expanda y mejore. Los posibles desarrollos futuros incluyen m\u00e9todos m\u00e1s eficientes para manipular el DOM, una mejor integraci\u00f3n con los est\u00e1ndares web emergentes y la evoluci\u00f3n continua de la propia especificaci\u00f3n HTML.<\/p>\n<p>Un desarrollo interesante en curso es la adopci\u00f3n incremental de componentes web, que permiten la creaci\u00f3n de etiquetas HTML encapsuladas y reutilizables. Esto est\u00e1 estrechamente relacionado con Shadow DOM, que proporciona un m\u00e9todo para encapsular elementos DOM.<\/p>\n<h2>Modelo de objetos de documento (DOM) y servidores proxy<\/h2>\n<p>Un servidor proxy es un intermediario que reenv\u00eda solicitudes y respuestas entre un cliente y un servidor. Mientras que el DOM se ocupa principalmente de la estructura y manipulaci\u00f3n de documentos web en el lado del cliente, los servidores proxy operan a nivel de red.<\/p>\n<p>Sin embargo, la intersecci\u00f3n de ambos se puede encontrar en escenarios en los que un servidor proxy podr\u00eda modificar el contenido de un documento web. Por ejemplo, un servidor proxy puede agregar, eliminar o modificar elementos DOM en una p\u00e1gina web antes de que llegue al cliente. Esto podr\u00eda usarse por diversas razones, como inyectar scripts, eliminar elementos no deseados o modificar contenido con fines de localizaci\u00f3n o personalizaci\u00f3n.<\/p>\n<h2>enlaces 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\">MDN Web Docs: Modelo de objetos de documento (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">Est\u00e1ndar W3C DOM<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">Informaci\u00f3n de JavaScript: el DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Fundamentos web de Google: c\u00f3mo funcionan los navegadores<\/a><\/li>\n<\/ul>\n<p>Esta descripci\u00f3n general deber\u00eda proporcionar una comprensi\u00f3n integral del modelo de objetos de documento (DOM), su origen, c\u00f3mo funciona, sus caracter\u00edsticas y c\u00f3mo es probable que evolucione. El DOM sigue siendo una piedra angular del desarrollo web interactivo y seguir\u00e1 desempe\u00f1ando un papel fundamental a medida que avancen las tecnolog\u00edas web.<\/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\/es\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/es\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/es\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/es\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/es\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/es\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}