Modelo de objetos de documento

El Modelo de Objetos del Documento ( DOM ) es una API multiplataforma ^{[ 2 ]} e independiente del lenguaje que trata un documento HTML o XML como una estructura de árbol donde 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 del DOM permiten el acceso programático al árbol; con ellos se puede cambiar la estructura, el estilo o el contenido de un documento. ^{[ 2 ]} Los nodos pueden tener controladores de eventos (también conocidos como oyentes de eventos) asociados. Una vez que se activa un evento, se ejecutan los controladores de eventos. ^{[ 3 ]}

La estandarización principal del DOM estuvo a cargo del Consorcio World Wide Web (W3C), que elaboró ​​su última recomendación en 2004. El Grupo de Trabajo sobre Documentos Web ( WTHWG ) asumió el desarrollo del estándar y lo publicó como un documento vivo . Actualmente, el W3C publica versiones estables del estándar del WHATWG.

En el DOM (Modelo de Objeto de Documento) de HTML, cada elemento es un nodo : ^{[ 4 ]}

• Un documento es un nodo de documento.
• Todos los elementos HTML son nodos de elementos.
• Todos los atributos HTML son nodos de atributo.
• El texto insertado en los elementos HTML son nodos de texto.
• Los comentarios son nodos de comentarios.

La historia del Modelo de Objetos del Documento (DOM) 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 scripting que se implementaron ampliamente en los motores JavaScript de los 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 permitieron a los desarrolladores web crear páginas web con interactividad del lado del cliente . Las limitaciones para detectar eventos generados por el usuario y modificar el documento HTML en la primera generación de estos lenguajes se conocieron posteriormente 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 tenía limitaciones en cuanto a los tipos de elementos a los que se podía acceder. Los elementos de formulario , enlace e imagen podían referenciarse con un nombre jerárquico que comenzaba con el objeto raíz del documento. Un nombre jerárquico podía utilizar los nombres o el índice secuencial de los elementos recorridos. Por ejemplo, se podía acceder a un elemento de entrada de formulario como document.myForm.myInputo document.forms[0].elements[0].

El DOM heredado permitía la validación de formularios del lado del cliente y una interactividad de interfaz sencilla, 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, añadiendo compatibilidad con la funcionalidad de HTML dinámico (DHTML), que permitía realizar cambios en un documento HTML cargado. DHTML requería extensiones del objeto de documento básico disponible en las implementaciones del DOM heredado. Si bien estas implementaciones eran en gran medida compatibles, dado que JScript se basaba en JavaScript, las extensiones de DHTML para el DOM fueron desarrolladas en paralelo por cada fabricante de navegadores y permanecieron incompatibles. Estas versiones del DOM se conocieron como el "DOM intermedio".

Tras la estandarización de ECMAScript , el Grupo de Trabajo DOM del W3C comenzó a elaborar una especificación DOM estándar. La especificación finalizada, conocida como "DOM Nivel 1", se convirtió en una Recomendación del W3C a finales de 1998. Para 2005, gran parte del DOM del W3C era compatible con los navegadores comunes que admiten ECMAScript, incluidos Internet Explorer 6 (desde 2001), Opera , Safari y los navegadores basados ​​en 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 estándar vivo. ^{[ 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 el 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 fue disuelto 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.

• El nivel 1 del DOM proporcionaba un modelo completo para un documento HTML o XML completo , incluyendo los medios para modificar cualquier parte del documento.
• DOM Nivel 2 se publicó a finales del año 2000. Introdujo la getElementByIdfunción, así como un modelo de eventos y compatibilidad con espacios de nombres XML y CSS.
• DOM Nivel 3, publicado en abril de 2004, añadió compatibilidad con XPath y el manejo de eventos de teclado , así como una interfaz para serializar documentos como XML.
• HTML5 se publicó en octubre de 2014. Parte de HTML5 reemplazó el módulo HTML DOM de nivel 2.
• El DOM Nivel 4 se publicó en 2015 y se retiró en noviembre de 2020. ^{[ 9 ]}
• DOM 2020-06 se publicó en septiembre de 2021 como una Recomendación del W3C. ^{[ 10 ]} Es una instantánea del estándar de vida de WHATWG.

Un árbol del Modelo de Objetos del 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 hijos que representan los elementos, atributos y el contenido textual del documento. Cada nodo del árbol tiene un nodo padre, excepto el nodo raíz, y puede tener varios nodos hijos.

<html> <head> <title> Mi sitio web </title> </head> <body> <h1> Bienvenido a DOM </h1> <p> Este es mi sitio web . </p> </body> </html>​​​​​​​​​​​​​​​

- Documento (raíz) - html - cabeza - título - "Mi sitio web" - cuerpo - h1 - "Bienvenido a DOM" - pag - "Esta es mi página web." 

<a href="https://example.com"> Enlace </a>​​​​​​​

- a - href: "https://example.com" - "Enlace" 

El árbol DOM se puede manipular usando JavaScript u otros lenguajes de programación. Las tareas comunes incluyen navegar por el árbol, agregar, eliminar y modificar nodos, y obtener y establecer las propiedades de los nodos. La API DOM proporciona un conjunto de métodos y propiedades para realizar estas operaciones, como getElementById, createElement, appendChild, y innerHTML.

// Crea el elemento raíz var root = document . createElement ( "root" );// Crea un elemento hijo var child = document . createElement ( "child" );// Agrega el elemento hijo al elemento raíz root.appendChild ( child ) ;

Otra forma de crear una estructura DOM es utilizando la propiedad innerHTML para insertar código HTML como una cadena, creando los elementos y sus hijos en el proceso. Por ejemplo:

documento . getElementById ( "root" ). innerHTML = "<child></child>" ;

Otro método consiste en utilizar una biblioteca o framework de JavaScript como jQuery , AngularJS , React , Vue.js , Svelte , etc. Estas bibliotecas proporcionan una forma 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 de JavaScript para analizar los datos y crear los nodos correspondientemente.

La creación de una estructura DOM no implica necesariamente que se mostrará en la página web; solo existe en la memoria y debe añadirse al cuerpo del documento o a un contenedor específico para su renderizado.

En resumen, la creación de una estructura DOM implica la creación de nodos individuales y su organización en una estructura jerárquica utilizando JavaScript u otros lenguajes de programación, y puede realizarse mediante diversos métodos dependiendo del caso de uso y de 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, las implementaciones suelen almacenar el documento en búfer. ^{[ 14 ]} Sin embargo, un DOM no tiene por qué originarse en un documento serializado, sino que puede crearse directamente con la API del DOM. Incluso antes de que surgiera la idea del DOM, existían implementaciones de una estructura equivalente con representación persistente en disco y acceso rápido, como el modelo de DynaText descrito en ^{[ 15 ]} y diversos enfoques de bases de datos.

• Shadow DOM
• DOM virtual

• Estándar de vida DOM según WHATWG
• Centro DOM original del W3C, creado por el Grupo de Trabajo DOM del W3C (obsoleto).
• Últimas instantáneas del estándar de vida WHATWG publicadas por el Grupo de Trabajo HTML del W3C
• Grupo de Trabajo de Plataformas Web (actual responsable del DOM del W3C)