DEW · Tema 6: Modelo de objetos del documento en javascript

Modelo de Objetos del Documento (DOM) y Gestión de Eventos en JavaScript

Resumen Ejecutivo

El Modelo de Objetos del Documento (DOM) representa la infraestructura crítica que permite a JavaScript interactuar de manera dinámica con documentos HTML y XML. Concebido como una Interfaz de Programación de Aplicaciones (API), el DOM organiza el contenido de una página web en una estructura jerárquica de "árbol de nodos", donde cada elemento, atributo y fragmento de texto es un objeto manipulable en tiempo real.

Los hallazgos principales de este análisis técnico incluyen:

* Estructura Jerárquica: El documento se transforma en un árbol donde el nodo raíz es siempre document. Las modificaciones en este árbol se reflejan instantáneamente en el navegador del cliente.
* Capacidad de Manipulación: JavaScript posee herramientas para crear, borrar, mover y modificar cualquier componente del documento, desde celdas de tablas hasta estilos y contenidos textuales.
* Gestión de Eventos: El sistema de eventos es el motor de la interactividad. Existen múltiples modelos de registro (Línea, Tradicional, W3C y Microsoft), siendo el modelo del W3C el estándar actual, aunque persisten retos de compatibilidad entre navegadores (especialmente con versiones antiguas de Internet Explorer).
* Fragmentación de Estándares: Aunque el W3C dicta los niveles del DOM (1, 2 y 3), la implementación varía entre navegadores, obligando a los desarrolladores a emplear técnicas de programación cross-browser.


--------------------------------------------------------------------------------


1. Fundamentos y Estructura del DOM

El DOM define los objetos, propiedades y métodos para acceder y manipular elementos de un documento. Es el responsable de transformar el código fuente en una estructura de objetos interconectados.

1.1. Niveles del DOM (W3C)

La especificación ha evolucionado en diferentes etapas, no siempre sincronizadas con el desarrollo de los navegadores:

* DOM Core: Modelo estándar para cualquier documento estructurado.
* DOM XML: Específico para documentos XML.
* DOM HTML: Define el acceso y manipulación de elementos HTML.
* Evolución Cronológica: El Nivel 1 incluyó lo que se conoce extraoficialmente como "DOM Nivel 0". El Nivel 2 introdujo el modelo de eventos y estilos, mientras que el Nivel 3 continúa expandiendo estas capacidades.

1.2. El Árbol de Nodos y Tipos de Elementos

El navegador transforma cada etiqueta HTML en un nodo. Se identifican 12 tipos de nodos, aunque los más relevantes son:

1. Document: Nodo raíz de todo el árbol.
2. Element: Representa las etiquetas HTML; es el único que puede contener otros nodos o atributos.
3. Attr: Representa los pares atributo-valor de una etiqueta.
4. Text: Contiene el texto encerrado por una etiqueta.
5. Comment: Representa los comentarios en el código HTML.


--------------------------------------------------------------------------------


2. Acceso y Manipulación de Nodos

Para interactuar con el DOM, es imperativo que la página esté completamente cargada. El acceso puede ser directo o mediante navegación por la jerarquía (padres e hijos).

2.1. Métodos de Acceso Directo

Método Descripción Retorno
getElementById(id) Acceso directo por identificador único. Un solo nodo.
getElementsByName(name) Busca elementos por el atributo name. Colección de nodos.
getElementsByTagName(tag) Busca elementos por su etiqueta (ej. input, td). Colección de nodos.

Nota técnica: Las colecciones obtenidas no son arrays estrictos; permiten lectura y recorrido, pero no soportan métodos como push() o pop().

2.2. Manipulación de Atributos y Texto

* Atributos: Se gestionan mediante la colección attributes o métodos específicos como getAttribute(), setAttribute() y removeAttribute(). También es posible el acceso directo como propiedad del objeto (ej. elemento.type = "password").
* Nodos de Texto: Se accede a ellos mediante childNodes[] o firstChild. El contenido se recupera o modifica con la propiedad nodeValue. Cabe destacar que el tamaño máximo almacenable en un nodo de texto puede variar según el navegador.

2.3. Creación y Borrado de Nodos

El DOM permite la actualización dinámica del documento mediante:

* Creación: createElement(etiqueta) y createTextNode(texto).
* Inserción: appendChild(nuevoNodo) (al final), insertBefore(nuevo, referencia) o replaceChild(nuevo, viejo).
* Clonación: cloneNode(true) para copiar un nodo y sus descendientes.
* Eliminación: element.removeChild(referenciaAlHijo).


--------------------------------------------------------------------------------


3. Propiedades y Métodos del Objeto Nodo (Nivel 2)

El estándar Nivel 2 del W3C define propiedades críticas para la navegación entre nodos, soportadas de forma extensiva por navegadores modernos (Mozilla, Safari, Chrome) y parcialmente por versiones antiguas de Internet Explorer.

