Arquitecturas Distribuidas

Tema 3. V. DOM
Arquitecturas Distribuidas 09/10
1
V. Document Object Model (DOM)
1. ¿Qué es DOM?
2. DOM Level 1
3. DOM Level 1 Extensiones
4. Bibliografía
Arquitecturas Distribuidas 09/10
2
¿Qué es DOM?
 Interfaz (API) neutral (respecto a la plataforma y el
lenguaje de programación) para el acceso y modificación
dinámica del contenido, estructura y estilo de un
documento estructurado.
 ¿Para qué sirve? Procesado de documentos estructurados
mediante lenguajes de marcas (HTML, XML, etc.).
 Estándar para trabajar con estos documentos
 Al procesar un documento con DOM, el visor (navegador)
además permite representar las modificaciones
dinámicamente.
 Hay 3 especificaciones: DOM Level 1, 2 y 3.
 Multitud de lenguajes y navegadores implementan la
especificación: Javascript, PHP, Java, etc
Arquitecturas Distribuidas 09/10
3
DOM Level 1
 Funcionalidad:
 Crear documentos.
 Navegar su estructura.
 Añadir, modificar o eliminar elementos y contenido.
 Los documentos procesados con DOM tienen una
estructura tipo árbol.
 Los documentos se modelan como objetos (Programación
Orientada a Objetos): tipos de datos con propiedades y
funciones.
 Los datos se encapsulan dentro de esos objetos.
 Los objetos proporcionan funciones para manipular los
datos y para relacionarse con el resto de objetos
Arquitecturas Distribuidas 09/10
4
DOM Level 1
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River,
Charlie</TD>
<TD>Dorian</TD> </TR>
</TBODY>
</TABLE>
Arquitecturas Distribuidas 09/10
5
DOM Level 1
 DOM representa los documentos como una jerarquía de objetos Node
 De esta clase base derivan objetos más especializados: Element,
Document, Text, etc.
 Element representa una etiqueta, por tanto, su contenido será el nombre de la
etiqueta.
 Text representa el texto (que suele ir entre las etiquetas de inicio y cierre que lo
contienen), por tanto, su contenido será el texto en sí.
 Ver ejemplo en transparencia siguiente.
 Además, las colecciones de objetos se tratan mediante las interfaces
NodeList y NamedNodeMap
 Cualquier cambio que se haga en el documento se refleja automáticamente
en los NodeList y NamedNodeMap
 NodeList es una lista doblemente enlazada de nodos.
 NamedNodeMap es una tabla de claves-valores.
 Si obtengo una lista de nodos y después borro uno de los nodos del documento,
se eliminará dicho nodo de la lista también.
Arquitecturas Distribuidas 09/10
6
Ejemplo
 <sentence>This is an <bold>important</bold>
idea.</sentence>
ELEMENT: sentence
+ TEXT: This is an
+ ELEMENT: bold
+ TEXT: important
+ TEXT: idea.
Elemento padre
Los nodos hijos
Hijo de bold y nieto de
sentence
Arquitecturas Distribuidas 09/10
7
DOM Level 1
 Relaciones entre elementos: parent,
child, siblings
 Node proporciona funciones para
trabajar con ellos:
 createElement(), appendChild(),
removeChild(), replaceChild();
 parentNode, childNodes, previousSibling,
nextSibling, attributes
 Element: hereda las funciones de Node y
proporciona funciones adicionales
 getElementsByTagName, getAttribute
Arquitecturas Distribuidas 09/10
8
DOM Level 1 Extensiones
 La especificación se extiende con definiciones específicas
para HTML y otros lenguajes particulares como MathML o
SVG
 Por ejemplo, con HTML tenemos: HTMLElement,
HTMLDocument, etc.
Arquitecturas Distribuidas 09/10
9
Referencias y bibliografía

Especificación DOM: http://www.w3.org/DOM/
Arquitecturas Distribuidas 09/10
10