JavaScript: Objetos del documento

Francisco J. Mart n Mateos Carmen Graciani Diaz

Dpto. Ciencias de la Computaci on e Inteligencia Articial Universidad de Sevilla

Metodolog a de la Programaci on

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 modicar a trav es del DOM El DOM es independiente de la plataforma y el lenguaje

Metodolog a de la Programaci on

JavaScript: Objetos del documento

DOM: Objeto window

El objeto window es el objeto inicial de una p agina 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 area de estado

Metodolog a de la Programaci on

JavaScript: Objetos del documento

DOM: Objeto window

M etodo alert()
Sintaxis: window.alert(texto) Argumento: Una cadena de texto Resultado: Genera una ventana de aviso con el texto

M etodo confirm()
Sintaxis: window.confirm(texto) Argumento: Una cadena de texto Resultado: Genera una ventana de conrmaci on con el texto. Devuelve un valor l ogico dependiendo de la acci on realizada en dicha ventana

M etodo setTimeout()
Sintaxis: window.setTimeout(expresion,tiempo) Argumento: Una expresion JavaScript y un n umero tiempo Resultado: Eval ua la expresion despu es de esperar el n umero de milisegundos indicados en tiempo

Metodolog a de la Programaci on

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 on

JavaScript: Objetos del documento

DOM: Objeto location

M etodo reload()
Sintaxis: location.reload() Resultado: Recarga el documento actual

M etodo replace()
Sintaxis: location.replace(uri) Argumento: Un uri v alido Resultado: Cambia el documento actual por el documento referenciado por uri Nota: No modica el historial de URI visitadas

M etodo assign()
Sintaxis: location.assign(uri) Argumento: Un uri v alido Resultado: Carga en la ventana actual el documento referenciado por uri Nota: Modica el historial de URI visitadas

Metodolog a de la Programaci on

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 on contenida en este array, u nicamente se pueden utilizar los m etodos que se describen a continuaci on

Metodolog a de la Programaci on

JavaScript: Objetos del documento

DOM: Objeto history

M etodo go()
Sintaxis: history.go(numero) Argumento: Un numero entero Resultado: Carga el documento del historial que est a a un numero de posiciones del actual

M etodo back()
Sintaxis: history.back() Resultado: Carga el documento anterior en el historial de visitas Nota: Es equivalente a history.go(-1)

M etodo 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 on

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

Modicaci on del objeto status

<SCRIPT> function cambiaStatus (str) { window.status = str; } </SCRIPT> <DIV onMouseover="cambiaStatus(Nuevo contenido)"> Modificaci on del contenido de la barra de estado. </DIV>

Metodolog a de la Programaci on

JavaScript: Objetos del documento

DOM: Objeto document

El objeto document contiene el documento actual Propiedades
lastModified: Cadena con la fecha de la u ltima modicaci on del documento location: Cadena con la URL del documento actual referrer: Cadena con la URL del documento que llam o 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 agenes image forms: Objeto array con los formularios form
Metodolog a de la Programaci on JavaScript: Objetos del documento

DOM: Objeto document

M etodo 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 on

JavaScript: Objetos del documento

DOM: Objetos anchor y link

El objeto anchor contiene informaci on sobre un ancla

Propiedades
name: Valor del atributo name

El objeto link contiene informaci on sobre un enlace

Propiedades
href: Valor del atributo href

Metodolog a de la Programaci on

JavaScript: Objetos del documento

DOM: Objeto image

El objeto image contiene informaci on 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 on

JavaScript: Objetos del documento

DOM: Objeto form

El objeto form contiene informaci on 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 on

JavaScript: Objetos del documento

DOM: Objeto form

M etodo reset()
Sintaxis: document.forms[i].reset() document.formname.reset() Resultado: Resetea el formulario, equivale a pulsar un control de tipo reset

M etodo 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 on

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 on

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 a desactivado defaultValue: Valor por defecto del atributo value readOnly: Indica si el control es s olo de lectura

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto input de selecci on 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 a desactivado checked: Indica si el control est a seleccionado defaultChecked: Valor de selecci on por defecto

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto input de selecci on de chero

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 a desactivado defaultValue: Valor por defecto del atributo value

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto input de bot on

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 a desactivado

Metodolog a de la Programaci on

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 on

JavaScript: Objetos del documento

Objetos input

Todos los objetos input anteriores aceptan los siguientes m etodos, a excepci on del objeto input oculto
M etodo focus()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Pone el foco en el elemento

M etodo blur()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Quita el foco al elemento

M etodo select()
Sintaxis: document.forms[i].elements[i].select() Resultado: Selecciona el contenido del elemento

Metodolog a de la Programaci on

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 a desactivado

Metodolog a de la Programaci on

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 on m ultiple disabled: Indica si el control est a desactivado length: N umero de opciones de selecci on selectedIndex: Indice de la primera opci on seleccionada

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto select

M etodo focus()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Pone el foco en el elemento

M etodo blur()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Quita el foco al elemento

M etodo remove()
Sintaxis: document.forms[i].elements[i].remove(indice) Argumento: Un n umero natural indice Resultado: Elimina de la lista de opciones la que ocupa el lugar indicado por indice

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto option

Es el objeto asociado al control <OPTION> Propiedades

value: Valor del atributo value selected: Indica si la opci on est a seleccionada defaultSelected: Valor de selecci on por defecto disabled: Indica si la opci on est a desactivada index: Indice de la opci on en la lista de selecci on

Metodolog a de la Programaci on

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 a desactivado defaultValue: Valor por defecto del atributo value readOnly: Indica si el control es s olo de lectura

Metodolog a de la Programaci on

JavaScript: Objetos del documento

Objeto textarea

M etodo focus()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Pone el foco en el elemento

M etodo blur()
Sintaxis: document.forms[i].elements[i].focus() Resultado: Quita el foco al elemento

M etodo select()
Sintaxis: document.forms[i].elements[i].select() Resultado: Selecciona el contenido del elemento

Metodolog a de la Programaci on

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 olo que algunos tienen un signicado especial para el navegador

Cualquier etiqueta HTML tiene un objeto JavaScript asociado al que se puede acceder con el m etodo 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 on

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 on compuesta, tambi en se puede acceder al contenido de dicha instrucci on
Etiqueta HTML: <H1 id="id1">contenido</H1> Propiedades del objeto JavaScript asociado
innerHTML: El contenido de la instrucci on

Metodolog a de la Programaci on

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 on

JavaScript: Objetos del documento