Son los objetos que están disponibles en Javascript para controlar cualquier elemento presente en la página web, se conoce normalmente con las siglas DOM, Document Object Model.
Llegamos al tema más importante para aprender a manejar Javascript y controlar lo que ocurre dentro del navegador con toda la potencia que nos ofrece el lenguaje. Se trata de aprender el DOM (Document Object Model o modelo de objetos del navegador) que nos sirve para acceder a cualquiera de los componentes que hay dentro de una página. Por medio del DOM podremos controlar al navegador en general y a los distintos elementos que se encuentran en la página.
Sin duda, este tema le va a dar mucha vida a nuestros ejemplos, ya que hasta ahora no tenían mucho carácter práctico porque no trabajaban con el navegador y las páginas, que es realmente para lo que está hecho Javascript. De modo que esperamos que a partir de aquí el manual sea más entretenido para todos, porque va a cubrir los aspectos más prácticos.
Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los distintos elementos de dicha página. Con Javascript y la nomenclatura de objetos que hemos aprendido, podemos trabajar con esa jerarquía de objetos, acceder a sus propiedades e invocar sus métodos.
Cualquier elemento de la página se puede controlar de una manera u otra accediendo a esa jerarquía. Es crucial conocerla bien para poder controlar perfectamente las páginas web con Javascript o cualquier otro lenguaje de programación del lado del cliente.
Ejemplo de acceso a la jerarquía
Antes de empezar a ver rigurosamente la jerarquía de objetos del navegador, vamos a ver el ejemplo típico de acceso a una propiedad de esta jerarquía para cambiar el aspecto de la página. Se trata de una propiedad de la página que almacena el color de fondo de la página web: la propiedad bgColor del objeto document.
document.bgColor = "red"Si ejecutamos esta sentencia en cualquier momento cambiamos el color de fondo de la página a rojo. Hay que fijarse en que la propiedad bgColor tiene la "C" en mayúscula. Es un error típico equivocarse con las mayúsculas y minúsculas en la jerarquía. Si no lo escribimos bien no funcionará y en algunos casos ni siquiera dará un mensaje de error.
En esta página definida con color de fondo blanco hemos cambiado esa propiedad luego con Javascript, por lo que saldrá con color de fondo rojo.
<HTML>
<HEAD>
<TITLE>Prueba bgColor</TITLE>
</HEAD>
<BODY bgcolor=white>
<script>
document.bgColor = "red"
</script>
</BODY>
</HTML>Podemos ver esta página en marcha en una ventana a parte.
En los ejemplos que hemos visto hasta ahora también hemos hecho uso de los objetos de la jerarquía del navegador. En concreto hemos utilizado mucho el método write() del objeto document para escribir un texto en la página.
document.write("El texto a escribir")Trabajando con la Jerarquía de objetos del navegador
Vamos a ver ahora como está compuesta esta jerarquía de objetos del navegador, más conocida como DOM, detallando alguno de sus elementos y una explicación sobre como se accede a ellos. Como una imagen vale más que mil palabras, echa un vistazo al gráfico siguiente que contiene un listado parcial de objetos que pueden formar parte de ella.
 |
