tierra de nómadas - tallerWeb

Introducción al DOM

Saltar índice de contenido - Desplazarse al índice de navegación.

Contenido: Preámbulo. Niveles y módulos. El núcleo. Los otros módulos. Otras consideraciones. Comentarios.

Preámbulo

La familia de especificaciones DOM del W3C es, en esencia, un conjunto de interfaces mediante las cuales se puede acceder a los diversos elementos de un documento HTML o XML. Aunque normalmente nos topamos con el DOM en el contexto de los scripts asociados a documentos HTML, se trata de un modelo global, que puede ser utilizado por cualquier aplicación relacionada con la creación, edición, gestión, manipulación o representación de un documento.

Desde el punto de vista del desarrollo de páginas web, el modelo de objetos nos indica cuál es la naturaleza de la estructura de los documentos y nos provee de una serie de recursos para poder acceder a todos sus elementos, a la relación que existe entre ellos, a sus características, sus modos de representación, los eventos que soportan.

El DOM es, en cierto modo, una alternativa más generalizada a las obsoletas y unilaterales técnicas del HTML dinámico, pero sólo desde el punto de vista de la creación de ciertos efectos especiales. Las posibilidades de este modelo son más extensas y su implementación exige más rigor en todos los aspectos, tanto en la implementación de los agentes de usuario como en el desarrollo de documentos HTML.

El objetivo de este taller no va más allá de un vuelo de reconocimiento, y para entrar en detalles pueden visitarse las referencias oficiales, disponibles en http://www.w3.org/DOM/DOMTR. Aquí nos limitaremos a comentar muy brevemente los aspectos más generales, centrándonos con más detenimiento en lo que concierne a los ejemplos prácticos.

Niveles y módulos

El DOM se ha ido formulando progresivamente en niveles de implementación, y se ha dividido en módulos a fin de concretar objetivos. Actualmente las especificaciones disponibles son las siguientes:

El tercer nivel es todavía un borrador, y sólo debe tenerse en cuenta como algo que podrá utilizarse en un futuro. Aquí nos dedicaremos a los módulos presentes en el segundo nivel, y en su aplicación a los documentos HTML. En este contexto los módulos comunes (Núcleo y HTML) son similares en ambos niveles, y los ejemplos que se exponen serán correctamente interpretados por agentes de usuario que sólo implementen el nivel 1.

El núcleo

El módulo de núcleo engloba objetos e interfaces básicas, suficientes para acceder a los elementos y manipularlos si procede. Un documento HTML o XML es una jerarquía de objetos, y debido a que el término elemento es utilizado de forma muy concreta dentro del DOM, a partir de ahora nos referiremos a esos objetos como nodos. En función del tipo, los nodos pueden o no incluir a su vez otros nodos. Por ejemplo, para el siguiente documento...

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  <head>
    <title>El legado de HAL9000</title>
    <!-- (ampliar si es posible) -->
  </head>
  <body>
    <p>Daisy, Daisy...</p>
  </body>
</html>

... la jerarquía de nodos sería la siguiente:

En el esquema anterior están presentes los tipos de nodo más normales de los documentos HTML. Existe otro tipo común de nodo, denominado Attr, que representa un atributo de un nodo Element, y que no se considera parte del árbol del documento.

En pocas palabras, con el módulo Núcleo se pueden crear y eliminar nodos, acceder a los existentes y modificar sus propiedades. También incluye interfaces especiales, como los conjuntos de nodos, que pueden ser ordenados (como los nodos que son hijos de otro) o no ordenados (como los nodos Attr asociados a un nodo Element).
Ejemplos DOM Núcleo.

Los otros módulos

