Desde un punto de vista temático, los temas de esta unidad son:

• Definición de DOM
• DOM Nivel 1
• DOM y AJAX
• Ejercicios
• Resumen

En esta unidad se estudiará DOM (Document Object Model). DOM es utilizado en la técnica Ajax para actualizar los elementos y datos de un documento HTML o XML.

DOM (Modelo de Objetos de Documentos) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula un documento.

Con DOM, el programador puede construir documentos, navegar en su estructura, agregar, modificar y borrar elementos y contenido de los documentos.

La interfaz de programación DOM puede ser utilizada desde varios lenguajes de programación, como Java y JavaScript. En los ejemplos de esta unidad se utilizará desde JavaScript.

En la actualidad existen tres especificaciones:

• DOM nivel 1

  Consiste en dos módulos: DOM Core y DOM HTML. Este nivel es soportado completamente por Internet Explorer y FireFox
• DOM nivel 2

  Está construido sobre el nivel 1 y consiste de 14 módulos. Entre los módulos más importantes se encuentran el módulo de manejo de eventos de usuarios y el módulo de hojas de estilo. Este último representa los estilos que se le pueden asignar a un documento. Este nivel es soportado parcialmente por Internet Explorer y FireFox.
• DOM nivel 3

  Está construido sobre el nivel 2 y consiste de 16 módulos. Entre los módulos nuevos los más importantes son: el módulo que permite cargar y guardar documentos HTML y XML y el módulo que permite validarlos.

Siguiendo el siguiente link, podrá verse un ejemplo que utiliza DOM para modificar el contenido de un Documento HTML agregando texto y modificando su estilo.
Ver ejemplo

Usted puede ver la especificación de la interfaz Node en la siguiente dirección:
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#ID-1950641247

DOM define a Element como una especialzación de un Nodo. Usted puede ver la especificación de la interfaz Element en la siguiente dirección:
http://www.w3.org/TR/DOM-Level-1/level-one-core.html#ID-745549614

Sea el siguiente documento XML:

El mismo es representado por DOM de la siguiente manera:

DOM representa el documento XML del ejemplo con una estructura lógica muy similar a la de un Árbol, es decir, como una jerarquía de objetos de tipo Node (Nodo). En realidad, DOM representa los documentos como un bosque, el que puede contener más de un árbol.

Cada uno de los nodos del documento puede implementar una interfaz mas específica, como por ejemplo Element (representa a un Elemento XML) o HTMLInputElement (representa a una caja de texto HTML).

Como se puede apreciar en la figura, el elemento o nodo raíz Factura tiene dos nodos hijos: Cabezal y Detalle. El nodo Cabezal tiene dos nodos hijos: Nro y Fecha. Los nodos Nro y Fecha tienen cada uno un nodo de tipo texto.

Para navegar entre los hijos de un nodo, DOM ofrece la propiedad "childNodes" que aplicada a un nodo devuelve la colección de los nodos que son hijos de este. En el ejemplo, Factura.childNodes es una colección que contiene los nodos Cabezal y Detalle.

El modelo de Objetos DOM Nivel 1 consiste en 2 módulos o partes:

• DOM Core (Nucleo)
• DOM HTML

El DOM Core representa la funcionalidad utilizada para el manejo de documentos XML y sirve como base para el DOM HTML, el cual es específico para el manejo de documentos HTML. Es decir, las interfaces que brinda el DOM Core son extendidas por DOM HTML.

La diferencia entre el DOM Core y el DOM HTML es que el DOM HTML expone un número de métodos y propiedades consistentes con el modelo DOM Core que son específicos para el manejo de documentos HTML y más apropiados para desarrolladores que utilizan lenguajes de script.

Usted puede ver la especificación del Modulo DOM Core en la siguiente dirección:
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html

Usted puede ver la especificación del Modulo DOM HTML en la siguiente dirección:
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html

DOM describe a los documentos HTML y XML como una colección de objetos. Como se describió anteriormente, cada uno de estos objetos son Nodos, los cuales pueden implementar una interfaz más específica.

El objeto principal del modelo de objetos DOM es Document. Este representa un documento HTML o XML en su totalidad. Conceptualmente es la raíz del árbol y provee el acceso al documento HTML o XML.

DOM HTML brinda un conjunto de objetos para manipular los elementos HTML: los botones, las cajas de texto y las tablas, entre otros. Algunos ejemplos de estos objetos son:

