PDF de programación - Modelo de objetos de documento

Programación en Internet 2009-2010

Departamento de Lenguajes y
Sistemas Informáticos

Modelo de objetos de

d
t
documento

Programación en Internet

Curso 2009-2010

Programación en Internet – Curso 2009-2010

Índice

• Introducción
• DOM
• Cómo acceder a un formulario
• BOM

DLSI - Universidad de Alicante

1

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción
• Document Object Model (DOM)

– Permite acceder a los elementos HTML de un

documento No confundir con los lenguajes de
script

• Browser Object Model (BOM)

– Navigator objects
– Permite acceder a elementos del navegador
– Permite acceder a elementos del navegador

• Incompatibilidades entre distintos navegadores
• Jerarquía objectos ⇔ Estructura documento

Programación en Internet – Curso 2009-2010

Introducción

• Ventajas:

– Permite manipular las páginas web en el

cliente sin necesidad de procesamiento en
el lado del servidor

DLSI - Universidad de Alicante

2

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM
• Document Object Model
• Especificación de W3C
• Mecanismo para que desde cualquier

lenguaje de programación se pueda
manipular un documento XML o HTML
Bá i
– Crea una estructura lógica para el documento

• Básicamente:

t

(llamada “árbol nodal”)

– Proporciona un método para leer y manipular el

documento

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

3

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM

• Versiones de DOM:

– Nivel 0
– Nivel 1

– Nivel 2

– Nivel 3

• Document Object Model Level 1 (1/10/1998)
• Document Object Model Level 1 (Second Edition) (29/9/2000)

• Document Object Model Level 2 Core (13/11/2000)
• Document Object Model Level 2 Views
• Document Object Model Level 2 Events
• Document Object Model Level 2 Style
• Document Object Model Level 2 Traversal and Range
g
• Document Object Model Level 2 HTML

j

• Document Object Model Level 3 Core (7/4/2004)
• Document Object Model Level 3 Load and Save
• Document Object Model Level 3 Validation

Programación en Internet – Curso 2009-2010

DOM

• What does your user agent claim to

support?
– http://www.w3.org/2003/02/06-dom-

support.html

DLSI - Universidad de Alicante

4

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

5

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM

• DOM trata un documento HTML (XML)

como una jerarquía de nodos
– Distintos nodos y cada uno tiene permitido

solo ciertos hijos de ciertos tipos de nodo

– Existen algunos tipos de nodo que son

hoja No pueden tener hijos

Programación en Internet – Curso 2009-2010

DOM

• Document:

Element (máximo uno)
– Element (máximo uno)
– ProcessingInstruction
– Comment
– DocumentType (máximo uno)

• DocumentFragment:

– Element
– ProcessingInstruction
ProcessingInstruction
– Comment
– Text
– CDATASection
– EntityReference

DLSI - Universidad de Alicante

6

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM
• DocumentType: sin hijos
• EntityReference:

– Element
– ProcessingInstruction
– Comment
– Text
– CDATASection
– EntityReference

CDATAS i

Programación en Internet – Curso 2009-2010

DOM

• Element:
– Element
– Text
– Comment
– ProcessingInstruction
– CDATASection
EntityReference
– EntityReference

• Attr:

– Text
– EntityReference

DLSI - Universidad de Alicante

7

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM
• ProcessingInstruction: sin hijos
• Comment: sin hijos
• Text: sin hijos
• CDATASection: sin hijos
• Entity:

i hij

C

t

– Element
– ProcessingInstruction
– Comment
– Text
– CDATASection
– EntityReference
• Notation: sin hijos

Programación en Internet – Curso 2009-2010

DOM

• Ejemplo:

<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>

Fuente: Document Object Model (DOM) Level 1 Specification, W3C Recommendation 1 October, 1998

DLSI - Universidad de Alicante

8

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM

Fuente: Document Object Model (DOM) Level 1 Specification, W3C Recommendation 1 October, 1998

Programación en Internet – Curso 2009-2010

DOM

• Ejemplo:
<ht l>
<html>
<head>

</head>
<body>

<title>This is a Document!</title>

<h1>This is a header!</h1>
<p id="excitingText">This is a paragraph!
<em>Excitement</em>!</p>
<em>Excitement</em>!</p>
<p>This is also a paragraph, but it's not nearly as
exciting as the last one.</p>

</body>
</html>

Fuente: DevOpera, 46: Traversing the DOM, 3 February 2009

DLSI - Universidad de Alicante

9

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM

Fuente: DevOpera, 46: Traversing the DOM, 3 February 2009

