El modelo de objetos de documento ( DOM ) es una interfaz multiplataforma e independiente del lenguaje que trata un documento HTML o XML como una estructura de árbol en la que cada nodo es un objeto que representa una parte del documento. El DOM representa un documento con un árbol lógico. Cada rama del árbol termina en un nodo y cada nodo contiene objetos. Los métodos DOM permiten el acceso programático al árbol; con ellos se puede cambiar la estructura, estilo o contenido de un documento. [2] Los nodos pueden tener controladores de eventos (también conocidos como detectores de eventos) adjuntos. Una vez que se activa un evento, los controladores de eventos se ejecutan. [3]
La principal estandarización del DOM estuvo a cargo del World Wide Web Consortium (W3C), que desarrolló una recomendación por última vez en 2004. WHATWG se hizo cargo del desarrollo del estándar y lo publicó como un documento vivo . El W3C ahora publica instantáneas estables del estándar WHATWG.
En HTML DOM (modelo de objetos de documento), cada elemento es un nodo: [4]
La historia del Modelo de Objetos de Documento está entrelazada con la historia de las " guerras de navegadores " de finales de la década de 1990 entre Netscape Navigator y Microsoft Internet Explorer , así como con la de JavaScript y JScript , los primeros lenguajes de programación que se implementaron ampliamente en el mundo. Motores JavaScript de navegadores web .
JavaScript fue lanzado por Netscape Communications en 1995 dentro de Netscape Navigator 2.0. El competidor de Netscape, Microsoft , lanzó Internet Explorer 3.0 al año siguiente con una reimplementación de JavaScript llamada JScript. JavaScript y JScript permiten a los desarrolladores web crear páginas web con interactividad del lado del cliente . Las funciones limitadas para detectar eventos generados por el usuario y modificar el documento HTML en la primera generación de estos lenguajes eventualmente se conocieron como "DOM Nivel 0" o "DOM heredado". No se desarrolló ningún estándar independiente para DOM Nivel 0, pero se describió parcialmente en las especificaciones de HTML 4 .
El DOM heredado estaba limitado en los tipos de elementos a los que se podía acceder. Se podría hacer referencia a los elementos de formulario , enlace e imagen con un nombre jerárquico que comenzara con el objeto del documento raíz. Un nombre jerárquico podría utilizar los nombres o el índice secuencial de los elementos atravesados. Por ejemplo, se puede acceder a un elemento de entrada de formulario como document.myForm.myInputo document.forms[0].elements[0].
El DOM heredado permitió la validación de formularios del lado del cliente y una interactividad de interfaz simple, como la creación de información sobre herramientas .
En 1997, Netscape y Microsoft lanzaron la versión 4.0 de Netscape Navigator e Internet Explorer respectivamente, agregando soporte para la funcionalidad HTML dinámico (DHTML) que permite realizar cambios en un documento HTML cargado. DHTML requería extensiones para el objeto de documento rudimentario que estaba disponible en las implementaciones DOM heredadas. Aunque las implementaciones de Legacy DOM eran en gran medida compatibles ya que JScript se basaba en JavaScript, las extensiones DHTML DOM fueron desarrolladas en paralelo por cada fabricante de navegadores y seguían siendo incompatibles. Estas versiones del DOM se conocieron como "DOM intermedio".
Después de la estandarización de ECMAScript , el grupo de trabajo DOM del W3C comenzó a redactar una especificación DOM estándar. La especificación completa, conocida como "DOM Nivel 1", se convirtió en una recomendación del W3C a finales de 1998. En 2005, gran parte del DOM del W3C estaba bien soportado por navegadores comunes habilitados para ECMAScript, incluido Internet Explorer 6 (de 2001), Opera , Navegadores basados en Safari y Gecko (como Mozilla , Firefox , SeaMonkey y Camino ).
El Grupo de Trabajo DOM del W3C publicó su recomendación final y posteriormente se disolvió en 2004. Los esfuerzos de desarrollo migraron al WHATWG , que continúa manteniendo un nivel de vida. [5] En 2009, el grupo de Aplicaciones Web reorganizó las actividades DOM en el W3C. [6] En 2013, debido a la falta de progreso y al inminente lanzamiento de HTML5 , la especificación DOM Nivel 4 fue reasignada al Grupo de Trabajo HTML para acelerar su finalización. [7] Mientras tanto, en 2015, el grupo de Aplicaciones Web se disolvió y la administración de DOM pasó al grupo de Plataforma Web. [8] A partir de la publicación de DOM Nivel 4 en 2015, el W3C crea nuevas recomendaciones basadas en instantáneas del estándar WHATWG.
getElementByIdfunción, así como un modelo de eventos y soporte para espacios de nombres XML y CSS.Para representar un documento como una página HTML, la mayoría de los navegadores web utilizan un modelo interno similar al DOM. Los nodos de cada documento están organizados en una estructura de árbol , llamada árbol DOM , con el nodo superior denominado "Objeto de documento". Cuando se representa una página HTML en los navegadores, el navegador descarga el HTML en la memoria local y lo analiza automáticamente para mostrar la página en la pantalla. Sin embargo, el DOM no necesariamente necesita representarse como un árbol, [10] y algunos navegadores han utilizado otros modelos internos. [11]
Cuando se carga una página web, el navegador crea un modelo de objetos de documento de la página, que es una representación orientada a objetos de un documento HTML que actúa como una interfaz entre JavaScript y el documento mismo. Esto permite la creación de páginas web dinámicas , [12] porque dentro de una página JavaScript puede:
Un árbol de modelo de objetos de documento (DOM) es una representación jerárquica de un documento HTML o XML . Consta de un nodo raíz, que es el documento en sí, y una serie de nodos secundarios que representan los elementos, atributos y contenido de texto del documento. Cada nodo del árbol tiene un nodo principal, excepto el nodo raíz, y puede tener varios nodos secundarios.
Los elementos de un documento HTML o XML se representan como nodos en el árbol DOM. Cada nodo de elemento tiene un nombre de etiqueta, atributos y puede contener otros nodos de elemento o nodos de texto como hijos. Por ejemplo, un documento HTML con la siguiente estructura:
< html > < head > < title > Mi sitio web </ title > </ head > < body > < h1 > Bienvenido </ h1 > < p > Este es mi sitio web. </p> </body> </html> _ _ _ _ _ _se representará en el árbol DOM como:
- Raiz del documento) -html - cabeza - título - "Mi sitio web" - cuerpo - h1 - "Bienvenido" - pag - "Este es mi sitio web".El contenido de texto dentro de un elemento se representa como un nodo de texto en el árbol DOM. Los nodos de texto no tienen atributos ni nodos secundarios y siempre son nodos hoja en el árbol. Por ejemplo, el contenido de texto "Mi sitio web" en el elemento de título y "Bienvenido" en el elemento h1 en el ejemplo anterior se representan como nodos de texto.
Los atributos de un elemento se representan como propiedades del nodo del elemento en el árbol DOM. Por ejemplo, un elemento con el siguiente HTML:
< a href = "https://example.com" > Enlace </ a >se representará en el árbol DOM como:
- a - href: "https://ejemplo.com" - "Enlace"El árbol DOM se puede manipular mediante JavaScript u otros lenguajes de programación. Las tareas comunes incluyen navegar por el árbol, agregar, eliminar y modificar nodos, y obtener y configurar las propiedades de los nodos. La API DOM proporciona un conjunto de métodos y propiedades para realizar estas operaciones, como getElementById, createElement, appendChildy innerHTML.
// Crea el elemento raíz var root = document . crearElemento ( "raíz" ); // Crea un elemento hijo var child = documento . crearElemento ( "niño" ); // Agrega el elemento secundario al elemento raíz root . appendChild ( niño );Otra forma de crear una estructura DOM es usar la propiedad internalHTML para insertar código HTML como una cadena, creando los elementos y los hijos en el proceso. Por ejemplo:
documento . getElementById ( "raíz" ). internalHTML = "<niño></niño>" ; Otro método es utilizar una biblioteca o marco de JavaScript como jQuery , AngularJS , React , Vue.js , etc. Estas bibliotecas proporcionan una forma más conveniente y eficiente de crear, manipular e interactuar con el DOM.
También es posible crear una estructura DOM a partir de datos XML o JSON, utilizando métodos JavaScript para analizar los datos y crear los nodos en consecuencia.
Crear una estructura DOM no significa necesariamente que se mostrará en la página web, solo existe en la memoria y debe agregarse al cuerpo del documento o a un contenedor específico que se va a representar.
En resumen, crear una estructura DOM implica crear nodos individuales y organizarlos en una estructura jerárquica usando JavaScript u otros lenguajes de programación, y se puede hacer usando varios métodos según el caso de uso y las preferencias del desarrollador.
Debido a que el DOM admite la navegación en cualquier dirección (por ejemplo, padre y hermano anterior) y permite modificaciones arbitrarias, una implementación debe al menos almacenar en un buffer el documento que se ha leído hasta el momento (o alguna forma analizada del mismo). [13]
Los navegadores web dependen de motores de diseño para analizar HTML en un DOM. Algunos motores de diseño, como Trident/MSHTML , están asociados principal o exclusivamente con un navegador en particular, como Internet Explorer. Otros, incluidos Blink , WebKit y Gecko , son compartidos por varios navegadores, como Google Chrome , Opera , Safari y Firefox . Los diferentes motores de diseño implementan los estándares DOM con distintos grados de cumplimiento.
Implementaciones DOM:
API que exponen implementaciones DOM:
Herramientas de inspección:
El modelo de objetos de documento es una interfaz neutral en cuanto a plataforma y lenguaje que permitirá que los programas y scripts accedan y actualicen dinámicamente el contenido, la estructura y el estilo de los documentos.
{{cite web}}: Mantenimiento CS1: nombres numéricos: lista de autores ( enlace )Sin embargo, el DOM no especifica que los documentos deben implementarse como un árbol o una arboleda, ni especifica cómo deben implementarse las relaciones entre objetos.
El DOM es un modelo lógico que puede implementarse de cualquier manera conveniente.
