El DOM (Document Object Model, Modelo de Objeto de Documento)

Qu es el DOM
El DOM es una API (Application Programming Interface, Interfaz de Programacin de Aplicacin) para XML (eXtensible Markup Language, Lenguaje de Marcado eXtensible)1 , lo que sin siglas quiere decir que es una capa de programacin intermedia que representa un documento y que nos permite modificarlo. Por decirlo de otra manera, es una serie de funciones y procedimientos que nos permiten trabajar sobre un modelo abstracto de un documento, que sirve como medio de comunicacin entre nuestro lenguaje de programacin en este caso JavaScript y los contenidos del documento.
Nota: El DOM es una interfaz independiente de cualquier lenguaje de programacin, pero aqu v oy a centrarme en su uso por medio de Jav aScript.

Pongamos un ejemplo. Tenemos un documento como el siguiente:

< ! D O C T Y P Eh t m lP U B L I C" / / W 3 C / / D T DX H T M L1 . 0S t r i c t / / E N " " h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 s t r i c t . d t d " > < h t m lx m l n s = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m l " > < h e a d > < t i t l e > T t u l od el ap g i n a < / t i t l e > < / h e a d > < b o d y > < h 1 > E n c a b e z a d o < / h 1 > < p > U np r r a f o < / p > < p > U np r r a f oc o n< ah r e f = " o t r a _ p a g i n a . h t m " > u nv n c u l o < / a > < / p > < u l > < l i > U ne l e m e n t od el i s t a < / l i > < l i > O t r oe l e m e n t od el i s t a < / l i > < / u l > < p > O t r op r r a f o < / p > < / b o d y > < / h t m l >

y por medio de JavaScript queremos modificar la lista. Cmo lo hacemos? Necesitamos que haya alguna manera de indicarle al agente de usuario por ejemplo, nuestro navegador que de todos los caracteres que componen ese documento nos interesa seleccionar los que componen el que es un elemento u l . Ah es donde entra en juego el DOM, que permite que el navegador se represente el documento como un rbol jerrquico, algo as:

El cdigo anterior, representado grficamente como un rbol jerrquico

