Manual de javascript - document
  Indice
  => Introduccion
  => Nociones-basicas
  => Variables
  => Palabras reservadas
  => Operadores
  => Ventanas
  => Sentencias de control
  => Bucles
  => Funciones
  => Funciones del lenguaje
  => Objetos y métodos
  => String
  => Math
  => Date
  => Tablas y Arrays
  => Eventos
  => Eventos II
  => window
  => location
  => history
  => navigator
  => document
  Contacto
  Libro de visitantes

document

< Anterior 

Introducción.

Este objeto contiene información sobre toda la página web (todo el contenido desde el inicio hasta el final de las etiquetas HTML del documento). Gracias a él podremos, por lo tanto, examinar, modificar e incluso añadir contenido al documento HTML.

Es un objeto que está siempre disponible, por lo que podemos acceder en el cualquier momento a sus propiedades, métodos, objetos y eventos. Puesto que este objeto depende del objeto window, también podemos referenciarlo a través de él. Si la página principal de nuestro sitio es una página de marcos, podemos incluso acceder a los elementos de las páginas cargadas en los otros marcos.

var colorFondo = document.bgColor;
window.document.bgColor = "#F5F5F5";
top.indice.document.bgColor = "green";

En la primera línea hemos obtenido el color de fondo de la página accediendo directamente al objeto document y lo hemos guardado en la variable colorFondo. En la segunda línea hemos cambiado el color de fondo de la página haciendo referencia primero al objeto window. En la última línea hemos cambiado el color de fondo de página que hay en el marco indice.

Las propiedades, atributos, métodos.... con el icono Internet Explorer indican que sólo son aplicables para Internet Explorer. Los que tengan el símbolo Netscape - Mozilla son propios de Netscape.

Propiedades.

Las propiedades del objeto document se corresponden con las propiedades que se le pueden dar en el tag <HTML>, así como algunas características del propio documento. A travéde ellas podemos acceder a dichas propiedades y cambiarlas (mira la diferencia en los ejemplos de arriba, donde en la primera línea recuperamos el color de fondo y en la segunda se lo cambiamos).

Hacer notar que los valores de estas propiedades se toman de la etiqueta <HTML>; si una hoja de estilos o algún script cambia estas propiedades, el valor que nos devolverá es el que tenga por defecto el navegador o el asignado en el HTML, que no ha de coincidir con el que la hoja de estilos o el script le haya dado.

alinkColor. Color de los enlaces cuando están activos (al pulsar sobre ellos).

bgColor. Color de fondo.

cookie. Cadena que identifica la cookie actual (puede estar en blanco si no la hay).

defaultCharset. Internet Explorer Cadena con el nombre del juego de caracteres por defecto.

domain. Nombre del servidor web del que procede el documento.

fgColor. Color del texto por defecto.

fileModifiedDate. Internet Explorer Fecha de modificación (incluye el día, mes y año).

fileSize. Internet Explorer Tamaño del archivo en bytes.

lastModified. Fecha y hora de modificación.

linkColor. Color de los enlaces.

location. Cadena con la dirección donde está el documento.