Programación en Internet – Curso 2009-2010

DOM

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
lang="es">

• Ejemplo:
<?xml version="1 0" encoding="iso 8859 1"?>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"
<head>
<title>Una página de ejemplo</title>
</head>
<body>
<!-- Esto antes era un ejemplo un poco simple
<!
-->
<h1>DOM: Document Object Model</h1>
<p>
El <b>DOM</b> permite consultar y modificar un documento
</p>
</body>
</html>

Esto antes era un ejemplo un poco simple, pero ahora ya no
pero ahora ya no

<i>HTML desde <b>JavaScript</b></i>

DLSI - Universidad de Alicante

10

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

11

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

Documento
Document

DOCTYPE
DocumentType

<html>
Element

<head>
Element
Element

<title>
Element

<body>
Element
Element

Esto antes era…

Comment

<h1>
Element

<p>

Element

Una página de prueba

Text

DOM: Document…

Text

El
Text

<b>

Element

DOM
Text

permite consultar y…

Text

HTML desde

Text

<i>

Element

<b>

Element

JavaScript

Text

DLSI - Universidad de Alicante

12

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 0

• Nivel 0:

tal)

– No es una recomendación (no existe como

– "DOM Level 0“ refiere una mezcla de

funcionalidades para trabajar con
documentos HTML
Ofrecido desde Netscape Navigator
– Ofrecido desde Netscape Navigator
version 3.0 y Microsoft Internet Explorer
version 3.0

Programación en Internet – Curso 2009-2010

DOM Level 0

• innerHTML:

– Asigna o devuelve el código HTML entre

las etiquetas de inicio y final del objeto

– Como no existe un especificación formal

de esta propiedad, su implementación
difiere

– Nunca se debería de utilizar para escribir
partes de una tabla Usar los métodos
de W3C DOM

DLSI - Universidad de Alicante

13

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 0

• Ejemplo: eliminar el contenido entero de

una página

// Sustituye el contenido de la etiqueta body
// por una cadena vacía
document.body.innerHTML = "";

Programación en Internet – Curso 2009-2010

DOM Level 0

• Ejemplo: texto que cambia al desplazar

el puntero del ratón

<p onmouseover="this.innerHTML='<b>Mouse

out to change back.</b>'"
onmouseout="this.innerHTML='<i>Mouse
over again to change </i>'">
over again to change.</i> >

<i>Mouse over this text to change it.</i>
</p>

DLSI - Universidad de Alicante

14

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 1

• Nivel 1

– Document Object Model Level 1 (1/10/1998): definición
– Document Object Model Level 1 (1/10/1998): definición

de las estructuras de datos e interfaces básicos del
modelo DOM

– Document Object Model Level 1 (Second Edition)

(29/9/2000)
– Dos partes:

• Core: conjunto fundamental de interfaces de

bajo nivel que representan cualquier
bajo nivel que representan cualquier
documento estructurado e interfaces
extendidos para representar documentos XML
• HTML: proporciona interfaces adicionales de

alto nivel para un acceso más apropiado a
documentos HTML

Programación en Internet – Curso 2009-2010

DOM Level 1

i

b i

• Cada nodo es de tipo Node, pero
existen subtipos: Document,
DocumentType, Element,
Text,Comment, …
• Atributos son nodos del tipo Attr, pero
no aparecen en el árbol que representa
no aparecen en el árbol que representa
el documento (hay que acceder a través
de métodos del nodo)

DLSI - Universidad de Alicante

15

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 1

• Objetos=propiedades+métodos+eventos
• Descendientes son propiedades y

objetos a la vez

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

16

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 1

• document ⇔ <body>…</body>
• Propiedades:

– alinkColor, bgColor, fgColor,
linkColor, vlinkColor
– forms, images, title
– lastModified referrer
lastModified, referrer

• Métodos:

– write, writeln

Programación en Internet – Curso 2009-2010

DOM Level 1

• Eventos:
onAbort, onBlur, onChange, onClick,
onDblClick, onDragDrop, onError,
onFocus, onKeyDown, onKeyPress,
onKeyUp, onLoad, onMouseDown,
M
onMouseOver, onMouseUp, onMove,
onReset, onResize, onSelect,

onMouseMove, onMouseOut,

U

M

O
onSubmit, onUnload

M

DLSI - Universidad de Alicante

17

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

DOM Level 1

• onClick

– Se invoca al recibir un click el objeto

• onChange

– Se invoca al cambiar el valor o estado del

control

• onBlu