JavaScript: Objetos del documento

Transcripción

1 Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla

2 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

3 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

4 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

5 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

6 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

7 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

8 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)

9 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>

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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>