UNIVERSIDAD TECNICA PARTICULAR DE LOJA Tema: EL DOM Expositora: Marisela Valle
¿ QUE ES EL DOM? <ul><li>El Document Object Model (una traducción al español no literal, pero apropiada, podría ser Modelo...
DESARROLLO DEL DOM  <ul><li>La primera vez que el DOM se utilizó, fue con el navegador  Netscape  en su versión 2.0 Este D...
DE DÓNDE VINO EL MODELO DE OBJETOS DEL DOCUMENTO <ul><li>El DOM se originó como una especificación para permitir que los p...
ESTABLECIENDO REFERENCIAS A OBJETOS  <ul><li>El DOM define la manera en que  objetos  y elementos se relacionan entre sí e...
MANIPULANDO LAS PROPIEDADES Y FUNCIONES DE OBJETOS  <ul><li>Los objetos computacionales de la misma forma que cualquier ob...
<ul><li>La manipulación de  objetos  sigue los mismos principios que en el  lenguaje de programación  que se esté utilizan...
MANIPULANDO EVENTOS  <ul><li>Un  evento  desde del punto de vista computacional ocurre cuando alguna situación cambia en l...
<ul><li>Otra forma de manipular eventos en  javascript  al crear  páginas para la web  es tratándolos como propiedades de ...
<ul><li>GRACIAS POR SU ATENCION </li></ul>
Upcoming SlideShare
Loading in...5
×

Exposicion

248

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Exposicion

  1. 1. UNIVERSIDAD TECNICA PARTICULAR DE LOJA Tema: EL DOM Expositora: Marisela Valle
  2. 2. ¿ QUE ES EL DOM? <ul><li>El Document Object Model (una traducción al español no literal, pero apropiada, podría ser Modelo en Objetos para la representación de Documentos), abreviado DOM, es esencialmente un modelo computacional a través del cual los programas y scripts pueden acceder y modificar dinámicamente el contenido, estructura y estilo de los documentos HTML y XML . Su objetivo es ofrecer un modelo orientado a objetos para el tratamiento y manipulación en tiempo real (o de forma dinámica) a la vez que de manera estática de páginas de internet . </li></ul><ul><li>El responsable del DOM es el consorcio W3C (World Wide Web Consortium). </li></ul>
  3. 3. DESARROLLO DEL DOM <ul><li>La primera vez que el DOM se utilizó, fue con el navegador Netscape en su versión 2.0 Este DOM se conoce también como el modelo básico, o el DOM.Nivel 0. Internet Explorer 3.0 fue el primer navegador de Microsoft que utilizó este nivel. Netscape 3.0 empezó a utilizar rollovers. Microsoft empezó a usar rollovers en Internet Explorer 4.0. Netscape 4.0 agregó la capacidad de detectar eventos ocurridos en el ratón y el teclado. Una característica de este navegador fue el uso de capas (layers). Sin embargo, esta capacidad se ha eliminado en los navegadores creados posteriormente. </li></ul><ul><li>En Internet Explorer 4.0 todos los elementos de una página web se empezaron a considerar objetos computacionales con la capacidad de ser modificados. Debido a las diferencias en estos navegadores, el World Wide Web Consortium emitió una especificación denominadada DOM.Nivel 1 en el mes de Octubre de 1998 en la cual se consideraron las características y manipulación de todos los elementos existentes en los archivos HTML y XML . En Noviembre del año 2000 se emitió la especificación del DOM.Nivel 2. En esta especificación se incluyó la manipulación de eventos en el navegador, la capacidad de interacción con CSS , y la manipulación de partes del texto en las páginas de la web . DOM.Nivel 3 se emitió en Abril del 2004; utiliza la DTD (Definición del tipo de documento) y la validación de documentos. </li></ul>
  4. 4. DE DÓNDE VINO EL MODELO DE OBJETOS DEL DOCUMENTO <ul><li>El DOM se originó como una especificación para permitir que los programas Java y los scripts de JavaScript fueran portables entre los navegadores web. El &quot;HTML Dinámico&quot; fue el ascendiente inmediato del Modelo de Objetos del Documento, y originalmente se pensaba en él principalmente en términos de navegadores. Sin embargo, cuando se formó el Grupo de Trabajo DOM en el W3C, también se unieron a él compañías de otros ámbitos, incluyendo los de la edición y archivo de documentos HTML y XML. Varias de estas compañías habían trabajado con SGML antes de que se hubiera desarrollado el XML; como resultado de ello, el DOM ha recibido influencias de los &quot;Groves&quot; de SGML y del estándar HyTime. Algunas de estas compañías también habían desarrollado sus propios modelos de objetos para documentos a fin de proporcionar un API para los editores o los archivos de documentos SGML/XML, y estos modelos de objetos también han influido en el DOM. </li></ul>
  5. 5. ESTABLECIENDO REFERENCIAS A OBJETOS <ul><li>El DOM define la manera en que objetos y elementos se relacionan entre sí en el navegador y en el documento. Cualquier lenguaje de programación adecuado para el desarrollo de página web puede ser utilizado. En el caso de javascript , cada objeto tiene un nombre, el cual es exclusivo y único. Cuando existen más de un objeto del mismo tipo en un documento web, estos se organizan en un vector. </li></ul><ul><li>Para hacer referencia a elementos del mismo tipo, los cuales, como se ha dicho, están organizados en un vector, se pueden utilizar puntos decimales de la siguiente manera. </li></ul><ul><li>document.div[0] </li></ul><ul><li>document.div[&quot;Juan&quot;] </li></ul><ul><li>document.div.Juan </li></ul><ul><li>Donde el elemento &quot;Juan&quot; es el primer elemento del vector de elementos del tipo <div> </li></ul><ul><li>En forma alternativa se puede únicamente usar el identificador del elemento </li></ul><ul><li>Juan </li></ul><ul><li>También se puede usar la función &quot;getElementById&quot; </li></ul><ul><li>document.getElementById(&quot;Juan&quot;) </li></ul>
  6. 6. MANIPULANDO LAS PROPIEDADES Y FUNCIONES DE OBJETOS <ul><li>Los objetos computacionales de la misma forma que cualquier objeto de la vida real, tienen propiedades. Algunos ejemplos de propiedades de objetos de la vida real son dimensiones, color y peso. </li></ul><ul><li>En la mayoría de los objetos computacionales algunas propiedades se pueden determinar de la siguiente manera: </li></ul><ul><li>Objeto.propiedad = valor;  </li></ul><ul><li>//por ejemplo para el objeto &quot;Juan&quot;  </li></ul><ul><li>Juan.color = rojo; </li></ul>
  7. 7. <ul><li>La manipulación de objetos sigue los mismos principios que en el lenguaje de programación que se esté utilizando. Una de las características de estos objetos es la función para la cual están diseñados, de hecho la mayoría de las ocasiones tienen más de una función . En javascript muchas funciones para cada uno de los objetos incluyendo el navegador y la ventana que lo contiene han sido definidas previamente, adicionalmente el usuario puede definir funciones de acuerdo a sus necesidades, por ejemplo el código: </li></ul><ul><li>function comeLaLetraA(Texto){ </li></ul><ul><li>var TextoNuevo = &quot;&quot;; </li></ul><ul><li>while(letras en el Texto recibido){ </li></ul><ul><li>//lee la siguiente letra//si esta letra no es &quot;a&quot; añadela al nuevo texto </li></ul><ul><li>} </li></ul><ul><li>return TextoNuevo; </li></ul><ul><li>} </li></ul>
  8. 8. MANIPULANDO EVENTOS <ul><li>Un evento desde del punto de vista computacional ocurre cuando alguna situación cambia en la computadora, como por ejemplo, la posición del ratón, la opresión de alguna tecla, los contenidos de alguna de las memorias, la condición de la pantalla, etc. En la creación de páginas web estos eventos representan la interacción de la computadora con el usuario. </li></ul><ul><li>Una manera de añadir eventos en el DOM utilizando javascript es: </li></ul><ul><li><element onevent=&quot;script&quot;>....</element> </li></ul><ul><li>Por ejemplo: </li></ul><ul><li><div id=&quot;midivision“ onclick=comeLaLetraA(&quot;mamacita apiadate de mi ahora&quot;)> </li></ul><ul><li>Aqui va otro texto </li></ul><ul><li><div> </li></ul>
  9. 9. <ul><li>Otra forma de manipular eventos en javascript al crear páginas para la web es tratándolos como propiedades de los elementos que forman la página, por ejemplo: </li></ul><ul><li>object.event = funcion; </li></ul><ul><li>//como puede ser: </li></ul><ul><li>document.mydivision.onclick = hazAlgo; </li></ul><ul><li>// tambien: </li></ul><ul><li>document.getElementById(&quot;mydivision&quot;).onclick = hazAlgo; </li></ul><ul><li>En el DOM se considera que un evento se origina en el exterior de la página web y se propaga de alguna manera hasta los elementos internos de la página. Un posible ejemplo de esta propagación es: </li></ul><ul><li>EVENTO -> Ventana -> Document -> HTML -> BODY -> DIV -> DESTINORESPUESTA -> DIV -> BODY -> HTML -> Document -> Window -> EVENTO </li></ul>
  10. 10. <ul><li>GRACIAS POR SU ATENCION </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×