Modelo de objeto de documento

El Modelo de objetos de documento (DOM) es una interfaz multiplataforma e independiente del idioma que trata un documento XML o HTML 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. Los nodos pueden tener controladores de eventos adjuntos. Una vez que se activa un evento, los controladores de eventos se ejecutan.

La estandarización principal 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 (Document Object Model), cada elemento es un nodo:

• 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 elementos HTML son nodos de texto.
• Los comentarios son nodos de comentarios.

Historia

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 JavaScript y JScript, los primeros lenguajes de secuencias de comandos 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 nueva implementació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ó un estándar independiente para DOM Nivel 0, pero se describió en parte 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 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 hacer uso de los nombres o del índice secuencial de los elementos atravesados. Por ejemplo, se puede acceder a un elemento de entrada de formulario como document.formName.inputName o document.forms[0].elements[0].

El Legacy DOM permitió la validación de formularios del lado del cliente y la interactividad de la 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 de HTML dinámico (DHTML) que permite 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 parte compatibles, ya que JScript se basaba en JavaScript, las extensiones DHTML DOM fueron desarrolladas en paralelo por cada fabricante de navegador 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 W3C DOM 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 era compatible con navegadores comunes compatibles con ECMAScript, incluido Internet Explorer 6 (de 2001), navegadores basados en Opera, Safari y Gecko (como Mozilla, Firefox, SeaMonkey y Camino).

Estándares

QUÉ ES DOM

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. En 2009, el grupo de Aplicaciones Web reorganizó las actividades de DOM en el W3C. En 2013, debido a la falta de progreso y al lanzamiento inminente de HTML5, la especificación DOM Nivel 4 se reasignó al Grupo de trabajo de HTML para acelerar su finalización. Mientras tanto, en 2015, el grupo de aplicaciones web se disolvió y la administración de DOM pasó al grupo de plataforma web. 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.

• DOM El nivel 1 proporcionó un modelo completo para un documento HTML o XML completo, incluyendo los medios para cambiar cualquier parte del documento.
• DOM Level 2 fue publicado a finales de 2000. Introdujo la getElementById función así como un modelo de evento y soporte para espacios de nombres XML y CSS.
• DOM Level 3, publicado en abril de 2004, agregó soporte para el manejo de eventos XPath y teclado, así como una interfaz para serializar documentos como XML.
• DOM Level 4 fue publicado en 2015. Es una instantánea del nivel de vida de QQG.

Aplicaciones

Navegadores web

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, denominada árbol DOM, con el nodo superior denominado "Objeto de documento". Cuando una página HTML se representa 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 tiene que representarse como un árbol y algunos navegadores han usado otros modelos internos.

Estructura de árbol DOM

La estructura de árbol DOM (Document Object Model) es una forma de representar la estructura de un documento HTML o XML como un árbol de objetos. Cada objeto del árbol representa una parte del documento, como un elemento, contenido de texto o atributo.

El árbol DOM tiene una estructura jerárquica, con nodos principales y secundarios. El nodo principal de un nodo es el nodo que lo encierra directamente, mientras que sus nodos secundarios son los nodos que encierra directamente. La jerarquía del árbol refleja la estructura del documento, con elementos principales que encierran a sus elementos secundarios.

Por ejemplo, considere el siguiente código HTML:

.cuerpo■ .h1■Hola Mundoc)h1■ .p■Este es un párrafo.c)p■c)cuerpo■

En el árbol DOM, el elemento body sería el nodo principal de los elementos h1 y p, que serían nodos secundarios. El contenido del texto "Hello World" y "Esto es un párrafo." serían nodos de texto dentro de los elementos h1 y p, respectivamente.

La estructura de árbol DOM es importante para el desarrollo web porque permite a los desarrolladores acceder y manipular los elementos, el contenido del texto y los atributos de un documento mediante varios métodos. Esto les permite crear aplicaciones web dinámicas e interactivas que responden a las entradas de los usuarios y a los datos cambiantes.

Javascript

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 propio documento. Esto permite la creación de páginas web dinámicas, ya que dentro de una página JavaScript puede:

• añadir, cambiar y eliminar cualquiera de los elementos y atributos HTML
• cambiar cualquiera de los estilos CSS
• reaccionar ante todos los eventos existentes
• crear nuevos eventos

Implementaciones

Debido a que el DOM admite la navegación en cualquier dirección (p. ej., padre y hermano anterior) y permite modificaciones arbitrarias, una implementación debe al menos almacenar en búfer el documento que se ha leído hasta el momento (o alguna forma analizada del mismo).

Motores de diseño

Los navegadores web se basan en 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 en diversos grados de cumplimiento.

Bibliotecas

Implementaciones DOM:

• libxml2
• MSXML
• Xerces es una colección de implementaciones DOM escritas en C++, Java y Perl
• xml.dom para Python
• XML para la implementación de DOM basada en JavaScript
• PHP. Gt DOM es una aplicación DOM del lado del servidor basada en libxml2 y aporta compatibilidad con el nivel 4 de DOM al lenguaje de programación PHP
• Domino es una implementación DOM del lado del servidor (Node.js) basado en el dom.js de Mozilla. Domino se utiliza en la pila MediaWiki con Editor Visual.
• Simple HtmlDom es un modelo de objeto de documento HTML simple en C#, que puede generar cadena HTML programáticamente.

API que exponen implementaciones DOM:

• JAXP (Java API for XML Processing) es una API para acceder a los proveedores de DOM
• Lazarus (Free Pascal IDE) contiene dos variantes del DOM - con formato UTF-8 y ANSI

Herramientas de inspección:

• DOM Inspector es una herramienta de desarrollo web