• HTMLDivElement: representa al elemento HTML DIV.
• HTMLInputElement: representa al elemento HTML INPUT.
• HTMLButtonElement: representa al elemento HTML BUTTON.
• HTMLImageElement: representa al elemento HTML IMAGE.

DOM HTML también permite referenciar fácilmente a los elementos del HTML utilizando el caracter '.' para navegar entre ellos. Algunos ejemplos de navegación hacia elementos del documento HTML son:

• document.title: accede al título del documento, especificado en el cabezal del HTML (<head>)
• document.body: accede al cuerpo del documento HTML.
• document.forms: accede a la colección de todos los formularios del documento HTML.

Sea el siguiente Documento HTML:

La jerarquía de objetos del Documento HTML es la siguiente:

El objeto Document brinda métodos para acceder a los elementos del documento HTML o XML, algunos de los cuales son:

• Element getElementById (id_name) : retorna el nodo cuyo atributo id es id_name
• NodeList getElementsByName (elemento_name) : retorna la colección de nodos cuyo atributo nombre (name) es igual a elemento_name.
• NodeList getElementsByTagName (tag_name) : retorna la colección de nodos cuyo atributo etiqueta (tag) es igual a tag_name.

Considere el siguiente Documento HTML:

Utilizando JavaScript y DOM podemos acceder a los elementos del documento HTML.

El siguiente código JavaScript muestra cómo podemos acceder a los elementos DIV e INPUT del HTML anterior mediante el uso de DOM.

En la línea 3 del código anterior se accede al elemento DIV del HTML. Para esto se utiliza el método getElementById("mi_div") del objeto Document. El nodo devuelto es de tipo HTMLDivElement.

En la línea 4 del código anterior se accede al elemento INPUT del HTML. Para esto se utiliza el método getElementsByName("mi_input") el cual devuelve una colección de los elementos del documento HTML cuyo atributo name es 'mi_input'. Al acceder a la primera posición de esta colección (document.getElementsByName('mi_input')[0]) obtenemos un objeto de tipo HTMLInputElement.

En el siguiente ejemplo se muestra cómo podemos crear un documento a partir de un XML para acceder a sus propiedades utilizando algunos de los métodos descriptos anteriormente.

Considere el siguiente documento XML de nombre libros.xml:

A continuación se muestran dos funciones JavaScript. La primera importa los datos del archivo XML 'libros.xml' y crea el Document para dicho XML. Cuando se termina de cargar todos los datos, se ejecuta la segunda función, utilizada para extraer los datos cargados, a través de la API DOM. La importación del documento XML es específica para cada navegador Web. Mozilla importa los documentos XML a través del método document.implementation.createDocument(). En algunas versiones de Internet Explorer se utiliza un objeto ActiveX con el mismo propósito.

• importXML:

• 3: Se chequea que el navegador Web soporte document.implementation y luego document.implementation.createDocument.
• 5: En caso de soportar dichas propiedades y métodos, se crea el documento XML utilizando document.implementation.createDocument.
• 6: Se setea la función a ejecutar una vez terminada la carga del documento XML.
• 8: El navegador Internet Explorer no soporta document.implementation, por eso se chequea si puede crear objetos ActiveX.
• 10: Se crea el objeto ActiveX 'Microsoft.XMLDOM' que va a contener el Document.
• 11: Se establece la función que ejecutará una vez cargados los datos, es decir cuando el readyState del objeto ActiveX sea igual a cuatro.
• 17: En caso de no soportar ninguna de las alternativas anteriores, se muestra un alert y luego se retorna.
• 20: Finalmente se carga el archivo XML

• getElementosXML:

• 3: getElementsByTagName('libro') retorna un arreglo de todos los tags 'libro' del documento XML.
• 4: Se itera entre los elementos del arreglo para obtener las propiedades de cada libro.
• 6: Se obtienen todos los nodos cuya etiqueta tiene el valor 'titulo' para el libro 'i'. Como sabemos que tiene un solo elemento, se obtiene el nodo de la posición '0' en el arreglo. Luego se navega hacia el primer hijo, que es un nodo de tipo texto, utilizando la propiedad 'firstChild'. Luego se obtiene su valor utilizando la propiedad 'nodeValue'.
• 7 y 8: Se realiza lo mismo que en el paso anterior. Con las etiquetas "autor" y "portada" respectivamente.

Usted puede ver la especificación de la interfaz Document en la siguiete dirección:
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Document