DOM Document Object Model

1
DOM Document Object Model

• Fernando Rodrìguez

2
Que es DOM

• Dom es una plataforma o interfaz neutral que
  permite a los programas y scripts accesar o
  modificar el contenido, estructura y estilo de
  los documentos.
• Una interfaz de programación para XML
• Un estandar W3C
• Un modelo de objetos para XML

3
Origen del DOM

• Recomendaciones HTML (HTML 2.0-4.0)
• 1995/1999
• Separar el contenido de la presentaciòn mediante
  hojas de estilo
• Respuesta a las demandas de usuarios, por lo que
  se aumentaba el nùmero de etiquetas

4
Origen del DOM

• Recomendaciones XML
• 1998 se aprobò la recomendaciòn XML 1.0
• XHTML
• 2000 aprobaciòn de XHTML 1.0
• 2002 XHTML segunda ediciòn

5
Origen del DOM

• ECMAScript
• (European Computer Manufacturers Association)
• Normas ECMA-262 y ECMA-357 (1998/2004)
• Javascript 1.0 incorporaba una forma de acceder y
  manipular los elementos de la pàgina y recibiò el
  nombre de DOM nivel 0.
• DHTML

6
Requerimientos generales

• No dependiende del lenguaje y de la plataforma
• Un nùcleo aplicable a HTML, CSS y XML
• Construcciòn y destrucciòn del documento
• No se requiere IU para implementar el modelo

7
DOM nivel 1- Navegación Estructural

• Núcleo La sección del Núcleo DOM1 provee un
  conjunto de bajo nivel de interfaces que pueden
  representar a cualquier documento estructurado
• HTML La sección de HTML nivel 1 provee
  interfaces adicionales de más alto nivel que se
  utilizan junto con las interfaces definidas en el
  nivel 1 del núcleo para proporcionar una vista
  conveniente de un documento HTML.
• Interfaces DOM1 incluyen la interfaz para el
  Documento, Nodos, Atributos, Elementos, y el
  texto.

8
DOM nivel 1- Manipulación de documentos

• Proveer una manera de agregar, remover y cambiar
  elementos y/o etiquetas en la estructura del
  documento.
• Proveer una manera de añadir, remover o cambiar
  los atributos en a estructura del documento.
• Las operaciones o su combinación deberán asegurar
  y restaurar la consistencia antes de que hagan el
  return.

9
DOM nivel 1- Manipulación de contenido

• Proveer una manera de determinar el elemento
  contenedor desde cualquier parte del documento
• Proveer una manera de navegar el contenido

10
Estructura DOM

1. Elemento Raíz
2. Cualquier nodo excepto el raíz tiene exactamente
   un nodo padre
3. Un nodo puede tener cualquier número de hijos
4. Una hoja es un nodo con ningún hijo
5. Siblings. Son nodos con el mismo nodo padre

11
DOM-DOCUMENT
12
DOM-NODO (TIPOS)
13
DOM-NODO(DEFINICION)
14
NODOS-COMPARATIVO
15
DOM-NODELIST
16
DOM-NAMEDNODEMAP
17
COM-CHARACTERDATA
18
DOM-ATTRIBUTE
19
DOM-ELEMENT
20
DOM-TEXT
21
DOM-COMMENT Y CDATA
22
Ejemplos
1. books.xml
2. file.html
3. String.html
4. consultas
5. modificaciones

• Tips
• Un error común es creer que el elemento contiene
  cierto texto, lo cierto es que el texto es
  almacenado en un nodo texto

23
DOM nivel 2- Modelo de eventos

• El modelo deberá ser lo suficientemente rico para
  crear documentos completamente interactivos.
• Todos los elementos serán capaces de generar
  eventos
• Proveer eventos de interfaz y lógicos
• El mecanismo de eventos permitirá el overriding
  del comportamiento por default
• El modelo de eventos proveerá un mecanismo por el
  cual eventos para elementos específicos podrán
  ser recibidos por un ancestro en la jerarquía DOM
• Los eventos deberán ser sincronos

24
Tipos de eventos

• UI events
• Eventos de la inerfaz de usuario, generados por
  un dispositivo externo
• UI Logical events
• Independientes del usuario,como focus, cambio de
  mensajes o triggers.
• Mutation events
• Eventos causados por una accin que modifica la
  estructura del documentos.
• Capturing
• El proceso por el cual un evento puede ser
  manejado por un padre del objetivo del evento
  antes que sea manejado por este.
• Bubbling
• El proceso por el cual un evento se propaga a
  traves de los ancestros despues de haber sido
  manejado por el objeto generador.

25
DOM nivel 2- Modelo de hojas de estilo

• El modelo deberá ser extensible a otros formatos
  en un futuro
• Habra un modelo de hojas de estilos embedido,
  donde el core podrà ser aplicable a otros
  lenguajes de estilos.
• Los estilos podran ser agregados, removidos o
  modificados
• Lo anterior aplica para hojas de estilos ligadas,
  importados o alternativas.

26
DOM nivel 2- Modelo de rangos

• Vista lineal
• Permitirá consultas y ediciones de funcionalidad
  basados en un rango de texto en lugar de un árbol
  de nodos
• Live
• Ediciones en el rango modificando el árbol
  subyacente
• Operaciones
• Creación de un objeto rango
• Extracción de texto desde un rango con o si
  etiquetas
• Inserción y borrado de texto dentro de un rango
• Inserción borrado de cierta estructura dentro de
  un rango

27
DOM nivel 2- Modelo de recorrido

• Deberá de ser capaz de visualizar vistas
  filtradas sin comentarios o referencias.
• Tener un iterador robusto

28
Ejemplos
1. estilos
2. eventos1
3. eventos2
29
DOM nivel 3- Requerimientos generales

• Modificaciones al núcleo para solucionar
  problemas de los niveles anteriores
• Modificaciones al modelo de eventos
• Lectura y escritura de documentos (XML-
  estructura de árbol)

30
Frameworks

• DOJO