Trabajar con elementos de la página y simplificar su acceso mediante el método getElementById(), que funciona en todos los navegadores. Ejemplos prácticos de manipulación de capas dinámicamente.
En este artículo vamos a ver unos ejemplos sencillos de manipulación de elementos en la página. Mediante el acceso al DOM para recuperar un elemento de la página, podemos luego modificar sus propiedades para hacer que cambie dinámicamente la página y responder así a las acciones del usuario.
Acceso sencillo al DOM con getElementById()
Todos los programadores han tenido alguna vez que enfrentarse a los problemas de compatibilidad que presentan los navegadores desarrollados por los distintos fabricantes.
Debido a que tenían dos DOM (Modelo de objetos del documento) distintos, la forma de acceder de uno y otro eran diferentes, provocando la necesidad de utilizar distintos trucos para conseguir que los scripts fueran compatibles con los dos navegadores.
Estos problemas se han solucionado en cierta medida desde la adopción por parte de las compañías del DOM definido por el W3C, al poder escribir el mismo código y que sea compatible con los dos navegadores. El único problema que presenta es que el script no será compatible con las versiones anteriores de dichos navegadores, provocando en caso de necesitar compatibilidad hacia atrás, la necesidad de añadir el código especifico para las versiones anteriores que se deseen implementar.
Una de las funciones clave para trabajar con los dos navegadores al mismo tiempo, es la función getElementById(elemento) que recibe por parámetro el nombre de un elemento de la página, y devuelve el objeto correspondiente. A través de esta función, se podrán acceder a todas las propiedades del objeto. Esta función esta definida en el estándar del W3C.
Una vez tenemos el objeto, bastará con acceder a la propiedad style, para a través de ella, acceder a todos los estilos definidos en el elemento.
La ventaja de utilizar este método, es que no necesitaremos distinguir que navegador se esta utilizando, ya que funciona para los dos.
Mostrar y ocultar capas
Lo primero, es definir las funciones de mostrar y ocultar. Estas dos funciones, recibirán por parámetro, el nombre de la capa que se quiere mostrar u ocultar, a continuación, mediante la función getElementById, accederemos a las propiedades de la capa, y a través de style a los estilos que nos definen si la capa esta visible o no (propiedad visibility), activándola o desactivándola según la función.
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
A continuación es necesario definir las capas, y llamar en algún momento a las funciones definidas. Se utilizarán los eventos onMouseOver y onMouseOut de la capa 1 para mostrar y ocultar la capa 2.
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')">Capa 1</div>
<div id="capa2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Capa 2</div>
Al pasar por encima de la capa 1 se mostrará la 2, y al salir de la capa 1, se ocultará la dos.
Ejemplo completo:
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')">Capa 1</div>
<div id="capa2" style="position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden">Capa 2</div>
</body>
</html>
Movimiento de Capas
Para desplazar una capa por la pantalla, es necesario modificar los atributos Top y Left.
Top define la posición vertical de la capa desde la parte superior de la pantalla
Left define la posición horizontal de la capa desde la parte izquierda de la pantalla.
Al modificar los valores de Top y Left lograremos el movimiento de la capa.
Por último, hay que reseñar que los valores, almacenan una cadena de texto con el valor y las unidades, por lo que es necesario convertir los valores que se almacenan dentro de las propiedades antes de poder utilizarlos.
Por ejemplo, un valor almacenado en top o left podrá ser 140px.
Por este motivo es necesario utilizar la función parseInt para poder convertir los valores a números.
A continuación se muestra un ejemplo, que desplaza una capa 5 pixels cada vez que se pulsa el botón:
La función recibe por parámetro el nombre de la capa que se desea mover, accede mediante la función getElementById a la propiedad de top, mediante ParseInt la convierte a un entero, le suma 5 unidades, y a continuación escribe el nuevo valor en el estilo de la capa.
<script language="Javascript">
function mover(nombreCapa){
valor=document.getElementById(nombreCapa).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nombreCapa).style.top=numero;
}
</script>
Ejemplo completo:
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mover(nombreCapa){
valor=document.getElementById(nombreCapa).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nombreCapa).style.top=numero;
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue">
Capa 1
</div>
<form name="miform" action="#">
<input type="button" onclick="mover('capa1')" value="Mover Capa">
</form>
</body>
</html>
Escritura en las Capas (cambiar su contenido)
Ahora vamos a ver cómo modificar el contenido de un elemento de la página dinámicamente, mediante Javascript.
El texto que se encuentra almacenado dentro de una capa, se encuentra dentro de la propiedad innerHTML. Esta propiedad, esta implementada en Internet Explorer desde la versión 4, y Netscape lo ha incorporado en las versiones 6 y 7 a pesar de que no se encuentra definido en el estandar del W3C.
La propiedad almacena el código HTML que se corresponde con lo que se visualiza dentro de la capa, es decir, si la capa contiene " hola " la propiedad contendrá " hola " sin embargo, si la propiedad contiene un hipervínculo http://www.desarrolloweb.com entonces la cadena de texto contendrá "<a href='http://www.desarrrolloweb.com'>http://www.desarrolloweb.com</a>, por lo que se podrá escribir cualquier tipo de contenido dentro de la capa.
El siguiente ejemplo, contiene un formulario con una caja de texto, el usuario puede escribir cualquier texto ó código HTML, y al pulsar el botón, este se mostrará dentro de la capa.
La función recibe por parámetro el nombre de una capa, y el formulario que contiene la caja de texto, guarda el valor del cuadro de texto dentro de una variable y a continuación se la asigna a la propiedad innerHTML de la capa:
function escribeCapa(capa,formulario){
var texto=formulario.caja.value;
document.getElementById(capa).innerHTML = texto;
}
Como puedes comprobar, dentro de la función simplemente asignamos un valor a la propiedad "innerHTML" del objeto del DOM que tiene el elemento que queremos modificar.
Ejemplo completo:
<html>
<head>
<title>Escribiendo el contenido de un elemento con innerHTML</title>
<script language="JavaScript">
function escribeCapa(capa,formulario){
var texto=formulario.caja.value;
document.getElementById(capa).innerHTML=texto;
}
</script>
</head>
<body>
<div id="micapa" style="position:absolute;width:100;height:100;top:100;left:100;background-color:yellow"> </div>
<form name="miformulario" action="#">
Texto: <input type="text" name="caja" size="50"> <input type="button" onclick="escribeCapa('micapa',this.form)" value="escribir">
</form>
</body>
</html>
Conclusión
Hemos visto varios ejemplos sencillos de manipulación de la página mediante el acceso al DOM con el método getElementById() del objeto document. Son todo ejemplos bastante simples, pero te pueden dar una idea de las cosas que puedes hacer mediante los objetos del navegador.
Carlos Luis Cuenca
Carlos es ingeniero informático por la UPM (Politécnico de Madrid), especializad...