1. DOM Document Object Model

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
Tips:
2. 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 acci´n 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

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
 PROTOTYPE
– Script.aculo.us -> Efectos
 JQUERY
– JQUERY UI -> Efectos
 Mootol