mimeType. Internet Explorer Tipo de archivo cargado (dependerá de la aplicación asociada para la carga del archivo con la extensió actual.

nameProp. Internet Explorer Valor asignado al TITLE.

protocol. Protocolo para la carga de la página. Internet Explorer

readyState. Indica el estado de carga del documento (interactive, complete). Internet Explorer

security. Internet Explorer URL con el certificado de seguridad (si lo tiene) o un texto descriptivo de que el documento no tiene certificado de seguridad.

title. Valor asignado a la etiqueta <TITLE> de la página.

URL. URL del documento.

vlinkColor. Color de los enlaces visitados.

document.alinkColor =
document.bgColor =
document.cookie =
document.defaultCharset =

document.domain =
document.fgColor =
document.fileModifiedDate =
document.fileSize =
document.lastModified =

document.linkColor =
document.location =
document.mimeType =
document.nameProp =
document.protocol =

document.readyState =
document.security =
document.title =
document.URL =
document.vlinkColor =

Objetos.

Todo el contenido de la página es guardado en objetos del navegador, por lo tanto, podremos acceder a ellos y una vez localizado el objeto o parte del documento deseada, conocer sus propiedades, cambiarlas, ocultarlos, cambiarles los estilos, o valores, etc... Ésto es lo que le dará dinamismo a nuestros documentos.

Para acceder a un elemento de la página podemos hacer referencia a él directamente a través de su nombre (name) o identificador (id); no obstante, es mejor hacer siempre una referencia primero al objeto document, pues de no hacerlo así nuestro código puede ocasionar errores en algunos navegadores (Mozilla, Netscape, Opera...). Por lo tanto usaremos la notación del punto para acceder a un objeto. Hemos de tener en cuenta que los objetos están contenidos unos dentro de otros según la estructura HTML del documento. Para acceder a un objeto y sus propiedades o métodos, haremos una llamada de padres a hijos. Como ejemplo, supongamos que tenemos la siguiente página:

<html>
   <head><title>Título de la página</title></head>
<body>
   <h1>Datos personales</h1>

   <form name="datos">
      <table>
         <tr>
            <td><a href="calendario.htm" id="calendario">Fecha
                     de nacimiento:</a></td>
            <td><input type="text" name="nacimiento" /></td>
         </tr>
         <tr>
            <td>Nombre:</td>
            <td><input type="text" name="nombre"></td>
         </tr>
         <tr>
            <td>Primer apellido:</td>
            <td><input type="text" name="apellido1"></td>
         </tr>
         <tr>
            <td>Segundo Apellido:</td>
            <td><input type="text" name="apellido2"></td>
         </tr>
      </table>
      .........
   </form>

</body>
</html>

Para hacer referencia a la caja de texto nombre hemos de tener en cuenta que pertenece al formulario llamado datos. Por lo tanto, para acceder a esta caja de texto, haríamos así:

document.datos.nombre

Es decir, primero hacemos referencia a nuestro document, luego al formulario (que tiene por nombre datos) y por último a nuestra caja de texto, que se llama nombre.

Veamos los principales objetos que tiene el objeto document:

activeElement. Internet Explorer Recupera el objeto activo del documento.

all. Internet Explorer Array con todos los objetos del documento.

anchors. Array con todos los marcadores del documento, es decir los enlaces con el atributo name.

area. Objeto que especifica un área de un mapa de imagen contenido.

body. Cuerpo del documento.

embeds. Array con un conjunto de objetos embebidos en la página (tags EMBED del HTML).

form. Objeto que guarda todos los elementos contenidos en un formulario concreto.

forms. Array de todos las formularios existentes en el documento.

frames. Array con todos los marcos (frames) de que se compone el documento.

images. Array de imágenes existentes en el documento.

image. Referencia a una imagen del documento.

links. Array con todos los enlaces (aquellos que tienen valor en el atributo href).

parentWindow. Internet Explorer Ventana padre del documento actual.

plugins. Array con los plugins del documento.

Métodos.

captureEvents(e). Método que permite capturar y controlar los eventos que se producen en el doumento. Recibe como parámetro el identificador del evento producido.

clear(). Método desaprobado que limpia la ventana del documento.

close(). Cierra una salida utilizada para crear un objeto en el documento.

contextual(). Ofrece una línea de control de los estilos de la página. En el caso que deseemos especificarlos con Javascript.

elementFromPoint(x, y). Internet Explorer Obtiene el elemento situado en la posición x, y de la página. Requiere dos parámetros de tipo Integer que son las posiciones x e y, en pixels.

getSelection(). Netscape - Mozilla Obtiene una cadena con el texto de la página que se ha seleccionado.

getElementById(id). Obtiene un objeto cuyo id coincide con el recibido como argumento. Puede ser cualquier tipo de objeto (enlace, tabla, imagen, párrafo, etc). Si no existe ningún elemento con el id recibido devuelve null.

getElementsByTagName(tagname). Obtiene un array con todos los objetos con el tag especificado.

Veamos cómo aplicaríamos estos métodos si tenemos el siguiente HTML:

<html>
   <head><title>Título de la página</title></head>
   <body>

      <h1 style="color:#CC6600" id="datosPersonales">
         Datos personales
      </h1>
      <form name="datos">
         <table>
            <tr>
               <td><a href="calendario.htm">Fecha
                  de nacimiento:</a>
               </td>
               <td><input type="text" name="nacimiento"></td>
            </tr>
            <tr>
               <td>Nombre:</td>
               <td><input type="text" name="nombre"></td>
            </tr>
            <tr>
               <td>Primer apellido:</td>
               <td><input type="text" name="apellido1"></td>
            </tr>
            <tr>
               <td>Segundo Apellido:</td>
               <td><input type="text" name="apellido2"></td>
            </tr>
         </table>
      </form>
	
   <script type="text/javascript">
   //Obtenemos el objeto h1
   var cabecera = document.getElementById("datosPersonales");

   //Comprobamos que existe:
   if(cabecera) {
      textoCabecera = cabecera.innerText;
      colorTexto = cabecera.style.color;
   }

   //Obtenemos todas las cajas de texto:
   var inputForm = document.getElementByTagName("input");

   //Número de campos del formulario:
   var nInputs = inputForm.length
   </script>

   </body>
</html>

En el ejemplo, cabecera es un objeto H1, textoCabecera será la cadena "Datos personales", y colorTexto #CC6600. Hemos usado el método getElementsByTagName para obtener un array con todos los campos inputs de la página. En este caso nInputs será 4, pues son 4 los inputs existentes (nacimiento, nombre, apellido1 y apellido2).

handleEvent(). Invoca el manejador de eventos del elemento especificado.

open([sMimeType], [sReplace]). El método window.open abre una ventana del navegador. El método document.open abre un documento para recoger la salida de los métodos write() y writeln(). El documento no se cierra hasta que no se llama explítamente al método document.close().

Tiene dos parámetros opcionales. El primero (sMimeType) es una cadena con el tipo de documento que se está escribiendo ("text/html", "text/javascript", etc). El segundo (sReplace) indica si el nuevo documento ha de sustituir al actual en el histórico de navegación, para lo cual le daremos el valor replace. Veamos la diferencia con dos ejemplos:

function writeDoc() {
   var openDoc = document.open("text/htm", "replace");
   var texto = "<html><head>" +
       "<title>Ejemplo document.open;</title></head>";
   texto += "<body>Hola mundo!;</body></html>";
   openDoc.write(texto);
   openDoc.close();
}
	
function writeDocBack() {
   var openDoc = document.open("text/htm");
   var texto = "<html><head>" +
       "<title>Ejemplo document.open;</title></head>";
   texto += "<body>Hola mundo!;</body></html>";
   openDoc.write(texto);
   openDoc.close();
}

En el primer botón se llama a writeDoc, por lo que al pasar el parámetro replace, esta página se borrará del historial de navegación y al pulsar el botón para ir hacia atrás, aparecerá la página que hayas estado viendo antes de ésta.

En el segundo botón se llama a writeDocBack, por lo que al no pasar el parámetro replace, si pulsas el enlace que hemos escrito con openDoc.write volverás a esta página.

Observa cómo en ambos casos usamos el método openDoc.close() para cerrar la fuente de salida.

releaseEvents(). Liberar los eventos capturados del tipo que se especifique, enviándolos a los objetos siguientes en la jerarquía.

routeEvent(). Pasa un evento capturado a través de la jerarquía de eventos habitual.

write(expr1[,expr2...exprN]). Escribe el-los texto-s pasados como parámetros. Se pueden pasar tantos argumentos como se desee, entendiéndose que cada uno de ellos será una parte del contenido de la página final. Se escriben en el mismo orden en que se pasan.

writeln(expr1[,expr2...exprN]). Escribe la expresió (o conjunto de expresiones) pasadas como parámetros en la ventana. La diferencia con el método anterior estriba en que descpués de escribirlo provoca un salto de línea (que es visual en Netscape, pero no el IE).

Ahora veamos un ejemplo en el que se puede ver un poco más claro la diferencia de abrir y cerrar un flujo de escritura. Usaremos los métodos open(), close() y writeln()

Al pulsar el botón Abrir una ventana, se abrirá una venta y el flujo de contenido para el documento.

Observa cómo continúa la carga del documento: aunque hemos abierto una ventana en blanco que no tiene nada, el navegador está esperando a que se termine la carga del documento. A continuación, escribe varios textos y pulsa el botón Escribir el texto. En este botón se llama a la función escribirTexto() con lo que el texto se va sumando al anterior.

En el momento en que pulsas el botón Cerrar flujo de escritura, el flujo se cierra (document.close()) y si volvemos a escribir sobre la ventana el contenido comienza desde cero.


Ver/ Ocultar código JavaScript


 
Hoy habia 25 visitantes (26 clics a subpáginas) ¡Aqui en esta página!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis