Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

DOM and BOM

Vista general de los modelos DOM y BOM
by

Andres Donato

on 29 September 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of DOM and BOM

Jhon Jairo Donato DOM Y BOM DOM (Document Object Model) es un conjunto de utilidades específicamente diseñadas para manipular documentos XML. Por extension DOM sirve tambien para manejar documentos HTML y XHTML ¿Qué es DOM? DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. En otras palabras DOM transforma internamente el archivo XML original en una serie de nodos interconectados en forma de árbol. De esta forma tenemos una estructura mas fácil de manejar formada por una jerarquía de nodos ¿Cómo funciona DOM? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html> EJEMPLO NOTA Antes de poder utilizar la API de DOM, se construye de forma automática el árbol para poder ejecutar de forma eficiente todas esas funciones. De este modo, para utilizar DOM es imprescindible que la página web se haya cargado por completo, ya que de otro modo no existe el árbol de nodos y las funciones DOM no pueden funcionar correctamente. Tipos de nodos Document: Raíz de todos los documentos HTML y XML. DocumentType: Contiene la representación del DTD. Element: representa el contenido definido por un par de etiquetas de apertura y cierre Attr: representa el par nombre-de-atributo/valor. Text: almacena el contenido del texto que se encuentra entre etiquetas, tambien guarda CDATA. Comment: representa un comentario en XLM. NOTA Se han definido otros tipos de nodos pero no son usados habitualmente:DocumentFragment, Entity, EntityReference, ProcessingInstruction y Notation. EJEMPLO La interfaz Node Una vez que DOM ha creado de forma automática el árbol completo de nodos de la página, ya es posible utilizar sus funciones para obtener información sobre los nodos o manipular su contenido. JavaScript crea el objeto Node para definir las propiedades y métodos necesarios para procesar y manipular los documentos. Node.ELEMENT_NODE = 1
Node.ATTRIBUTE_NODE = 2
Node.TEXT_NODE = 3
Node.CDATA_SECTION_NODE = 4
Node.ENTITY_REFERENCE_NODE = 5
Node.ENTITY_NODE = 6
Node.PROCESSING_INSTRUCTION_NODE = 7
Node.COMMENT_NODE = 8
Node.DOCUMENT_NODE = 9
Node.DOCUMENT_TYPE_NODE = 10
Node.DOCUMENT_FRAGMENT_NODE = 11
Node.NOTATION_NODE = 12 Metodos de Node BOM (Browser Object Model) es la porcion de JavaScript que permite una interaccion directa entre el codigo y el navegador. BOM permite acceder y modificar las propiedades de las ventanas del propio navegador. ¿Qué es BOM? Algunos elementos de BOM - Crear, mover, redimensionar y cerrar ventanas de navegador.
- Obtener información sobre el propio navegador.
- Propiedades de la página actual y de la pantalla del usuario.
-Gestión de cookies.
-Objetos ActiveX en Internet Explorer. Jerarquia de objetos en BOM El objeto Window El objeto window representa la ventana completa del navegador. Mediante este objeto, es posible mover, redimensionar y manipular la ventana actual del navegador. Incluso es posible abrir y cerrar nuevas ventanas de navegador. BOM define cuatro metodos para manipular el tamaño y la posición de la ventana.

moveBy(x, y).

moveTo(x, y)

resizeBy(x, y)

resizeTo(x, y) Desplaza la posición de la ventana x píxel hacia la derecha y y píxel hacia abajo. Se permiten desplazamientos negativos para mover la ventana hacia la izquierda o hacia arriba. Desplaza la ventana del navegador hasta que la esquina superior izquierda se encuentre en la posición (x, y) de la pantalla del usuario. Se permiten desplazamientos negativos, aunque ello suponga que parte de la ventana no se visualiza en la pantalla. Redimensiona la ventana del navegador de forma que su nueva anchura sea igual a (anchura_anterior + x) y su nueva altura sea igual a (altura_anterior + y). Se pueden emplear valores negativos para reducir la anchura y/o altura de la ventana. Redimensiona la ventana del navegador hasta que su anchura sea igual a x y su altura sea igual a y. No se permiten valores negativos. Ejemplo Otros objetos de BOM Document
Location
Navigator
Screen Atributos. Además del tipo de etiqueta HTML y su contenido de texto, DOM permite el acceso directo a todos los atributos de cada etiqueta. Para ello, los nodos de tipo Element contienen la propiedad attributes, -getNamedItem(nombre), devuelve el nodo cuya propiedad nodeName contenga el valornombre.

-removeNamedItem(nombre), elimina el nodo cuya propiedad nodeName coincida con el valor nombre.

-setNamedItem(nodo), añade el nodo a la lista attributes, indexándolo según su propiedad nodeName.

-item(posicion), devuelve el nodo que se encuentra en la posición indicada por el valor numérico posicion.
Full transcript