Ahora s, el navegador no interpreta simplemente el documento como una serie de caracteres, sino que comprende que existen una serie de elementos con sus propiedades, y que la relacin entre todos ellos es una relacin estructural. As, por ejemplo, se puede pedir al navegador que devuelva una lista de los hijos del elemento u l .
Nota: Una v entaja de esta interfaz es que la manera de trabajar con ella es anloga a la forma de emplear selectores de CSS (Cascading Sty le Sheets, Hojas de Estilo en Cascada) basados en el rbol de parentesco [curso_3_3.php#selec-descen] que y a v imos.

El modelo resultante del documento original es un rbol, y una vez creado es este rbol lo que representa el navegador, y tambin lo que modificamos con nuestros scripts.

Los nodos del rbol

Como se ve, el DOM es un modelo jerrquico. En la representacin que he ofrecido antes, todo aquello situado en el origen o el final de una rama del rbol es un nodo, y los nodos establecen entre s relaciones de parentesco. Por ejemplo, el elemento u les hijo de b o d y , padre de dos l i , hermano de h 1y los tres p , descendiente de h t m ly ascendente del texto de cualquiera de los
l i .

As, todo documento puede representarse como un conjunto de nodos relacionados entre s. Adems, existe un nmero limitado de tipos de nodos que son suficientes para representar cualquier documento, y que han sido definidos por el W3C (World Wide Web Consortium, Consorcio de la Red Mundial):
NODO DESCRIPCIN Este nodo es nico, y representa el documento en s. Este nodo tambin es nico, y representa la referencia a la DTD (Document Ty pe Definition, Definicin de Tipo de Documento) del documento, es decir, la lnea del < . ! D O C T Y P E > Representa un fragmento del modelo total del rbol del documento. Representa un elemento. Representa un atributo de un elemento, en combinacin con su v alor. Representa un tex to dentro de un elemento, o de una seccin CData. Representa una seccin < . [ ! C D A T A [ ] ] > Representa la definicin de una entidad en la DTD. Representa una referencia de entidad. HIJOS? S No

D o c u m e n t D o c u m e n t T y p e

D o c u m e n t F r a g m e n t E l e m e n t A t t r T e x t C D a t a S e c t i o n E n t i t y E n t i t y R e f e r e n c e

S S2 No No S3 No No No No No

P r o c e s s i n g I n s t r u c t i o n Representa una instruccin de proceso. C o m m e n t N o t a t i o n

Representa un comentario en el cdigo XML. Representa una notacin definida en la DTD. Tipos de nodos en el DOM: descripcin y posibilidad de tener hijos o no

As, cuando el agente de usuario mapea un documento, lo que hace es asignar a cada nodo una constante que lo identifica. Dependiendo del tipo de nodo, ste aceptar una serie de propiedades y mtodos, y podr tener hijos o no. P R O P I EDA DES G EN ER A L ES DE L O S N O DO S Independientemente del tipo de nodo, hay una serie de propiedades generales que comparten, y que recojo en la tabla siguiente:

PROPIEDAD

DESCRIPCIN El nombre del nodo, que se define dependiendo del tipo de nodo. El v alor del nodo, que se define dependiendo del tipo de nodo. Un nmero que representa el tipo de nodo del que se trata. El documento al que pertenece el nodo. El primer hijo del nodo. El ltimo hijo del nodo. Una lista de los hijos de un nodo.

DEV UELV E Una cadena literal Una cadena literal

n o d e N a m e n o d e V a l u e

n o d e T y p e o w n e r D o c u m e n t f i r s t C h i l d l a s t C h i l d c h i l d N o d e s

Un nmero del 1 al 1 2 El documento Un nodo Un nodo Una matriz de nodos Un nodo, o n u l lsi el nodo es el primer hijo Un nodo, o n u l lsi el nodo es el ltimo hijo Un booleano Una matriz con los atributos

p r e v i o u s S i b l i n g El hermano anterior al nodo. n e x t S i b l i n g h a s C h i l d N o d e s a t t r i b u t e s

El hermano siguiente al nodo.

Indica si el nodo tiene hijos o no. Una lista con los atributos del nodo.

Propiedades generales de cualquier nodo

La sintaxis para acceder a estas propiedades es la misma que vimos para los objetos nativos de JavaScript [curso_4_2_f.php], por lo que no voy a detenerme a explicarla aqu. No obstante, vamos a emplear muchas de ellas en los ejemplos de las secciones siguientes. En cuanto a los mtodos comunes, les dedico su propia seccin: a p p e n d C h i l d ,
i n s e r t B e f o r e ,r e p l a c e C h i l d ,r e m o v e C h i l dy c l o n e N o d e[curso_4_3_d.php].

I DEN T I F I C A R EL T I P O DE N O DO En algn momento podemos necesitar identificar el tipo de un nodo, y para eso contamos con la propiedad n o d e T y p e , que devuelve un nmero. A continuacin recojo el tipo de nodo que corresponde a cada nmero:

TIPO DE NODO

CONSTANTE4

NMERO 1 2 3 4 5 6 7 8 9 10 11 12

E l e m e n t A t t r T e x t C D a t a S e c t i o n E n t i t y R e f e r e n c e E n t i t y P r o c e s s i n g I n s t r u c t i o n C o m m e n t D o c u m e n t D o c u m e n t T y p e D o c u m e n t F r a g m e n t N o t a t i o n

N o d e . E L E M E N T _ N O D E N o d e . A T T R I B U T E _ N O D E N o d e . T E X T _ N O D E N o d e . C D A T A _ S E C T I O N _ N O D E N o d e . E N T I T Y _ R E F E R E N C E _ N O D E N o d e . E N T I T Y _ N O D E N o d e . P R O C E S S I N G _ I N S T R U C T I O N _ N O D E N o d e . C O M M E N T _ N O D E N o d e . D O C U M E N T _ N O D E N o d e . D O C U M E N T _ T Y P E _ N O D E N o d e . D O C U M E N T _ F R A G M E N T _ N O D E N o d e . N O T A T I O N _ N O D E
Tipos de nodos identificados por el nmero dev uelto por n o d e T y p e

V A L O R ES Y N O M BR ES DE L O S N O DO S Adems, dos de las propiedades listadas anteriormente nos proporcionan datos sobre un nodo:
n o d e N a m ey n o d e V a l u e . Sin embargo, a diferencia de n o d e T y p e , su valor no es una constante,

sino que dependiendo del tipo de nodo el valor que devuelven difiere:

TIPO DE NODO

N O D E N A M E
El nombre del elemento, en may sculas El nombre del atributo, en minsculas

N O D E V A L U E n u l l
El v alor del atributo como una cadena literal El contenido del nodo como una cadena literal El contenido del nodo como una cadena literal

E l e m e n t A t t r T e x t C D a t a S e c t i o n E n t i t y R e f e r e n c e E n t i t y

# t e x t # c d a t a s e c t i o n
El nombre de la entidad de referencia El nombre de la entidad

n u l l n u l l
El contenido del nodo como una cadena literal El tex to del comentario como una cadena literal

P r o c e s s i n g I n s t r u c t i o n El nombre del destino de la

instruccin

C o m m e n t D o c u m e n t D o c u m e n t T y p e D o c u m e n t F r a g m e n t N o t a t i o n

# c o m m e n t # d o c u m e n t

n u l l

El nombre del tipo de documento n u l l

# d o c u m e n t f r a g m e n t
El nombre de la notacin

n u l l n u l l

Resultados de n o d e N a m ey n o d e V a l u e en relacin con el tipo de nodo

Con esto, hemos dado el primer paso para conocer el DOM, aunque lo visto no es ms que un pice del nivel ms bajo y bsico de esta interfaz. No obstante, esta informacin es necesaria si se quiere trabajar con ella, y avanzar en el estudio de los siguientes niveles.

Niveles del DOM

Nota: Dejo fuera de esta seccin tanto el DOM 0 como el DHTML (Dy namic HTML, HTML Dinmico)5 . Si alguien tiene curiosidad, remito a Level 0 DOM (ingls) [http://www.quirksmode.org/js/dom0.html] e Intermediate DOMs (ingls) [http://www.quirksmode.org/js/dom.html] en quirksmode.org (ingls) [http://www.quirksmode.org/].

A diferencia de otras recomendaciones como pueda ser la de XHTML (eXtensible HyperText Markup Language, Lenguaje de Marcado de HiperTexto eXtensible) 1.0, el DOM no se recoge en un nico documento, sino que consiste en tres niveles a da de hoy, y cada uno de ellos est a su vez compuesto por varias recomendaciones referidas a distintos aspectos

de la interfaz: DOM 1: DOM Core (ingls) [http://www.w3.org/TR/1998/REC-DOM-Level-119981001/level-one-core.html]: Define el conjunto mnimo de objetos e interfaces con los que manipular la estructura de un documento, ya se trate de un documento HTML (HyperText Markup Language, Lenguaje de Marcado de HiperTexto) o XML (eXtensible Markup Language, Lenguaje de Marcado eXtensible), o cualquier lenguaje basado en ste. DOM HTML (ingls) [http://www.w3.org/TR/1998/REC-DOM-Level-119981001/level-one-html.html]: Define una serie objetos y mtodos especficos de un documento HTML, y que por extensin tambin pueden aplicarse a un XHTML (eXtensible HyperText Markup Language, Lenguaje de Marcado de HiperTexto eXtensible). Es importante conocerlo bien porque en muchas ocasiones hay que emplearlo en un script como alternativa para Internet Explorer de mtodos del DOM Core 1, como por ejemplo g e t A t r i b u t ey s e t A t t r i b u t e .
Nota: Sobre la inconsistencia del soporte de Ex plorer para estos dos mtodos, v er Una nota sobre el soporte de getAttribute y setAttribute en Internet Ex plorer 6 [../articulos/2007 /set_y _getattribute_ie6.php].

DOM 2: DOM Core (ingls) [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core20001113/]: Extiende las interfaces definidas en el DOM Core 1, por ejemplo aadiendo soporte para espacios de nombre, y permitiendo as poder manipular secciones del documento asociadas a uno de ellos. DOM Views (ingls) [http://www.w3.org/TR/2000/REC-DOM-Level-2-Views20001113/]: Define lo que es una vista de un documento, es decir, el documento cuando es representado en un agente de usuario por ejemplo cuando se le aplica una hoja de estilo en un navegador, en contraposicin a la vista abstracta del documento en s. S, es casi metafsica. DOM Events (ingls) [http://www.w3.org/TR/2000/REC-DOM-Level-2-Events20001113/]: Especifica qu es un evento, sus tipos, y qu son los procesos de burbuja, captura y cancelacin6 . Adems, entre otras muchas cosas, define un mtodo maravilloso: a d d E v e n t L i s t e n e r(ingls) [http://www.w3.org/TR/2000/REC-DOM-Level-2-Events20001113/events.html#Events-EventTarget-addEventListener].

DOM Style (ingls) [http://www.w3.org/TR/2000/REC-DOM-Level-2-Style20001113/]: Define una interfaz para poder extraer informacin y manipular la/s hojas/s de estilo de un documento. DOM Traversal and Range (ingls) [http://www.w3.org/TR/2000/REC-DOMLevel-2-Traversal-Range-20001113/]: Define la interfaz avanzada y los mtodos con los que desplazarse por el rbol del documento, y para seleccionar partes del mismo. DOM HTML (ingls) [http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML20030109/]: Ampla el DOM HTML 1, e indica explcitamente que vuelve el anterior obsoleto. DOM 3: DOM Core (ingls) [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core20040407/]: Ampla an ms el contenido de DOM Core 2. DOM Load and Save (ingls) [http://www.w3.org/TR/2004/REC-DOM-Level-3LS-20040407/]: Define una interfaz con la que cargar documentos XML que puedan integrarse en el rbol de otro documento. DOM Validation (ingls) [http://www.w3.org/TR/2004/REC-DOM-Level-3-Val20040127/]: Define una interfaz que permite asegurar que la estructura de un documento modificado dinmicamente sigue siendo vlida. Para el nivel 3 del DOM hay muchos ms documentos que tratan otros aspectos de esta interfaz (ingls) [http://www.w3.org/DOM/DOMTR#DOMOthers], pero no tienen todava la categora de Recomendaciones. En las siguientes secciones slo veremos una nfima parte de lo que contiene la especificacin del DOM Core 1.

Notas
1. Existen otras API para XML, como SAX (Simple API for XML, API Simple para XML). 2. ste es el nico tipo de nodo que puede tener como hijo uno del tipo a t t r . 3. Slo acepta como hijos nodos de tipo T e x t . 4. El nmero devuelto por n o d e T y p ees una referencia; estrictamente, al mapear el rbol del

documento es una constante la que se asigna a cada nodo para identificarlo. En realidad la mayor parte de las veces para trabajar basta con el nmero, pero saber algo ms no hace dao nunca. 5. A pesar de que pueda parecerlo, DHTML no es ninguna especificacin de un lenguaje, slo un nombre comercial para englobar las propiedades de los modelos de capas y los mtodos con los que operar con ellas en las versiones 4 de Explorer y Netscape. Cosa del pasado, vamos. 6. Veremos estos conceptos al tratar a d d E v e n t L i s t e n e r[curso_4_3_e.php].

Con t en ido su jet o a h t t p://cr ea t iv ecom m on s.or g /licen ses/by /2 .5 /es/

CODEXEXEMPLA . ORG