Propiedad Descripción
nodeName / nodeValue Nombre y valor según el tipo de nodo.
parentNode Referencia al contenedor padre.
childNodes Array con todos los hijos en orden.
firstChild / lastChild Referencias al primer y último hijo.
previousSibling / nextSibling Referencia a nodos hermanos contiguos.


--------------------------------------------------------------------------------


4. Gestión y Modelos de Eventos

Los eventos permiten que JavaScript reaccione a las acciones del usuario (ratón, teclado) o estados del navegador (carga del documento).

4.1. Modelos de Registro

1. En línea: Eventos como atributos HTML (onClick). Obsoleto por mezclar estructura y lógica.
2. Tradicional: Asignación como propiedad del objeto (elemento.onclick = funcion). Muy compatible pero limitado.
3. Avanzado W3C: Usa addEventListener() y removeEventListener(). Permite múltiples manejadores y control de fases.
4. Microsoft: Usa attachEvent() y detachEvent(). No soporta la palabra reservada this.

4.2. Flujo de Disparo y Propagación

Cuando los elementos están anidados, el orden de ejecución se define por tres modelos:

* Captura: Del exterior hacia el interior (padre a hijo).
* Burbujeo (Bubbling): Del interior hacia el exterior (hijo a padre).
* Modelo W3C: Ejecuta primero la fase de captura y luego la de burbujeo.

Se pueden controlar estos flujos mediante preventDefault() (cancela la acción por defecto) y stopPropagation() (detiene el burbujeo).

4.3. Tipos de Eventos Críticos

El análisis destaca los eventos de ratón y teclado por su complejidad y frecuencia de uso:

* Ratón: click, dblclick, mousedown, mouseup, mouseover, mousemove y mouseout.
* Teclado: keydown (presión inicial) y keypress (tras la presión).
* Otros: Formulario, carga de marcos (frame) y mutación (cambios estructurales).


--------------------------------------------------------------------------------


5. Consideraciones de Compatibilidad (Cross-Browser)

Dada la implementación dispar del DOM y los eventos entre fabricantes, es fundamental programar soluciones que detecten las capacidades del navegador. Un ejemplo es la creación de funciones envolventes que prioricen addEventListener del W3C, seguidas por attachEvent de Microsoft y, finalmente, el registro en línea como último recurso. Esta metodología garantiza que las aplicaciones web funcionen correctamente en un entorno multi-cliente.

Guía de Estudio: Modelo de Objetos del Documento (DOM) y Gestión de Eventos en JavaScript

Esta guía de estudio ha sido diseñada para profundizar en el conocimiento del Modelo de Objetos del Documento (DOM) y el manejo de eventos en JavaScript, basándose en los estándares del W3C y las implementaciones en diferentes navegadores.


--------------------------------------------------------------------------------


Cuestionario de Repaso (Preguntas de respuesta corta)

1. ¿Qué es el Modelo de Objetos del Documento (DOM) y quién es el responsable de su estándar? El DOM es una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, permitiendo manipular su contenido, estructura y estilo. El responsable de su desarrollo y mantenimiento es el World Wide Web Consortium (W3C).

2. Explique la diferencia entre los métodos getElementById() y getElementsByTagName(). getElementById() permite acceder directamente a un único elemento mediante su identificador único (ID), devolviendo solo ese nodo. Por otro lado, getElementsByTagName() obtiene una colección de todos los elementos cuya etiqueta coincida con el parámetro indicado, permitiendo acceder a ellos mediante índices.

3. ¿Qué representa la estructura conocida como "árbol de nodos" en el contexto del DOM? Es una representación jerárquica donde el navegador transforma el documento HTML en un conjunto de objetos conectados llamados nodos. El nodo raíz es siempre document, y a partir de él se despliegan nodos de tipo elemento, texto o atributo, estableciendo relaciones de padres e hijos.

4. ¿Cuáles son los cinco tipos de nodos más utilizados habitualmente por los programadores? Los tipos más comunes son: Document (nodo raíz), Element (etiquetas HTML), Attr (atributos de las etiquetas), Text (contenido textual dentro de una etiqueta) y Comment (comentarios en el código HTML).

5. Describa brevemente cómo se accede y se modifica un nodo de tipo atributo. Se puede acceder a través de la colección attributes de un elemento, usando nodeName para el nombre y nodeValue para el valor. También existen métodos directos como getAttribute() para consultar el valor, setAttribute() para crear o modificarlo, y removeAttribute() para eliminarlo.

6. ¿Qué función cumplen los métodos createElement() y appendChild()? createElement() se utiliza para crear un nuevo nodo de tipo elemento (como un párrafo o una imagen) en la memoria. appendChild() se encarga de insertar ese nuevo nodo (u otro existente) como el último hijo de un nodo específico en el árbol del DOM.

