Jerarquía de objetos en un documento

JavaScript organiza todos los elementos de una página en una jerarquía. Cada elemento se ve como un objeto. Cada objeto puede tener ciertas propiedades y métodos. Con la ayuda de JavaScript puede fácilmente manejar los objetos. Para esto es muy importante comprender la jerarquía de los objetos. Veamos una página:

Tenemos dos imágenes, un enlace y un formulario con dos campos de texto y un botón. Desde el punto de vista de JavaScript la ventana del navegador es el objeto-ventana. Éste objeto contiene ciertos elementos como la barra de estado. Dentro de una ventana se puede cargar un documento HTML. Ésta página es un objeto-documento, esto significa que el objeto-documento representa el documento HTML. El objeto-documento es un objeto muy importante en JavaScript, se usa una y otra vez. Las propiedades del objeto documento son por ejemplo el color de fondo de la página. Pero lo más importante es que todos los objetos son propiedades del objeto documento. Un objeto HTML es, por ejemplo, un enlace o un formulario. Veamos lo siguientes objetos mostrados como jerarquías:

Lo que queremos es poder obtener información sobre los distintos objetos y manejarlos. Para esto tenemos que conocer como acceder a los diferentes objetos. Puede ver los nombres de los objetos en la jerarquía. Si ahora quisiera saber como referirse a la primer imagen de la página HTML tiene que observar la jerarquía. Comenzando desde la parte superior. El primer objeto se llama documento.

La primer imagen se representa por medio de images[0]. Esto significa que podemos acceder a este objeto a través de JavaScript por medio de document.images[0]. Si por ejemplo quisiera saber lo que el usuario ingresó en el primer elemento del primer formulario, nuevamente siguiendo la jerarquía sería:

document.forms[0].elements[0]

Pero, ¿cómo podemos saber el valor ingresado?. Lo primero que tendría que hacer es referirse a las propiedades que tiene el elemento. una de ellas nos ayuda a nosotros a responder la pregunta anterior. La propiedad es: value, por lo tanto podríamos hacer:

nombre=document.forms[0].elements[0].value;

 

Una cosa que tenemos que tener en claro es que se puede también manejar por medio de los nombres de cada uno de los elementos de la página. Por ejemplo veamos el siguiente trozo de HTML.

<form name="primero">

Ingrese su nombre:<br>

<input type="text" name="text1">

<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">

<P>

Ingrese su dirección de correo:<br>

<input type="text" name="correo">

<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">

</body>

 

Para referirnos al valor del correo ingresado lo podemos hacer por medio de:

 

document.primero.correo.value