| Jerarquía de objetos del navegador en Javascript 1.2.
Podría faltar por recoger algún objeto, pero sirve perfectamente para hacerse una idea de cómo se organizan los objetos en la jerarquía. |
Como se puede apreciar, todos los objetos comienzan en un objeto que se llama window. Este objeto ofrece una serie de métodos y propiedades para controlar la ventana del navegador. Con ellos podemos controlar el aspecto de la ventana, la barra de estado, abrir ventanas secundarias y otras cosas que veremos más adelante cuando expliquemos con detalle el objeto.
Además de ofrecer control, el objeto window da acceso a otros objetos como el documento (La página web que se está visualizando), el historial de páginas visitadas o los distintos frames de la ventana. De modo que para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por el objeto window. Tanto es así que javascript entiende perfectamente que la jerarquía empieza en window aunque no lo señalemos.
En los ejemplos incluidos en el capítulo anterior podíamos haber escrito también las sentencias de acceso a la jerarquía empezando por el objeto window, de esta manera.
window.document.bgColor = "red"
window.document.write("El texto a escribir")No lo hicimos por que quedase más claro el código y ahorrar algo de texto, pero ahora ya sabemos que toda la jerarquía empieza en el objeto window.
Las propiedades de un objeto pueden ser a su vez otros objetos
Muchas de las propiedades del objeto window son a su vez otros objetos. Es el caso de objetos como el historial de páginas web o el objeto documento, que tienen a su vez otras propiedades y métodos.
Entre ellos destaca el objeto document, que contiene todas las propiedades y métodos necesarios para controlar muchos aspectos de la página. Ya hemos visto alguna propiedad como bgColor, pero tiene muchas otras como el título de la página, las imágenes que hay incluidas, los formularios, etc. Muchas propiedades de este objeto son a su vez otros objetos, como los formularios. Los veremos todos cuando tratemos cada uno de los objetos por separado. Además, el objeto document tiene métodos para escribir en la página web y para manejar eventos de la página.
Navegación a través de la jerarquía
El objetivo de este capítulo sobre la jerarquía de objetos es aprender a navegar por ella para acceder a cualquier elemento de la página. Esta no es una tarea difícil, pero puede haber algún caso especial en el que acceder a los elementos de la página se haga de una manera que aun no hemos comentado.
Como ya dijimos, toda la jeraquía empieza en el objeto window, aunque no era necesario hacer referencia a window para acceder a cualquier objeto de la jerarquía. Luego en importancia está el objeto document, donde podemos encontrar alguna propiedad especial que merece la pena comentar por separado, porque su acceso es un poco diferente. Se trata de las propiedades que son arrays, por ejemplo la propiedad images es un array con todas las imágenes de la página web. También encontramos arrays para guardar los enlaces de la página, los applets, los formularios y las anclas.
Cuando una página se carga, el navegador construye en memoria la jerarquía de objetos. De manera adicional, construye también estos arrays de objetos. Por ejemplo, en el caso de las imágenes, va creando el array colocando en la posición 0 la primera imagen, en la posición 1 la segunda imagen y así hasta que las introduce todas. Vamos a ver un bucle que recorre todas las imágenes de la página e imprime su propiedad src, que contiene la URL donde está situada la imagen.
for (i=0;i<document.images.length;i++){
document.write(document.images[i].src)
document.write("<br>")
}Utilizamos la propiedad length del array images para limitar el número de iteraciones del bucle. Luego utilizamos el método write() del objeto document pasándole el valor de cada una de las propiedades src de cada imagen.
Podemos ver una página con varias imágenes donde se accede a sus propiedades con el bucle anterior.
Ahora vamos a ver el uso de otro array de objetos. En este caso vamos a acceder un poco más dentro de la jerarquía para llegar a la matriz elements de los objetos formulario, que contiene cada uno de los elementos que componen el formulario. Para ello tendremos que acceder a un formulario de la página, al que podremos acceder por el array de formularios, y dentro de él a la propiedad elements, que es otro array de objetos. Para cada elemento del formulario vamos a escribir su propiedad value, que corresponde con la propiedad value que colocamos en HTML.
for (i=0;i<document.forms[0].elements.length;i++){
document.write(document. forms[0].elements[i].value)
document.write("<br>")
}Es un bucle muy parecido al que teníamos para recorrer las imágenes, con la diferencia que ahora recorremos el vector de elements, al que accedemos por la jerarquía de objetos pasando por el array de formularios en su posición 0, que corresponde con el primer formulario de la página.
Para ver este ejemplo en funcionamiento, tenemos una página con un formulario donde se ejecuta este recorrido a sus elementos.
Con esto hemos aprendido a movernos por la jerarquía de objetos, con lo que podremos acceder a cualquier elemento del navegador o la página. En adelante conoceremos con detalle cada uno de los objetos de la jerarquía, empezando por el objeto window y bajando por la jerarquía hasta verlos todos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...