7. ¿En qué consisten los modelos de "burbujeo" y "captura" de eventos? El modelo de captura dispara los eventos desde el elemento más externo hacia el interior hasta llegar al objetivo. El modelo de burbujeo funciona a la inversa, disparando el evento desde el elemento interno hacia afuera, subiendo por la jerarquía de ancestros.

8. ¿Cuál es la principal desventaja del modelo de registro de eventos en línea? Su principal desventaja es que integra el código JavaScript directamente dentro de los atributos HTML, lo cual no es recomendado actualmente. La práctica moderna busca la separación total entre la estructura del documento (HTML) y la lógica de programación (JavaScript).

9. ¿Qué diferencia existe entre el modelo de eventos del W3C y el de Microsoft (IE)? El W3C utiliza addEventListener() y permite elegir entre las fases de captura o burbujeo, mientras que el modelo de Microsoft usa attachEvent(), solo admite burbujeo y no permite el uso de la palabra reservada this para referenciar al objeto.

10. ¿Cómo se puede evitar que un evento realice su acción por defecto o se siga propagando? Para cancelar la acción predeterminada (como el envío de un formulario) se utiliza el método preventDefault(). Para detener la propagación del evento hacia otros elementos en la fase de burbujeo, se emplea el método stopPropagation().


--------------------------------------------------------------------------------


Clave de Respuestas

Pregunta Concepto Clave Referencia de Verificación
1 API / W3C Definición fundamental del DOM.
2 Métodos de acceso Diferencia entre ID único y colecciones por etiqueta.
3 Jerarquía Relación padre-hijo y nodo raíz document.
4 Tipología de nodos Identificación de los 5 nodos principales (Document, Element, Attr, Text, Comment).
5 Manipulación de atributos Uso de setAttribute, getAttribute y la colección attributes.
6 Creación/Inserción El flujo de crear en memoria e insertar en el árbol.
7 Propagación Dirección del flujo del evento (afuera-adentro vs adentro-afuera).
8 Separación de capas Crítica al modelo de eventos en línea por mezclar HTML y JS.
9 Incompatibilidad Comparativa entre addEventListener y attachEvent.
10 Control de flujo Funcionalidad de preventDefault y stopPropagation.


--------------------------------------------------------------------------------


Temas de Ensayo Sugeridos

1. Evolución y Niveles del DOM: Analice el desarrollo del DOM desde el Nivel 0 hasta el Nivel 3, discutiendo cómo cada etapa ha añadido funcionalidades para estilos, eventos y estructuras, y el papel de los navegadores en la adopción de estos estándares.
2. Manipulación Dinámica de Documentos: Explique detalladamente el proceso de modificar una página web en tiempo real mediante el DOM, cubriendo la selección de nodos, la creación de nuevos elementos y la gestión de contenido textual.
3. El Objeto Evento y su Importancia en la Interactividad: Discuta cómo el objeto Event permite a los desarrolladores capturar información específica del usuario (teclado y ratón) y por qué es la base de la interactividad en las aplicaciones web modernas.
4. Desafíos del Desarrollo Cross-browser: Evalúe las dificultades que enfrentan los programadores debido a las implementaciones parciales del DOM y los eventos en diferentes navegadores, y proponga soluciones mediante funciones que unifiquen el comportamiento.
5. Análisis Comparativo de los Modelos de Propagación: Compare los modelos de captura y burbujeo, y explique cómo el modelo integrado del W3C permite un control preciso sobre el orden de ejecución de los scripts en elementos anidados.


--------------------------------------------------------------------------------


Glosario de Términos Clave

* API (Application Programming Interface): Interfaz de programación que define un conjunto de reglas y objetos para que diferentes programas se comuniquen; en este caso, entre JavaScript y el documento.
* Atributo (Attr): Nodo que representa las propiedades de una etiqueta HTML (como id, name, type, etc.) expresadas como pares nombre-valor.
* Burbujeo (Bubbling): Fase de disparo de eventos que se propaga desde el elemento hijo hacia el padre.
* Captura (Capture): Fase de disparo de eventos que se propaga desde el elemento raíz hacia el elemento objetivo.
* Colección (Collection): Estructura similar a un array que contiene nodos del DOM; permite recorrerse pero no admite métodos de array como push o pop.
* DOM (Document Object Model): Estructura jerárquica de objetos que representa un documento HTML o XML para su manipulación programática.
* Evento (Event): Acción detectada por el navegador, ya sea iniciada por el usuario (click, tecla presionada) o por el sistema (carga de página), que puede disparar un script.
* Nodo (Node): Cada uno de los elementos u objetos individuales que componen el árbol del DOM.
* W3C (World Wide Web Consortium): Organismo internacional que produce estándares para asegurar el crecimiento a largo plazo de la Web.
* W3C DOM Nivel 2: Especificación que introdujo mejoras significativas, incluyendo el modelo de eventos avanzado y mayor soporte para estilos y jerarquías.