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, el estilo o el contenido de un documento. [2] Los nodos pueden tener controladores de eventos (también conocidos como escuchas de eventos) adjuntos a ellos. Una vez que se activa un evento, los controladores de eventos se ejecutan. [3]
La estandarización principal del DOM estuvo a cargo del Consorcio World Wide Web (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 (Document Object Model), 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 los años 1990 entre Netscape Navigator y Microsoft Internet Explorer , así como con la de JavaScript y JScript , los primeros lenguajes de script 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 permitían a los desarrolladores web crear páginas web con interactividad del lado del cliente . Las limitadas facilidades para detectar eventos generados por el usuario y modificar el documento HTML en la primera generación de estos lenguajes finalmente 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 para HTML 4 .
El DOM heredado estaba limitado en cuanto a los tipos de elementos a los que se podía acceder. Se podía hacer referencia a los elementos de formulario , enlace e imagen con un nombre jerárquico que comenzaba con el objeto de documento raíz. Un nombre jerárquico podía hacer uso de los nombres o del í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 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, añadiendo compatibilidad con la funcionalidad HTML dinámico (DHTML) que permite realizar cambios en un documento HTML cargado. DHTML requería extensiones del objeto de documento rudimentario que estaba disponible en las implementaciones del DOM heredado. Aunque las implementaciones del DOM heredado eran en gran medida compatibles, ya que JScript se basaba en JavaScript, las extensiones del DOM DHTML se desarrollaron en paralelo por cada fabricante de navegadores y siguieron siendo incompatibles. Estas versiones del DOM se conocieron como el "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 fines de 1998. Para 2005, grandes partes del DOM del W3C eran compatibles con los navegadores comunes compatibles con ECMAScript, incluidos Internet Explorer 6 (desde 2001), Opera , Safari y 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 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 lanzamiento inminente 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 del 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, [11] y algunos navegadores han utilizado otros modelos internos. [12]
Cuando se carga una página web, el navegador crea un Modelo de Objeto 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 en sí. Esto permite la creación de páginas web dinámicas , [13] 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 elementos o nodos de texto como elementos secundarios. 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:
- Documento (raíz) - 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 de 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 código HTML:
< a href = "https://ejemplo.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 habituales 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 . createElement ( "root" ); // Crea un elemento secundario var child = document . createElement ( "child" ); // Agrega el elemento secundario 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 los elementos secundarios en el proceso. Por ejemplo:
documento . getElementById ( "raíz" ). innerHTML = "<hijo></hijo>" ; Otro método es utilizar una biblioteca o un marco de JavaScript como jQuery , AngularJS , React , Vue.js , etc. Estas bibliotecas proporcionan una forma más conveniente, elocuente 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.
La creación de 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 para ser renderizado.
En resumen, crear una estructura DOM implica crear nodos individuales y organizarlos en una estructura jerárquica utilizando JavaScript u otros lenguajes de programación, y se puede hacer utilizando varios métodos dependiendo del caso de uso y la preferencia 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 normalmente almacenan en búfer el documento. [14] Sin embargo, un DOM no necesita originarse en un documento serializado en absoluto, sino que se puede crear en su lugar mediante la API del DOM. Además, ha habido implementaciones incluso antes del propio DOM, de estructura equivalente con representación de disco persistente y acceso rápido, por ejemplo, el modelo de DynaText divulgado en [15] y varios enfoques de bases de datos.
Los navegadores web dependen de motores de diseño para analizar HTML y convertirlo en un DOM. Algunos motores de diseño, como Trident/MSHTML , están asociados principalmente o exclusivamente con un navegador en particular, como Internet Explorer. Otros, como 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 Document Object Model (Modelo de objetos de documento) es una interfaz independiente de la plataforma y del lenguaje que permitirá a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de los documentos.
{{cite web}}: CS1 maint: nombres numéricos: lista de autores ( enlace )Sin embargo, el DOM no especifica que los documentos deban implementarse como un árbol o una arboleda, ni tampoco especifica cómo deben implementarse las relaciones entre los objetos. El DOM es un modelo lógico que puede implementarse de cualquier manera conveniente.
