JavaScript: Objetos del documento

JavaScript: Objetos del documento
Francisco J. Martı́n Mateos
Carmen Graciani Diaz
Dpto. Ciencias de la Computación e Inteligencia Artificial
Universidad de Sevilla
Metodologı́a de la Programación
JavaScript: Objetos del documento
Modelo de objetos del documento
Todo documento HTML tiene una estructura de objetos que
permite hacer referencia a cada una de sus componentes
Modelo de Objetos del Documento (DOM)
Ciertos elementos dentro de un documento HTML (contenido
y atributos) se pueden consultar y modificar a través del DOM
El DOM es independiente de la plataforma y el lenguaje
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto window
El objeto window es el objeto inicial de una página HTML
Representa una ventana del navegador
Propiedades:
location: Propiedades del URI actual
history: URIs visitadas anteriormente por el usuario
document: Propiedades del documento actual
status: Contenido del área de estado
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto window
Método alert()
Sintaxis: window.alert(texto)
Argumento: Una cadena de texto
Resultado: Genera una ventana de aviso con el texto
Método confirm()
Sintaxis: window.confirm(texto)
Argumento: Una cadena de texto
Resultado: Genera una ventana de confirmación con el texto.
Devuelve un valor lógico dependiendo de la acción realizada en
dicha ventana
Método setTimeout()
Sintaxis: window.setTimeout(expresion,tiempo)
Argumento: Una expresion JavaScript y un número tiempo
Resultado: Evalúa la expresion después de esperar el número
de milisegundos indicados en tiempo
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto location
El objeto location contiene las propiedades del URI actual
No es un elemento del DOM, es un objeto JavaScript
Propiedades
href: El URI del documento
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto location
Método reload()
Sintaxis: location.reload()
Resultado: Recarga el documento actual
Método replace()
Sintaxis: location.replace(uri)
Argumento: Un uri válido
Resultado: Cambia el documento actual por el documento
referenciado por uri
Nota: No modifica el historial de URI visitadas
Método assign()
Sintaxis: location.assign(uri)
Argumento: Un uri válido
Resultado: Carga en la ventana actual el documento
referenciado por uri
Nota: Modifica el historial de URI visitadas
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto history
El objeto history contiene las URIs visitadas anteriormente
por el usuario
No es un elemento del DOM, es un objeto JavaScript
Es un array de URIs
Por seguridad no se puede acceder directamente a la
información contenida en este array, únicamente se pueden
utilizar los métodos que se describen a continuación
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto history
Método go()
Sintaxis: history.go(numero)
Argumento: Un numero entero
Resultado: Carga el documento del historial que está a un
numero de posiciones del actual
Método back()
Sintaxis: history.back()
Resultado: Carga el documento anterior en el historial de
visitas
Nota: Es equivalente a history.go(-1)
Método forward()
Sintaxis: history.forward()
Resultado: Carga el documento siguiente en el historial de
visitas
Nota: Es equivalente a history.go(1)
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto status
El objeto status es una cadena de texto que se muestra en la
barra inferior de la ventana del navegador
Modificación del objeto status
<SCRIPT>
function cambiaStatus (str) {
window.status = str;
}
</SCRIPT>
<DIV onMouseover="cambiaStatus(’Nuevo contenido’)">
Modificación del contenido de la barra de estado.
</DIV>
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto document
El objeto document contiene el documento actual
Propiedades
lastModified: Cadena con la fecha de la última modificación
del documento
location: Cadena con la URL del documento actual
referrer: Cadena con la URL del documento que llamó al
actual
title: Cadena con el tı́tulo del documento actual
bgColor: Color de fondo del documento
fgColor: Color del primer plano del documento
alinkColor: Color de los enlaces activos
linkColor: Color de los enlaces
vlinkColor: Color de los enlaces visitados
anchors: Objeto array con las “anclas” anchor
links: Objeto array con los enlaces link
images: Objeto array con las imágenes image
forms: Objeto array con los formularios form
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto document
Método write()
Sintaxis: document.write(texto)
Argumento: Una cadena de texto
Resultado: Escribe en el documento actual el texto
Nota: Si el documento ya se ha terminado de cargar, entonces
reemplaza su contenido con el texto
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objetos anchor y link
El objeto anchor contiene información sobre un “ancla”
Propiedades
name: Valor del atributo name
El objeto link contiene información sobre un enlace
Propiedades
href: Valor del atributo href
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto image
El objeto image contiene información sobre una imagen
Propiedades
src: Valor del atributo src
alt: Valor del atributo alt
border: Valor del atributo border
width: Valor del atributo width
height: Valor del atributo height
hspace: Valor del atributo hspace
vspace: Valor del atributo vspace
align: Valor del atributo align
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto form
El objeto form contiene información sobre un formulario
Para acceder a un formulario de un documento podemos
Usar el ı́ndice correspondiente del array de formularios:
document.forms[i]
Usar el nombre del formulario (atributo name):
document.formname
Propiedades
action: Valor del atributo action
method: Valor del atributo method
encoding: Valor del atributo enctype
elements: Array de elementos del formulario
Metodologı́a de la Programación
JavaScript: Objetos del documento
DOM: Objeto form
Método reset()
Sintaxis: document.forms[i].reset()
document.formname.reset()
Resultado: Resetea el formulario, equivale a pulsar un control
de tipo reset
Método submit()
Sintaxis: document.forms[i].submit()
document.formname.submit()
Resultado: Envı́a el formulario, equivale a pulsar un control de
tipo submit
Metodologı́a de la Programación
JavaScript: Objetos del documento
Elementos de formularios
Para acceder a los elementos de un formulario podemos
Usar el ı́ndice correspondiente del array de elementos:
document.forms[i].elements[j]
document.formname.elements[j]
Usar el nombre del elemento (atributo name):
document.forms[i].elementname
document.formname.elementname
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto input de campo de texto
Es el objeto asociado a los controles <INPUT type="text">
y <INPUT type="password">
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
size: Valor del atributo size
maxLength: Valor del atributo maxlength
disabled: Indica si el control está desactivado
defaultValue: Valor por defecto del atributo value
readOnly: Indica si el control es sólo de lectura
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto input de selección de opciones
Es el objeto asociado a los controles <INPUT type="radio">
y <INPUT type="checkbox">
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
disabled: Indica si el control está desactivado
checked: Indica si el control está seleccionado
defaultChecked: Valor de selección por defecto
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto input de selección de fichero
Es el objeto asociado al control <INPUT type="file">
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
disabled: Indica si el control está desactivado
defaultValue: Valor por defecto del atributo value
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto input de botón
Es el objeto asociado a los controles <INPUT type="reset">,
<INPUT type="submit"> y <INPUT type="button">
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
disabled: Indica si el control está desactivado
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto input oculto
Es el objeto asociado al control <INPUT type="hidden">
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objetos input
Todos los objetos input anteriores aceptan los siguientes
métodos, a excepción del objeto input oculto
Método focus()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Pone el foco en el elemento
Método blur()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Quita el foco al elemento
Método select()
Sintaxis: document.forms[i].elements[i].select()
Resultado: Selecciona el contenido del elemento
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto button
Es el objeto asociado al control <BUTTON>
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Valor actual del atributo value
disabled: Indica si el control está desactivado
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto select
Es el objeto asociado al control <SELECT>
Propiedades
name: Valor del atributo name
type: Valor del atributo type
size: Valor del atributo size
multiple: Indica si el control admite selección múltiple
disabled: Indica si el control está desactivado
length: Número de opciones de selección
selectedIndex: Índice de la primera opción seleccionada
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto select
Método focus()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Pone el foco en el elemento
Método blur()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Quita el foco al elemento
Método remove()
Sintaxis:
document.forms[i].elements[i].remove(indice)
Argumento: Un número natural indice
Resultado: Elimina de la lista de opciones la que ocupa el
lugar indicado por indice
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto option
Es el objeto asociado al control <OPTION>
Propiedades
value: Valor del atributo value
selected: Indica si la opción está seleccionada
defaultSelected: Valor de selección por defecto
disabled: Indica si la opción está desactivada
index: Indice de la opción en la lista de selección
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto textarea
Es el objeto asociado al control <TEXTAREA>
Propiedades
name: Valor del atributo name
type: Valor del atributo type
value: Contenido del control
rows: Valor del atributo rows
cols: Valor del atributo cols
disabled: Indica si el control está desactivado
defaultValue: Valor por defecto del atributo value
readOnly: Indica si el control es sólo de lectura
Metodologı́a de la Programación
JavaScript: Objetos del documento
Objeto textarea
Método focus()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Pone el foco en el elemento
Método blur()
Sintaxis: document.forms[i].elements[i].focus()
Resultado: Quita el foco al elemento
Método select()
Sintaxis: document.forms[i].elements[i].select()
Resultado: Selecciona el contenido del elemento
Metodologı́a de la Programación
JavaScript: Objetos del documento
Otros elementos HTML
Cualquier etiqueta HTML admite el atributo
id="identificador"
De hecho cualquier etiqueta HTML admite cualquier atributo
con cualquier valor, sólo que algunos tienen un significado
especial para el navegador
Cualquier etiqueta HTML tiene un objeto JavaScript asociado
al que se puede acceder con el método getElementById()
Sintaxis: document.getElementById(identificador)
Argumento: Una cadena identificador
Resultado: El objeto asociado a la etiqueta HTML cuyo valor
del atributo id es identificador
Metodologı́a de la Programación
JavaScript: Objetos del documento
Otros elementos HTML
Cualquier atributo que se haya indicado en una etiqueta
HTML tiene asociada una propiedad en el objeto asociado a
dicha etiqueta
Esta propiedad sirve para acceder al valor del atributo
Etiqueta HTML: <HR id="id1" align="left">
Propiedades del objeto JavaScript asociado
id: El valor del atributo id
align: El valor del atributo align
En caso de tratarse de una instrucción compuesta, también se
puede acceder al contenido de dicha instrucción
Etiqueta HTML: <H1 id="id1">contenido</H1>
Propiedades del objeto JavaScript asociado
innerHTML: El contenido de la instrucción
Metodologı́a de la Programación
JavaScript: Objetos del documento
Otros elementos HTML
Otros elementos HTML
<H1 id="id1"
onClick="alert(document.getElementById(’id1’).innerHTML)">
Otros elementos HTML</H1>
<HR id="id2" align="left" size="5" width="50">
<SCRIPT>
function alinea(val) {
document.getElementById(’id2’).align = val;
}
</SCRIPT>
<FORM>
<BUTTON type="button"
onClick="alinea(’left’)">
<< </BUTTON>
<BUTTON type="button"
onClick="alinea(’center’)">
>< </BUTTON>
<BUTTON type="button"
onClick="alinea(’right’)">
>> </BUTTON>
</FORM>
Metodologı́a de la Programación
JavaScript: Objetos del documento