DOM html
El módulo HTML es un conjunto de recursos que facilitan las tareas más comunes que se pueden realizar en un documento y que mantiene cierta compatibilidad con algunas técnicas del HTML dinámico. Esto se consigue especificando los elementos HTML como objetos, y sus atributos como propiedades, amén de otros mecanismos de conveniencia.
Ejemplos DOM HTML.
DOM Vistas
Este pequeño módulo se ocupa de definir una interfaz para la representación de un documento, con el objetivo de dar soporte formal a mecanismos de otros módulos, como eventos o estilo.
DOM Eventos
El diseño de un modelo genérico de registro y flujo de eventos es el objetivo fundamental del módulo. En el nivel actual se incluyen, además de los eventos genéricos lanzados por los atributos de evento definidos en la especificación HTML, los relacionados con la interfaz de usuario, con el ratón, y también los derivados del cambio en la estructura de un documento (mutaciones). La "cronología" de un evento pasa por dos etapas, en la primera, denominada captura, la acción es percibida por los elementos que contienen al elemento objetivo desde la raíz jerárquica. En la segunda, denominada burbujeo, el evento se propaga en el sentido contrario, pasando por el nodo padre, el abuelo, etc. DOM Eventos proporciona recursos para agregar perceptores de eventos y para manejarlos.
Ejemplos DOM Eventos.
DOM Estilo
Existen dos módulos vinculados a CSS. El primero está relacionado con las hojas de estilo como tales, y el segundo con sus componentes (reglas, selectores, declaraciones, estilos computados, etc.). Su implementación ofrece un control total sobre el estilo de un documento, pudiendo crear, habilitar o deshabilitar hojas de estilo, agregar, modificar o retirar reglas, y analizar el impacto sobre el documento. Adicionalmente se incluye una interfaz extendida que permite la aplicación de estilo en línea, de forma medianamente compatible con técnicas utilizadas en el HTML dinámico.
Ejemplos DOM Estilo.
DOM Navegación y Rango
El término navegación alude aquí al movimiento por el árbol del documento (serán bien recibidas traducciones más decentes del término anglosajón traversal). El otro módulo, define la utilización de rangos, porciones de contenido que no tienen por qué coincidir con un nodo determinado, permitiendo facilitar ciertas tareas.
Ejemplos DOM Navegación y Rango.

Otras consideraciones

El DOM constituye una potente herramienta, pero no está de más tener en cuenta que cualquier nuevo contenido que se crea utilizando estas técnicas, está supeditado a que el navegador soporte la implementación usada. Por tanto es aconsejable valorar la situación antes de utilizar aquellos métodos que añaden información al documento. Por otro lado, y hasta que el nivel 3 (en concreto el módulo validación) sea una realidad, el autor sigue siendo responsable de que un documento inicialmente válido lo siga siendo tras ejecutar un script. De manera que, parafraseando al sargento Phil Esterhaus de la serie "Hill Street Blues", tengan cuidado ahí fuera.


Comentarios

Para Merchy

Publicado por Yrvin, 30/03/07, 06:09

Merchy cuando creas la tabla olvidaste lo ke muchos programadores olvidan: el tbody tienes ke crealo

Para Merchy

Publicado por Yrvin, 30/03/07, 06:10

Merchy cuando creas la tabla olvidaste lo ke muchos programadores olvidan: el tbody tienes ke crealo

gcxpjwf apbmyvuof

Publicado por gcxpjwf apbmyvuof, 08/04/07, 04:40

xfhtaeigd fgpznlvuk uvbykf gwcqj cduk fntia ftzhwiqrv

pasar un documento html a dom

Publicado por oanda, 12/04/07, 10:35

quiero pasar un documento html a dom, y no encunetro el modo, me podeis ayudar???

añladiendo al comentario de antes

Publicado por , 14/04/07, 09:53

tengo que parsear el documento html a dom programando en java en jtbuilder.

zsat qyzgeoa

Publicado por zsat qyzgeoa, 27/11/07, 02:47

vshnxtza sbkc tgzpxrynd erzvm yjmgrtpnd cvgyrbow dguhqml

soy lerdo

Publicado por efrain, 10/01/08, 06:30

viva naruto!

Ver el codigo html generado por DOM

Publicado por jadriancz, 18/07/08, 02:40

Hola tengo una duda espero que me pueda ayudar como puedo ver el codigo generado dinamicamente por DOM, ya que necesito los input generado para su manupulacion espero que me puedan ayudar saludosss

Publicado por maguz, 23/12/08, 03:21

Con el firebug de Mozzila , puedes ver el codigo generado por el dom

Ver comentarios anteriores...
Agregar comentario...



Sugerir cualquier cosa, contactar, etc...

Avanzada...

23/11/2002. sysifus. Taller nº 6.

Estás en: tierra de nómadas > tallerWeb > Introducción al DOM.