Introducción a AJAX

5.3. El objeto document

El objeto document es el único que pertenece tanto al DOM (como se vio en el capítulo anterior) como al BOM. Desde el punto de vista del BOM, el objeto document proporciona información sobre la propia página HTML.

Algunas de las propiedades más importantes definidas por el objeto document son:

Propiedad Descripción
lastModified La fecha de la última modificación de la página
referrer La URL desde la que se accedió a la página (es decir, la página anterior en el array history)
title El texto de la etiqueta <title>
URL La URL de la página actual del navegador

Las propiedades title y URL son de lectura y escritura, por lo que además de obtener su valor, se puede establecer de forma directa:

// modificar el título de la página
document.title = "Nuevo titulo";

// llevar al usuario a otra página diferente
document.URL = "http://nueva_pagina";

Además de propiedades, el objeto document contiene varios arrays con información sobre algunos elementos de la página:

Array Descripción
anchors Contiene todas las "anclas" de la página (los enlaces de tipo <a name="nombre_ancla"></a>)
applets Contiene todos los applets de la página
embeds Contiene todos los objetos embebidos en la página mediante la etiqueta <embed>
forms Contiene todos los formularios de la página
images Contiene todas las imágenes de la página
links Contiene todos los enlaces de la página (los elementos de tipo <a href="enlace.html"></a>)

Los elementos de cada array del objeto document se pueden acceder mediante su índice numérico o mediante el nombre del elemento en la página HTML. Si se considera por ejemplo la siguiente página HTML:

<html>
  <head><title>Pagina de ejemplo</title></head>
  <body>
    <p>Primer parrafo de la pagina</p>
    <a href="otra_pagina.html">Un enlace</a>
    <img src="logo.jpg" name="logotipo"/>
    <form method="post" name="consultas">
      <input type="text" name="id" />
      <input type="submit" value="Enviar">
    </form>
  </body>
</html>

Para acceder a los elementos de la página se pueden emplear las funciones DOM o los objetos de BOM:

  • Párrafo: document.getElementsByTagName("p")
  • Enlace: document.links[0]
  • Imagen: document.images[0] o document.images["logotipo"]
  • Formulario: document.forms[0] o document.forms["consultas"]

Una vez obtenida la referencia al elemento, se puede acceder al valor de sus atributos HTML utilizando las propiedades de DOM. De esta forma, el método del formulario se obtiene mediante document.forms["consultas"].method y la ruta de la imagen es document.images[0].src.